Dosbarthiadau ac IDau Help Ehangu Eich CSS
Mae gwefannau adeiladu ar We heddiw yn deall dealltwriaeth ddwfn o CSS (Cascading Style Sheets). Dyma'r cyfarwyddiadau yr ydych chi'n rhoi gwefan i benderfynu sut y bydd y gosodiad yn y ffenestr porwr. Rydych chi'n cyflwyno cyfres o "arddulliau" i'ch dogfen HTML a fydd yn creu golwg a theimlad eich gwefan.
Mae sawl ffordd o gymhwyso'r arddulliau uchod ar draws dogfen, ond yn aml, rydych am ddefnyddio arddull dim ond rhai o'r elfennau mewn dogfen, ond nid pob achos o'r elfen honno.
Efallai y byddwch hefyd am greu arddull y gallwch chi ei wneud i sawl elfen mewn dogfen, heb orfod ailadrodd y rheol arddull ar gyfer pob achos unigol. I gyflawni'r arddulliau dymunol hyn, byddwch yn defnyddio'r nodweddion dosbarth a ID HTML. Mae'r nodweddion hyn yn nodweddion byd-eang y gellir eu cymhwyso i bron pob tag HTML . Mae hyn yn golygu a ydych chi'n arddull adrannau, paragraffau, dolenni, rhestrau neu unrhyw un o'r darnau eraill o HTML yn eich dogfen, gallwch droi at nodweddion dosbarth a ID i eich helpu i gyflawni'r dasg hon!
Dewiswyr Dosbarth
Mae'r dewisydd dosbarth yn caniatáu i chi osod lluosog o arddulliau i'r un elfen neu tag mewn dogfen. Er enghraifft, efallai y byddwch am gael rhannau penodol o'ch testun a elwir allan mewn lliw gwahanol o weddill y testun yn y ddogfen. Gallai'r adrannau a amlygwyd hyn fod yn "rhybudd" eich bod yn eu gosod ar y dudalen. Gallech chi ddosbarthu'ch paragraffau gyda dosbarthiadau fel hyn:
p {lliw: # 0000ff; }
p.alert {lliw: # ff0000; }
Byddai'r arddulliau hyn yn gosod lliw pob paragraff i las (# 0000ff), ond byddai unrhyw baragraff â phriodoledd dosbarth "rhybudd" yn hytrach na styled mewn coch (# ff0000). Mae hyn oherwydd bod gan briodoldeb y dosbarth fanyleb uwch na rheol CSS cyntaf, sy'n defnyddio detholydd tag yn unig.
Wrth weithio gyda CSS, bydd rheol fwy penodol yn goresgyn un llai penodol. Felly, yn yr enghraifft hon, mae'r rheol mwy cyffredinol yn gosod lliw pob paragraff, ond yr ail, rheol fwy penodol na gorchuddio sy'n gosod yn unig ar rai paragraffau.
Dyma sut y gellid defnyddio hyn mewn rhai marc HTML:
Byddai'r paragraff hwn yn cael ei arddangos mewn glas, sef y rhagosodiad ar gyfer y dudalen.
Byddai'r paragraff hwn hefyd mewn glas.
A byddai'r paragraff hwn yn cael ei arddangos mewn coch gan y byddai'r briodwedd dosbarth yn goresgyn y lliw glas safonol o'r arddull dewisydd elfen.
Yn yr enghraifft honno, byddai arddull "p.alert" ond yn berthnasol i elfennau paragraff sy'n defnyddio'r dosbarth "rhybudd" hwnnw. Os oeddech chi eisiau defnyddio'r dosbarth hwnnw ar draws elfennau HTML lluosog, byddech yn syml dileu'r elfen HTML o ddechrau'r ffoniwch arddull (dim ond yn siŵr eich bod yn gadael y cyfnod (.) yn ei le), fel hyn:
.alert {background-color: # ff0000;}
Mae'r dosbarth hwn bellach ar gael i unrhyw elfen sydd ei hangen arno. Bydd unrhyw ddarn o'ch HTML sydd â gwerth priodoli dosbarth "rhybudd" nawr yn cael yr arddull hon. Yn y HTML isod, mae gennym ddau baragraff a phennawd lefel 2 sy'n defnyddio'r dosbarth "rhybudd". Byddai'r ddau ohonynt â lliw cefndir o goch wedi'i seilio ar y CSS yr ydym yn ei ddangos yn unig.
Byddai'r paragraff hwn yn cael ei ysgrifennu mewn coch.
A byddai'r h2 hwn hefyd yn goch.
Ar wefannau heddiw, defnyddir priodoleddau dosbarth yn aml ar y rhan fwyaf o elfennau oherwydd eu bod yn haws gweithio gyda nhw o bersbectif penodoldeb. Fe welwch y rhan fwyaf o'r tudalennau HTML cyfredol i'w llenwi â phriodoleddau dosbarth, y mae rhai ohonynt yn cael eu hailadrodd sawl gwaith mewn dogfen ac eraill a all ymddangos unwaith yn unig.
Dewiswyr ID
Mae'r dewisydd ID yn caniatáu ichi roi enw i arddull benodol heb ei gysylltu â tag neu elfen HTML arall. Dywedwch fod gennych chi adran yn eich marc HTML sy'n cynnwys gwybodaeth am ddigwyddiad.
Gallech roi priodoldeb ID o "ddigwyddiad" i'r adran hon, ac yna os ydych chi am amlinellu'r adran honno â ffin du 1-picsel ar y cyfan, ysgrifennwch god ID fel hyn:
#event {border: 1px solid # 000; }
Yr her gyda detholyddion ID yw na ellir eu hailadrodd mewn dogfen HTML. Rhaid iddynt fod yn unigryw (gallwch ddefnyddio'r un ID ar dudalennau lluosog eich gwefan, ond dim ond unwaith ym mhob dogfen HTML unigol). Felly, pe bai gennych 3 digwyddiad bod angen yr holl ffiniau hyn arnoch, byddai angen i chi roi nodweddion ID o "event1", "event2" a "event3" iddynt ac arddull pob un ohonynt. Byddai, felly, yn llawer haws defnyddio'r priodoldeb dosbarth blaenorol o "ddigwyddiad" a'i arddullio i gyd ar unwaith.
Her arall gyda phriodoleddau adnabod yw bod ganddynt fwy o fanylder na phriodoleddau'r dosbarth. Golyga hyn, os bydd angen i chi gael CSS sy'n goresgyn arddull a sefydlwyd yn flaenorol, gall fod yn anodd gwneud hynny os ydych wedi dibynnu'n rhy drwm ar IDs. Am y rheswm hwn mae llawer o ddatblygwyr gwe wedi symud i ffwrdd rhag defnyddio IDs yn eu marcio, hyd yn oed os ydynt yn bwriadu defnyddio'r gwerth hwnnw unwaith yn unig, ac yn hytrach wedi troi at y nodweddion dosbarth llai penodol ar gyfer bron pob arddull.
Yr un ardal lle mae nodweddion adnabod yn dod i mewn yw pan fyddwch am greu tudalen sydd â chysylltiadau anheddu mewn-dudalen. Er enghraifft, os oes gennych wefan arddull parallax sy'n cynnwys yr holl gynnwys ar un dudalen gyda chysylltiadau sy'n "neidio" i wahanol rannau o'r dudalen honno. Gwneir hyn gan ddefnyddio priodoleddau adnabod a chysylltiadau testun sy'n defnyddio'r cysylltiadau angoriadau hyn.
Byddech yn syml yn ychwanegu gwerth y priodoldeb hwnnw, a gynhyrchwyd gan # symbol, at briodwedd href y ddolen, fel hyn:
Dyma'r ddolen
Wrth glicio neu gyffwrdd, bydd y ddolen hon yn neidio i'r rhan o'r dudalen sydd â'r nodwedd hon o ID. Os nad oedd unrhyw elfen ar y dudalen yn defnyddio'r gwerth ID hwn, ni fyddai'r ddolen yn gwneud unrhyw beth.
Cofiwch, os ydych chi am greu mewn-dudalen sy'n cysylltu ar safle, bydd angen defnyddio nodweddion adnabod, ond gallwch chi fynd yn ôl i ddosbarthiadau at ddibenion cyffredinol CSS. Dyma sut yr wyf yn marcio tudalennau heddiw - fe wnes i ddefnyddio detholwyr dosbarth cymaint â phosibl a dim ond troi at IDs pan fyddaf angen y priodoldeb i weithredu nid yn unig fel bachyn i CSS ond hefyd fel cyswllt mewn-dudalen.
Erthygl wreiddiol gan Jennifer Krynin. Golygwyd gan Jeremy Girard ar 8/9/17