Faigh na fíricí leis na leideanna seo
I measc na brabhsálaithe gréasáin go léir tá a fhios mar "stíleanna defauly". Is stíleanna iad seo a dhearbhaíonn cuma agus mothú na heilimintí HTML in éagmais aon fhaisnéis stíl eile. Mar shampla, i mbeagnach gach brabhsálaí is é an cuma réamhshocraithe de na hipearnasc ná dath gorm geal le fo-líne. Seo é an chaoi a bhféachann na naisc sin mura n-insíonn tú iad a thaispeáint ar bhealach difriúil.
Is féidir le stíleanna brabhsála réamhshocraithe a bheith cabhrach, ach i go leor cásanna is mian le dearthóirí gréasáin na stíleanna seo a bhaint ionas gur féidir leo tosú úr le stíleanna go bhfuil siad 100% faoi rialú. Déantar é seo trí "stíleanna bileog mháistir" a úsáid.
Ba chóir go mbeadh stílbhileog máistir an chéad bhileog bhileog a ghlaonn tú sna doiciméid go léir. Bain úsáid as máistir-bhileog leat chun socruithe réamhshocraithe an bhrabhsálaí a ghlanadh a d'fhéadfadh fadhbanna a chruthú i ndearadh Gréasáin tras-bhrabhsálaí. Nuair a bheidh tú ag glanadh na stíleanna le máistir-bhileog, tosaíonn do dhearadh ón áit chéanna sna brabhsálaithe go léir - cosúil le chanbhás glan le haghaidh péinteáil.
Mainneachtainí Domhanda
Ba chóir do mháistir-bhileog a thosú trí na n-imeall, na paddings agus na teorainneacha a chur ar an leathanach. Rinne roinnt brabhsálaithe Gréasáin comhlacht an doiciméid a mhainneachtain go 1 nó 2 picteilín atá dlite ó imealláin an bhrabhsálaí. Déanann sé seo cinnte go léiríonn siad go léir mar an gcéanna:
html, comhlacht {corrlach: 0px; stuáil: 0px; teorainn: 0px; }Ba mhaith leat freisin an cló a chomhsheasamh. Bí cinnte go leagtar an clómhéid freisin go 100 faoin gcéad nó 1em, ionas go mbeidh do leathanach inrochtana, ach tá an méid fós comhsheasmhach. Agus a bheith cinnte go n-áireofaí an airde líne.
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Formáid Ceannlíne
De ghnáth, réamhshocraíonn clibeanna ceannlíne nó ceannteidil (H1, H2, H3, etc.) go téacs trom le corrlaigh móra nó ag bualadh timpeall orthu. Trí imréitigh agus meáchain a ghlanadh, cinnteoidh tú go bhfuil na clibeanna seo fós níos mó (nó níos lú) ná an téacs timpeall orthu gan stíleanna breise a bheith acu:
h1, h2, h3, h4, h5, h6 {marggin: 0; stuáil: 0; cló-meáchan: gnáth; cló-theaghlaigh: Arial, Helvetica, sans-serif; }B'fhéidir gur mhaith leat smaoineamh ar mhéideanna sonracha, spásáil litreacha agus paddings a leagan síos do na clibeanna ceannlíne, ach braitheann sé sin i ndáiríre ar stíl an tsuímh atá á dhearadh agat agus ba chóir é a fhágáil as an mbileog mháistirstíl. Is féidir leat níos mó stíleanna a chur leis na ceannteidil seo de réir mar is gá do do dhearadh ar leith.
Formáidiú Téacs Plain
Lasmuigh de na ceannlínte, tá clibeanna téacs eile ann gur chóir duit a bheith cinnte go soiléirítear amach. Is é atá leagtha síos go minic ná dearmad a dhéanamh ar na clibeanna cille tábla (TH agus TD) agus clibeanna a fhoirmiú (SELECT, TEXTAREA agus INPUT). Mura gcuireann tú iad siúd ar an méid céanna le do chorp agus do mhír an téacs, féadfaidh tú a bheith iontas gan choinne ar an gcaoi a dtugann na brabhsálaithe iad.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {marggin: 0; stuáil: 0; cló: gnáth-gnáth 1em / 1.25 Arial, Helvetica, sans-serif; }Is maith freisin do chuid luachanna (BLOCKQUOTE agus Q), acrainmneacha, agus giorrúcháin a thabhairt le stíl bhreise breise, ionas go mbeidh siad beagán níos mó iontu:
blockquote {corrlach: 1.25em; stuáil: 1.25em} q {font-style: italic; } acrainm, abbr {cursor: help; bun na teorann: 1px thit; }Naisc agus Íomhánna
Is furasta naisc a bhainistiú agus athrú a dhéanamh ar an téacs sin géarfhocail gorm thuasluaite. Is fearr liom go gcuirfí béim ar mo naisc i gcónaí, ach más fearr leat é ar bhealach difriúil is féidir leat na roghanna seo a leagan ar leithligh. Ní chuimsíonn mé dathanna sa bhileog máistir stíl freisin, toisc go mbraitheann sin ar an dearadh.
a, a: link, a: visited, a: active, a: hover {text-decoration: underline; }Le híomhánna, tá sé tábhachtach na teorainneacha a mhúchadh. Cé nach léiríonn an chuid is mó de na brabhsálaithe teorainn timpeall íomhá plain, nuair a bhíonn an íomhá nasctha, téann na brabhsálaithe ar an teorainn. Chun seo a shocrú:
img {teorainn: none; }Táblaí
Cé nach bhfuil na táblaí á n-úsáid chun críocha an leagan amach a thuilleadh, féadfaidh tú suíomh a úsáid i gcónaí le haghaidh sonraí iarbhír tabláir. Úsáid fhíneáil é seo de tháblaí HTML. Rinneamar cinnte cheana go bhfuil an méid téacs réamhshocraithe mar an gcéanna le do chealla tábla, ach tá roinnt stíleanna eile ann ba chóir duit a shocrú ionas go mbeidh do tháblaí mar an gcéanna:
tábla {corrlach: 0; stuáil: 0; teorainn: none; }Foirmeacha
Cosúil le heilimintí eile, ba cheart duit na corrlaigh agus na paddings thart ar do chuid foirmeacha a shoiléiriú. Rud eile is maith liom é a dhéanamh athscríobh an chlib mar " inlíne " ionas nach gcuireann sé spás breise nuair a chuireann tú an chlib sa chód. Mar atá le heilimintí téacs eile, sainmhínigh mé an fhaisnéis clóite le haghaidh roghnú, textarea agus ionchur suas thuas, ionas go mbeidh sé mar an gcéanna leis an gcuid eile de mo théacs.
foirm {corrlach: 0; stuáil: 0; taispeáint: inlíne; }Is maith an smaoineamh é an cúrsóir a athrú do do lipéid. Cuidíonn sé seo le daoine a fheiceáil go ndéanfaidh an lipéad rud éigin nuair a chliceálann siad é.
lipéad {cúrsóir: pointeoir; }Ranganna Coitianta
Maidir leis an gcuid seo den mháistir-bhileog, ba cheart duit ranganna a shainmhíniú a dhéanann ciall duit. Seo cuid de na ranganna a úsáideann mé is minice. Tabhair faoi deara nach bhfuil aon ghné ar leith leagtha síos ionas gur féidir leat iad a shannadh ar an méid is gá duit:
.clear {soiléir: araon; } .floatLeft {snámhphointe: ar chlé; } .floatRight {snámhphointe: ceart; } .textLeft {téacs-ailíniú: clé; } .textRight {téacs-ailíniú: ceart; } .textCenter {téacs-ailíniú: lár; } .textJustify {téacs-ailíniú: údar; } .blockCenter {taispeáint: bloc; imeall-chlé: uathoibríoch; ceart corrlach: uathoibríoch; } / * cuimhnigh leithead * / .bold a leagtar {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {imeall-chlé: 0; stuáil-chlé: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {liosta-stíl: none; liosta-stíl-íomhá: none; }Cuimhnigh, toisc go bhfuil na ranganna seo scríofa roimh aon stíleanna eile agus go bhfuil siad ach ranganna, tá sé éasca a mhaolú le hairíonna stíl níos sainiúla a tharlaíonn níos déanaí sa choscán . Má aimsíonn tú go leagann tú rang coiteann ar eilimint agus ní thiocfaidh sé i bhfeidhm, ba cheart duit seiceáil a dhéanamh cinnte nach bhfuil stíl eile ann i gceann de do chuid bileoga stíleanna ina dhiaidh sin a dhéanann difear don eilimint chéanna sin.
Bileog Stíleanna Máistir Uile
/ * Mainneachtainí Domhanda * / html, body {marggin: 0px; stuáil: 0px; teorainn: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Ceannlínte * / h1, h2, h3, h4, h5, h6 {marggin: 0; stuáil: 0; cló-meáchan: gnáth; cló-theaghlaigh: Arial, Helvetica, sans-serif; } / * Stíleanna Téacs * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {marggin: 0; stuáil: 0; cló: gnáth-gnáth 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {corrlach: 1.25em; stuáil: 1.25em} q {font-style: italic; } acrainm, abbr {cursor: help; bun na teorann: 1px thit; } beag {font-size: .85em; } mór {font-size: 1.2em; } / * Naisc agus Íomhánna * / a, a: link, a: visited, a: active, a: hover {text-decoration: underline; } img {teorainn: none; } / * Táblaí * / tábla {corrlach: 0; stuáil: 0; teorainn: none; } / * Foirmeacha * / form {margin: 0; stuáil: 0; taispeáint: inlíne; } lipéad {cúrsóir: pointeoir; } / * Ranganna Coitianta * / .clear {soiléir: an dá; } .floatLeft {snámhphointe: ar chlé; } .floatRight {snámhphointe: ceart; } .textLeft {téacs-ailíniú: clé; } .textRight {téacs-ailíniú: ceart; } .textCenter {téacs-ailíniú: lár; } .textJustify {téacs-ailíniú: údar; } .blockCenter {taispeáint: bloc; imeall-chlé: uathoibríoch; ceart corrlach: uathoibríoch; } / * cuimhnigh leithead * / .bold a leagtar {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {imeall-chlé: 0; stuáil-chlé: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {liosta-stíl: none; liosta-stíl-íomhá: none; }Airteagal bunaidh le Jennifer Krynin. Arna eagarthóireacht ag Jeremy Girard ar 10/6/17