Sealladh farsaing air bileagan stoidhle cascading le bileag stoidhle seòrsa
Nuair a thogas tu làrach-lìn bho thùs, tha e duilich tòiseachadh leis na stoidhlichean bunaiteach a chaidh a mhìneachadh. Tha e coltach le bhith a 'tòiseachadh le canabhas glan agus bruisean ùra. Is e aon de na ciad trioblaidean a tha aig luchd-dealbhaidh lìn gu bheil brabhsairean lìn uile eadar-dhealaichte. Tha am meud cruth bunaiteach eadar-dhealaichte bho àrd-ùrlar gu àrd-ùrlar, tha an teaghlach cruth bunaiteach diofraichte, tha cuid de na brabhsairean a 'sònrachadh iomaill agus a' gleabadh air tag na cuirp agus cuid eile, agus mar sin air adhart. Faigh timcheall air na neo-chunbhalaidhean seo le bhith a 'mìneachadh nan stoidhlichean bunaiteach airson do dhuilleagan lìn.
CSS agus an Seata Caractar
Na ciad rudan an toiseach, cuir seata caractar nan sgrìobhainnean CSS agad gu utf-8 . Ged a tha e coltach gu bheil a 'mhòr-chuid de na duilleagan a tha thu a' dealbhachadh air an sgrìobhadh sa Bheurla, faodaidh cuid a bhith air an atharrachadh gu h-ionadail airson co-theacs eadar-dhealaichte cànanach agus cultarail. Nuair a tha iad, bidh utf-8 a 'sìmplidh a' phròiseis. Cha bhith a 'suidheachadh a' charactair a tha air a shuidheachadh anns an duilleag stoidhle a-muigh air thoiseach air ceann HTTP , ach anns a h-uile suidheachadh eile, bidh e.
Tha e furasta an t-seata caractar a shuidheachadh. Airson a 'chiad loidhne den sgrìobhainn CSS sgrìobh:
@charset "utf-8";Mar seo, ma chleachdas tu caractaran eadar-nàiseanta ann an togalach susbaint no mar ainm clas agus ID, bidh an duilleag stoidhle fhathast ag obair gu ceart.
A 'dealbhachadh na Buidhne Duilleag
Is e an ath rud a tha a dhìth air duilleag stoidhle bunaiteach a bhith nan stoidhlichean gus nach eil iomall air, iomadachadh, agus crìochan. Tha seo a 'dèanamh cinnteach gu bheil a h-uile brabhsairean a' cur an t-susbaint san aon àite, agus nach eil àiteachan falaichte sam bith eadar am brabhsair agus an t-susbaint. Airson a 'chuid as motha de dhuilleagan-lìn, tha seo ro fhaisg air an oir airson teacsa, ach tha e cudromach tòiseachadh an sin gus am bi ìomhaighean cùl-raoin agus roinnean rèiteachaidh air an sgeadachadh gu ceart.
html, body {marg: 0px; lannachadh: 0px; crìochan: 0px; }Suidhich an toradh tòiseachaidh no an dath cruth-dhubh gu dubh agus an dath cùil bunaiteach gu geal. Ged a bhios seo nas buailtiche atharrachadh airson a 'chuid as motha de dhealbhaidhean duilleag-lìn, le bhith a' toirt nan dathan coitcheann seo air a 'bhodhaig agus an tag HTML, bidh e nas fhasa an duilleag a leughadh agus a bhith ag obair còmhla.
html, body {dath: # 000; cùl-fhiosrachadh: #fff; }Stòran bunaiteach de chliath
Tha meud an cruth-clò agus an teaghlach cruth-tìre mar rud a dh 'atharraicheas atharrachadh nuair a thèid an dealbhadh a ghleidheadh ach a thòisicheas le meud bunaiteach de 1 em agus de theaghlach clò-bhualadh bunaiteach de Arial, Geneva, no de phort eile sans-serif. Tha cleachdadh ems a 'cumail suas na duilleige cho ruigsinneach' sa ghabhas, agus tha cruth sans-serif nas so-leònte air an sgrion.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Dh'fhaodadh gu bheil àiteachan eile far am faodadh tu teacsa fhaighinn, ach tha p , th , td , li , dd , agus dt tòiseachaidh math airson a bhith a 'mìneachadh a' chruth bunaiteach. Cuir a-steach HTML agus corp mar as trice, ach bidh mòran brabhsairean a 'cur thairis air na roghainnean cruth-clò ma tha thu a' sònrachadh nam futaichean agad airson an HTML no a 'bhodhaig.
Naidheachdan
Tha cinn-cinn HTML cudromach gus an làrach-lìn agad a chuideachadh agus leig le innealan-rannsachaidh a dhol nas doimhne air do làrach. Gun stoidhlichean, tha iad uile gu math grànda, mar sin bidh iad a 'suidheachadh stoidhlean bunaiteach air a h-uile gin dhiubh agus a' mìneachadh an teaghlach cruth-clò agus na meudan cruth airson gach fear.
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; }Na cuir stad air na ceanglaichean
Tha a bhith a 'dealbhachadh nan dathan ceangail cha mhòr an-còmhnaidh na phàirt riatanach den dealbhadh, ach mura dèan thu sin gan mìneachadh sna stoidhlichean bunaiteach, tha e cinnteach gum bi thu a' dìochuimhneachadh aon de na clasaichean pseudo. Mìnich iad le atharrachadh beag air gorm agus an uair sin atharraich iad aon uair 's gu bheil an dath dath agad airson an làrach a tha air a mhìneachadh.
Gus na ceanglaichean a shuidheachadh ann an seallaidhean gorm, seata:
- ceanglaichean mar ghorm
- tadhal air na ceanglaichean mar ghorm dorcha
- Ceanglaichean a-mach mar ghlas aotrom
- ceanglaichean gnìomhach mar eadhon nas gorm
mar a chithear san eisimpleir seo:
a: ceangal {dath: # 00f; } a: thadhail {{dath: # 009; } a: hover {dath: # 06f; } a: gnìomhach {dath: # 0cf; } Le bhith a 'dealbhadh nan ceanglaichean le sgeama dath gu leòr neo-chiontach, bidh e a' dèanamh cinnteach nach dì-chuimhnich mi gin de na clasaichean, agus cuideachd bidh mi a 'dèanamh beagan nas cruaidhe na a' ghorm, dearg, agus purpaidh.Bileag làn stoidhle
Seo an duilleag làn stoidhle:
@charset "utf-8"; html, body {marg: 0px; lannachadh: 0px; crìochan: 0px; dath: # 000; cùl-fhiosrachadh: #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: ceangal {dath: # 00f; } a: thadhail {{dath: # 009; } a: hover {dath: # 06f; } a: gnìomhach {dath: # 0cf; }