Gba awọn otitọ pẹlu awọn imọran wọnyi
Gbogbo awọn aṣàwákiri wẹẹbù ni ohun ti a mọ gẹgẹbi "awọn awoṣe defauly." Awọn wọnyi ni awọn aza ti o ṣe apejuwe oju ati idaniloju awọn eroja HTML ni laisi alaye eyikeyi ti ara miiran. Fún àpẹrẹ, ní fere gbogbo aṣàwákiri aṣàwákiri àìrí ti awọn hyperlinks jẹ awọ awọ bulu ti o ni akọle. Eyi ni bi awọn asopọ naa ṣe wo ayafi ti o ba sọ fun wọn lati han ni ọna ti o yatọ.
Awọn aṣiṣe aṣàwákiri aiyipada le jẹ olùrànlọwọ, ṣugbọn ni ọpọlọpọ igba awọn apẹẹrẹ ayelujara nfẹ lati yọ awọn aza wọnyi kuro ki wọn le bẹrẹ titun pẹlu awọn aza ti wọn jẹ 100% ni iṣakoso. Eyi ni a ṣe nipa lilo ohun ti a mọ ni "awoṣe aṣoju".
Awọn awoṣe aṣoju yẹ ki o jẹ akọkọ stylesheet ti o pe ni gbogbo awọn iwe aṣẹ rẹ. O lo ọna kika aṣoju lati pa awọn eto aṣàwákiri aiyipada ti o le fa awọn iṣoro ni agbelebu kiri-kiri ayelujara. Lọgan ti o ba ti yọ awọn aza ti o ni awoṣe ti o ni ojuṣe, aṣiṣe rẹ bẹrẹ lati ibi kanna ni gbogbo awọn aṣàwákiri - bi awofẹlẹ ti o mọ fun kikun.
Awọn aṣiṣe Agbaye
Ọna oluwa rẹ yẹ ki o bẹrẹ nipasẹ zeroing jade awọn agbegbe, awọn fifẹ ati awọn aala lori oju-iwe naa. Diẹ ninu awọn aṣàwákiri ayelujara aiyipada ara ti iwe-ipamọ si 1 tabi 2 awọn piksẹli ti o ni irisi lati oju awọn bọtini aṣàwákiri. Eyi mu daju pe gbogbo wọn ni afihan kanna:
html, ara {ala: 0px; padding: 0px; aala: 0px; }O tun fẹ lati ṣe iṣiro fonti. Rii daju pe tun ṣeto iwọn titobi si 100 ogorun tabi 1, ki oju-iwe rẹ ba wa ni aaye, ṣugbọn iwọn naa jẹ deede. Ki o si rii daju pe o ni ila-ila.
ara {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Akopọ Akọle
Akọle tabi awọn akọle akọle (H1, H2, H3, ati be be lo) deede aiyipada si ọrọ alaifoya pẹlu awọn iwọn ti o tobi tabi awọn papo ni ayika wọn. Nipa gbigbọn idiwọn, awọn agbegbe ati irọra, o rii daju pe awọn afi aami wọnyi ṣi ṣi tobi (tabi kere ju) ju ọrọ lọ ni ayika wọn lai ṣe awọn awoṣe afikun:
h1, h2, h3, h4, h5, h6 {ala: 0; padding: 0; iṣiro-aṣiṣe: deede; ẹkun-ẹda: Arial, Helvetica, sans-serif; }O le fẹ lati wo awọn ipo pataki pato, aaye-lẹta-lẹta ati awọn fifẹ si awọn akọle akọle rẹ, ṣugbọn ti o da lori iru ara ti ojula ti o n ṣe apẹrẹ ati pe o yẹ ki o fi silẹ kuro ninu iwe-ara aṣoju. O le fi awọn awọ sii kun fun awọn akọle wọnyi bi o ṣe nilo fun apẹrẹ rẹ pato.
Ṣiṣe kika Text ni Kalẹnda
Awọn akọle ti o kọja, awọn ọrọ ọrọ miiran wa ti o yẹ ki o jẹ daju lati mu kuro. Ọkan ṣeto ti awọn eniyan igbagbe gbagbe ni awọn tabulẹti tabili tabili (TH ati TD) ati ki o ṣe afiwe (SELECT, TEXTAREA ati INPUT). Ti o ko ba ṣeto awọn ti o ni iwọn kanna bi ọrọ ara rẹ ati ọrọ paragile, o le jẹ alailẹnu pupọ ni bi awọn aṣàwákiri ṣe fun wọn.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {ala: 0; padding: 0; fonti: deede deede deede 1em / 1.25 Arial, Helvetica, sans-serif; }O tun dara lati fun awọn ọrọ rẹ (BLOCKQUOTE ati Q), awọn acronyms, ati awọn itunku kekere diẹ sii, ki wọn ba jade diẹ diẹ sii:
blockquote {ala: 1.25em; padding: 1.25m} q {iwa-ara: italic; } akọsilẹ, abbr {kọsọ: iranlọwọ; aala-isalẹ: 1px dashed; }Awọn isopọ ati awọn Aworan
Awọn isopọ jẹ rọrun lati ṣakoso ati lati yi pada lati inu ọrọ ti o ni afihan buluu ti a ti sọ tẹlẹ. Mo fẹ lati ma ni awọn iṣọpọ mi nigbagbogbo, ṣugbọn bi o ba fẹ o ni ọna miiran o le ṣeto awọn aṣayan wọnyi lọtọ. Mo tun ko pẹlu awọn awọ ni folda ti aṣewe, nitori pe da lori apẹrẹ.
a, a: ọna asopọ, a: ṣàbẹwò, a: lọwọ, a: hover {ohun-ọṣọ: akọle; }Pẹlu awọn aworan, o ṣe pataki lati pa awọn aala. Lakoko ti ọpọlọpọ awọn aṣàwákiri ko han àla kan ni ayika aworan atẹyẹ, nigbati a ba fi aworan naa sopọ, awọn aṣàwákiri ṣafẹkun aala. Lati ṣatunṣe eyi:
img ~ aala: kò si; }Awọn tabili
Lakoko ti a ko lo awọn tabili fun awọn ipilẹ ifilelẹ, o le tun lo wọn fun awọn data otitọ timọ. Eyi jẹ lilo daradara ti awọn tabili HTML. A ti sọ tẹlẹ pe daju pe iwọn ọrọ aiyipada jẹ kanna fun awọn tabili rẹ tabili, ṣugbọn awọn oriṣi awọn miiran ti o yẹ ki o ṣeto ki tabili rẹ ba wa ni kanna:
tabili {ala: 0; padding: 0; aala: kò si; }Awọn fọọmu
Gẹgẹbi awọn eroja miiran, o yẹ ki o yọ awọn agbegbe ati awọn fifẹ ni ayika awọn fọọmu rẹ. Ohun miiran ti mo fẹ lati ṣe ni tun ṣe apejuwe awọn aami fọọmu bi " inline " ki o ko fi aaye kun diẹ sii nibiti o gbe tag ni koodu naa. Gẹgẹbi awọn eroja miiran, Mo ti ṣafihan alaye ti fonti fun yan, ọrọ ati awọn titẹ sii loke, ki o jẹ kanna bi iyokù ọrọ mi.
fọọmu {ala: 0; padding: 0; àfihàn: ìlà; }O tun jẹ agutan ti o dara lati yi kọsọ fun awọn akole rẹ. Eyi ṣe iranlọwọ fun awọn eniyan lati rii pe aami naa yoo ṣe nkan nigba ti wọn tẹ ọ.
Atilẹkọ {kọsọ: ijuboluwo; }Awọn Kọọmu ti o wọpọ
Fun apakan yi ti awọn awoṣe aṣoju, o yẹ ki o setumo awọn kilasi ti o ni oye si o. Awọn wọnyi ni diẹ ninu awọn kilasi ti mo lo julọ igbagbogbo. Ṣe akiyesi pe wọn ko ṣeto si eyikeyi pato ero, nitorina o le fi wọn si ohunkohun ti o nilo:
.parun [ko o: mejeeji; } .floatLeft [float: osi; } .floatRight {float: ọtun; } .textLeft {ọrọ-align: osi; } .textLight {ọrọ-kikọ: ọtun; } .textCenter {ọrọ-align: aarin; } .textJustify {ọrọ-align: justify; } .blockCenter {àpapọ: Àkọsílẹ; ala-osi: auto; ala-ọtun: auto; } / * ranti lati ṣeto iwọn * / .bold {font-weight: bold; } .italic {font-style: italic; } .apakalẹ ọrọ-ọṣọ: akọle; } .nilẹgbẹ [ala-osi: 0; padding-left: 0; } .agbegbe agbegbe [0]: 0; } .nopadding {padding: 0; } .nobullet {akojọ-akojọ: kò; aworan-ara-akojọ: kò; }Ranti pe nitori pe awọn kilasi wọnyi ni a kọ ṣaaju ki o to awọn iru awọn miiran ati pe wọn jẹ kilasi, wọn jẹ rọrun lati bori pẹlu awọn ẹya ara ẹni pato ti o waye nigbamii ni adagun omi . Ti o ba ri pe o ṣeto kilasi ti o wọpọ lori ohun kan ati pe ko ni ipa, o yẹ ki o ṣayẹwo lati rii daju pe ko si ọna miiran ninu ọkan ninu awọn awoṣe ti o tẹle rẹ ti o ni ipa kanna.
Awọn Gbogbo Titunto si Stylesheet
/ * Awọn aifọwọyi Agbaye * / html, ara {ala: 0px; padding: 0px; aala: 0px; } ara {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Awọn akọle * / h1, h2, h3, h4, h5, h6 {ala: 0; padding: 0; iṣiro-aṣiṣe: deede; ẹkun-ẹda: Arial, Helvetica, sans-serif; } / * Ikọwe ọrọ * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {ala: 0; padding: 0; fonti: deede deede deede 1em / 1.25 Arial, Helvetica, sans-serif; } Àkọlé ẹwọn {ala: 1.25; padding: 1.25m} q {iwa-ara: italic; } akọsilẹ, abbr {kọsọ: iranlọwọ; aala-isalẹ: 1px dashed; } kekere {font-size: .85em; } nla {font-size: 1.2em; } / * Awọn asopọ ati Awọn aworan * / a, a: ọna asopọ, a: ṣàbẹwò, a: lọwọ, a: hover {ohun-ọṣọ-ọrọ: akọle; } img-border: ko si; } / * Awọn tabili * / tabili {ala: 0; padding: 0; aala: kò si; } / * Awọn fọọmu * / fọọmu {ala: 0; padding: 0; àfihàn: ìlà; } aami * oruko: ijuboluwo; } / * Awọn kọọmu ti o wọpọ * / .clear [ko o: mejeeji; } .floatLeft [float: osi; } .floatRight {float: ọtun; } .textLeft {ọrọ-align: osi; } .textLight {ọrọ-kikọ: ọtun; } .textCenter {ọrọ-align: aarin; } .textJustify {ọrọ-align: justify; } .blockCenter {àpapọ: Àkọsílẹ; ala-osi: auto; ala-ọtun: auto; } / * ranti lati ṣeto iwọn * / .bold {font-weight: bold; } .italic {font-style: italic; } .apakalẹ ọrọ-ọṣọ: akọle; } .nilẹgbẹ [ala-osi: 0; padding-left: 0; } .agbegbe agbegbe [0]: 0; } .nopadding {padding: 0; } .nobullet {akojọ-akojọ: kò; aworan-ara-akojọ: kò; }Atilẹkọ article nipasẹ Jennifer Krynin. Edited by Jeremy Girard lori 10/6/17