Forbhreathnú ar Bileoga Stíl Cascáideacha Le Bileog Stíl Samplach
Nuair a thógann tú láithreán gréasáin ó thús, tá sé cliste chun tús a chur leis na stíleanna bunúsacha atá sainmhínithe. Is cosúil le tosú le chanbhás glan agus scuaba úra. Ceann de na chéad fhadhbanna a bhaineann le dearthóirí gréasáin ná go bhfuil gach brabhsálaí gréasáin difriúil. Tá an clómhéid réamhshocraithe difriúil ón ardán go dtí an ardán, tá an teaghlach cló réamhshocraithe difriúil, déantar cuid de na brabhsálaithe a shainmhíniú ar imeall agus a stuáil ar chlib an chomhlachta agus ní dhéanann daoine eile, agus mar sin de. Faigh timpeall ar na neamhréireachtaí seo trí na stíleanna réamhshocraithe do do leathanaigh ghréasáin a shainmhíniú.
CSS agus an Socraigh Carachtair
Na chéad rudaí ar dtús, socraigh an tacar carachtar de doiciméid CSS chuig utf-8 . Cé gur dócha go ndéanfar an chuid is mó de na leathanaigh a dhearadh tú a scríobh i mBéarla, d'fhéadfaí cuid díobh a chur in oiriúint go háitiúil le haghaidh comhthéacs teanga agus cultúir éagsúla. Nuair atá siad, simplíonn utf-8 an próiseas. Ní bheidh tosaíocht ag leagan síos an charachtair atá leagtha amach sa bhileog stíle seachtrach thar cheannteideal HTTP , ach i ngach cás eile, beidh sé.
Tá sé éasca an tacar carachtar a leagan síos. Le haghaidh an chéad líne den doiciméad CSS scríobh:
@charset "utf-8";Ar an mbealach seo, má úsáideann tú carachtair idirnáisiúnta sa mhaoin ábhar nó mar ainmneacha ranga agus ID, beidh an leathán stíl ag obair i gceart.
Stíliú ar Chomhlacht na Page
An chéad rud eile is gá stíleanna a bheith ag teastáil ar bhileog stíl réamhshocraithe chun corrlaigh, stuáil, agus teorainneacha a bhaint amach. Déanann sé seo cinnte go gcuirfidh gach brabhsálaí an t-ábhar san áit chéanna, agus nach bhfuil aon spásanna i bhfolach idir an bhrabhsálaí agus an t-ábhar. Maidir leis an chuid is mó de na leathanaigh ghréasáin, tá sé seo gar do imeall an téacs, ach tá sé tábhachtach tosú ansin ionas go mbeidh íomhánna cúlra agus ranna leagan amach i gceart.
html, comhlacht {corrlach: 0px; stuáil: 0px; teorainn: 0px; }Socraigh an tulra réamhshocraithe nó an dath cló go dubh agus an dath cúlra réamhshocraithe go bán. Cé gur dócha go n-athróidh sé seo le haghaidh an chuid is mó de dhearaí leathanach gréasáin, agus na dathanna caighdeánacha seo a leagtar ar an gcorp agus ar an gclib HTML ar dtús, déanann an leathanach níos éasca a léamh agus a bheith ag obair leis.
html, comhlacht {dath: # 000; cúlra: #fff; }Stíleanna Cló Réamhshocraithe
Is é an méid cló agus an teaghlach clóite ná rud a d'fhéadfadh athrú a dhéanamh ar aon uair amháin nuair a ghlacfaidh an dearadh ach go dtosóidh sé le clómhéid réamhshocraithe 1 em agus teaghlaigh cló réamhshocraithe Arial, Ginéive, nó cló sans-serif éigin eile. Coinníonn úsáid ems an leathanach inrochtana agus is féidir, agus níl cló sans-serif níos inléite ar an scáileán.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }D'fhéadfadh go mbeadh áiteanna eile ann i gcás go bhféadfadh tú téacs a fháil, ach tús maith le p , th , td , li , dd , agus dt chun an cló bonn a shainmhíniú. Cuir HTML agus comhlacht san áireamh, i gcás ina ndéanann go leor brabhsálaithe na roghanna clódaigh a sheachaint mura sainmhíníonn tú ach do chuid clónna don HTML nó don chomhlacht.
Ceannlínte
Tá ceannteidil HTML tábhachtach le húsáid chun cabhrú le do imlíne a dhéanamh ar an láithreán agus lig inneall cuardaigh níos doimhne i do shuíomh. Gan stíleanna, tá siad go léir gránna, agus mar sin leagann siad stíleanna réamhshocraithe ar gach ceann acu agus sainmhíníonn siad an teaghlach cló agus na méideanna clóite do gach ceann acu.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }Ná déan dearmad na Naisc
Is cuid ríthábhachtach den dearadh iad na dathanna nasc a cheapadh, ach mura gcuireann tú iad a shainmhíniú sna stíleanna réamhshocraithe, seans go mbainfidh tú dearmad ar cheann amháin de na pseudo-ranganna ar a laghad. Sainmhínigh siad roinnt athruithe beaga ar gorm agus ansin iad a athrú nuair a bhíonn an pailéad dathanna agat don láithreán atá sainmhínithe.
Na naisc a leagan síos i shades gorm, leagtha:
- naisc mar gorm
- thug naisc cuairt orthu mar gorm dorcha
- hover naisc mar gorm éadrom
- naisc ghníomhacha mar gorm níos géire
mar a thaispeántar san sampla seo:
a: nasc {dath: # 00f; } a: cuairt {dath: # 009; } a: hover {dath: # 06f; } a: gníomhach {dath: # 0cf; } Trí na naisc a dhíriú le scéim dathanna neamhchiontach, cinntíonn sé nach ndéanfaidh mé dearmad ar aon cheann de na ranganna, agus go ndéanann siad iad beagán níos lú ná an gorm, dearg, agus corcra réamhshocraithe.Bileog Iomlán Stíl
Seo an leathán stíl iomlán:
@charset "utf-8"; html, comhlacht {corrlach: 0px; stuáil: 0px; teorainn: 0px; dath: # 000; cúlra: #fff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: nasc {dath: # 00f; } a: cuairt {dath: # 009; } a: hover {dath: # 06f; } a: gníomhach {dath: # 0cf; }