Cael y ffeithiau gyda'r cwrs byr CSS hwn
Mae llawer o fanteision i daflenni arddull rhaeadru. Maent yn eich galluogi i ddefnyddio'r un dalen arddull ar draws eich gwefan gyfan. Mae dwy ffordd i wneud hyn:
- gan gysylltu â'r elfen LINK
- mewnforio gyda'r gorchymyn @import
-
- @import url ('http://www.yoursite.com/styles.css');
-
Manteision ac Anfanteision Taflenni Arddull Allanol
Un o'r pethau gorau am daflenni arddull rhaeadru yw y gallwch eu defnyddio i gadw'ch gwefan yn gyson. Y ffordd hawsaf o wneud hyn yw cysylltu neu fewnforio dalen arddull allanol. Os ydych chi'n defnyddio'r un daflen arddull allanol ar gyfer pob tudalen o'ch gwefan, gallwch fod yn sicr y bydd yr holl arddulliau ar yr holl dudalennau.
Mae rhai o'r manteision i ddefnyddio taflenni arddull allanol yn cynnwys y gallwch chi reoli golwg a theimlad nifer o ddogfennau ar unwaith. Mae hyn yn arbennig o ddefnyddiol os ydych chi'n gweithio gyda thîm o bobl i greu eich gwefan. Gall fod yn anodd cofio llawer o reolau arddull, ac er bod gennych ganllaw arddull argraffedig, mae'n anffodus ei bod yn gorfod troi drwy'r amser yn gyson er mwyn penderfynu a yw testun yn cael ei ysgrifennu mewn ffont 12 pwynt Arial neu negesydd 14 pwynt.
Gallwch greu dosbarthiadau o arddulliau y gellir eu defnyddio wedyn ar lawer o wahanol elfennau HTML. Os ydych chi'n aml yn defnyddio ffont Wingdings arbennig i roi pwyslais ar wahanol bethau ar eich tudalen, gallwch ddefnyddio'r dosbarth Wingdings a sefydlwyd gennych yn eich dalen arddull i'w creu yn hytrach na diffinio arddull benodol ar gyfer pob enghraifft o'r pwyslais.
Gallwch chi hawdd grwpio'ch arddulliau i fod yn fwy effeithlon. Gellir defnyddio'r holl ddulliau grwp sydd ar gael i CSS mewn taflenni arddull allanol, ac mae hyn yn rhoi mwy o reolaeth a hyblygrwydd i chi ar eich tudalennau.
Wedi dweud hynny, mae rhesymau da iawn hefyd i beidio â defnyddio taflenni arddull allanol. Ar gyfer un, gallant gynyddu'r amser lawrlwytho os ydych chi'n cysylltu â llawer ohonynt.
Bob tro y byddwch yn creu ffeil CSS newydd a'i gysylltu neu ei fewnforio yn eich dogfen, sy'n ei gwneud yn ofynnol i'r porwr gwe wneud galwad arall i'r gweinydd Gwe i gael y ffeil. Ac mae gweinyddwr yn galw amserau llwytho'r dudalen yn arafu.
Os mai dim ond nifer fach o arddulliau sydd gennych, gallant gynyddu cymhlethdod eich tudalen.
Oherwydd nad yw'r arddulliau ar gael yn iawn yn yr HTML, rhaid i unrhyw un sy'n edrych ar y dudalen gael dogfen arall (ffeil CSS) i nodi beth sy'n digwydd.
Sut i Creu Taflen Arddull Allanol
Mae taflenni arddull allanol wedi'u hysgrifennu yn yr un modd â thaflenni arddull mewnol ac mewnol. Ond popeth y mae angen i chi ei ysgrifennu yw'r dewisydd arddull a'r datganiad . Nid oes angen elfen neu briodoldeb STYLE arnoch yn y ddogfen.
Fel gyda phob CSS arall, y cystrawen ar gyfer rheol yw:
dewiswr {eiddo: gwerth; }
Ysgrifennir y rheolau hyn i ffeil testun gyda'r estyniad .css. Er enghraifft, efallai y byddwch yn enwi arddull eich arddull arddull.css.
Unwaith y bydd gennych ddogfen ddalen arddull, mae angen i chi ei gysylltu â'ch tudalennau Gwe. Fel y soniais uchod, gwneir hyn mewn dwy ffordd.
Cysylltu Dogfennau CSS
Er mwyn cysylltu dolen arddull, rydych chi'n defnyddio'r elfen LINK. Mae hyn yn meddu ar y nodweddion a href. Mae'r priodoldeb yn dweud wrth y porwr yr hyn yr ydych yn ei gysylltu (yn yr achos hwn, taflen arddull) ac mae'r priodwedd href yn dal y llwybr i'r ffeil CSS.
Mae yna hefyd briodwedd dewisol y gallwch ei ddefnyddio i ddiffinio'r math MIME o'r ddogfen gysylltiedig. Nid oes angen hyn yn HTML5, ond dylid ei ddefnyddio mewn dogfennau HTML 4.
Dyma'r cod y byddech chi'n ei ddefnyddio i gysylltu dalen arddull CSS o'r enw styles.css:
Ac mewn dogfen HTML 4, byddech chi'n ysgrifennu:
type = "text / css" >
Mewnforio Taflenni Arddull CSS
Rhoddir taflenni arddull a fewnforir o fewn yr elfen STYLE. Yna gallwch chi ddefnyddio arddulliau wedi'u hymgorffori hefyd os hoffech chi. Gallwch hefyd gynnwys arddulliau wedi'u mewnforio o fewn y taflenni arddull cysylltiedig. Y tu mewn i'r ddogfen STYLE neu CSS, ysgrifennwch:
@import url ('http://www.yoursite.com/styles.css');