Mis on kaskaadlaadilehed ja milleks kasutatakse CSS -i?

Mis on kaskaadlaadilehed ja milleks kasutatakse CSS -i?

CSS kuulub HTML -i ja JavaScripti kõrval põhiliste veebitehnoloogiate kolmikusse. Hoolika planeerimisega aitab CSS kaasa murede lahutamisele. Sõltumatud ressursid kontrollivad sisu struktuuri, esitlust ja käitumist.





Stiililehtedel on juurdepääsetavuses, mastaapsuses ja isegi veebi toimivuses oluline roll. Sisu autori või veebidisainerina annavad nad teile kontrolli selle üle, kuidas seadmed sisu esitavad. Alates paigutusest kuni fondi suuruse ja värvini muudab CSS sisu ilusa välimusega lehtedeks.



Kuidas CSS välja näeb?

CSS on suur keel - stiiliks on palju erinevaid asju! Kuid selle süntaks on lihtne, õppides on vaid mõned reeglid.



HTML -elementidel on erinevad omadused, mida CSS saab stiilida. The värvi atribuut määrab esiplaani (nt teksti) värvi. Fondi suurus sõltub fondi suurus vara.

Igale atribuudile saab seada toetatud väärtuse. Kinnisvarale väärtuse määramine on deklaratsioon. Üldiselt näevad need välja sellised:



property: value

Näiteks:

xbox one kontroller ei lülitu üldse sisse
color: red

Erinevate omaduste väärtused võivad tunduda väga erinevad, isegi sama vara väärtused. Näiteks siin on veel kaks võimalust eelmise deklaratsiooni kirjutamiseks:



color: #ff0000
color: rgb(255, 0, 0)

Kuidas HTML ja stiililehed kokku saavad

HTML -i ja CSS -i saate kombineerida mitmel erineval viisil, millest igaühel on oma eelised.

Sisestusstiilid

Lihtsaim meetod on stiilideklaratsioonide lisamine otse HTML -faili elemendile. Seda saate teha, kasutades stiil atribuut nii:




Most of this text is red …


… but this isn’t!


Ehkki sellised sisseehitatud stiilielemendid võivad olla mugavad, on sellel mitmeid puudusi. Alustuseks muudab see HTML -i keerulisemaks, muutes selle lühidalt lugemise raskemaks. Seda on ka ebamugav säilitada: kujutage ette pikka dokumenti, milles tahame määrata iga lõigu värvi. See on CSS, kuid mitte stiililehed.

Stiilide kinnistamine pähe

Teise mehhanismi abil saate näha, kuidas stiilileht välja näeb, põimimine . Seda lähenemisviisi kasutades koondame kõik stiilideklaratsioonid a -sse stiil element pea meie dokumendist. See näeb välja umbes selline:





/* style instructions go here */



...

Meie stiilijuhised vajavad siiski natuke rohkem üksikasju kui varem. Kuna oleme need pea peale viinud, ei ole iga reegel enam elemendiga seotud. Oleksime võinud deklareerida värv: punane aga mis värvi see peaks olema?

Siit tulevad CSS -i valijad. Need võimaldavad meil sihtida lehe konkreetseid osi ja määratleda nende stiili ühes kohas, kasutades järgmist süntaksit:

kuidas taastada Windows 10 tehaseseaded
selector {
declaration1;
declaration2;
/* etc. */
}

Näiteks lõigete teksti siniseks kujundamiseks saame määrata järgmise:

p {
color: blue;
}

Selles näites on valija lihtsalt lk , mis sobib meie dokumendi kõigi lõigu elementidega. See värvib kogu teksti siniseks, kui see on sees

Välise stiililehe sidumine

Viimane meetod katmiseks on linkimine. See on kaugelt kõige kasulikum lähenemisviis, mille peaksite enamasti valima. Selle asemel, et CSS -i reegleid manustada stiil elemendi otse dokumendis, saate need teisaldada eraldi faili.


Kleepige see kood kausta välise stiililehe linkimiseks oma HTML -faili silte.

CSS -i jõud

Lingitud meetodi abil kasutame CSS -i põhijõudu: murede lahutamine. Kogu semantiline teave - mida sisu tähendab - sisaldub HTML -dokumendis. Stiil - kuidas see välja näeb - on eraldi failis, stiililehel.

Siin on vaid mõned selle eraldamise eelised:

  • Saate stiililehe välja lülitada, muutes lihtsalt failiviidet. See võib juhtuda isegi dünaamiliselt. Ühe sammuga saate muuta kogu lehe välimust.
  • Paljudel lehtedel saab vajadusel jagada samu stiililehti. Kui muudate ühte faili, saate värskendada kogu veebisaidi välimust.
  • Lehe jagamisel sisuks ja stiiliks on tehnilisi eeliseid. Puhverserverid ja brauserid saavad üksikuid faile eraldi vahemällu salvestada. See tähendab, et sait saab saata oma stiiliteabe üks kord, selle asemel, et lisada seda igale lehele.
  • Koostööd tehes saavad erinevad meeskonnad oma tugevate külgede kallal töötada, luues ja redigeerides eraldi faile üksteist mõjutamata.

Kaskaadi selgitamine

Olete stiilide ja stiililehtede kohta palju õppinud, aga kuidas on CSS -i kaskaadosaga?

Kaskaad otsustab, milliseid stiile kasutada, kui on olemas mitu stiililehte. Olete näinud, kuidas autor saab oma sisule stiile määrata. Kuid CSS -i teine ​​omadus on see, et see annab lugejatele ja brauseritootjatele mõned ka selles küsimuses sõna.

Võib -olla olete juba mõelnud vaikestiilide üle. Näiteks kuidas an H1 element tundub suur ja julge isegi ilma autori stiililehtedeta? Selle põhjuseks on erireeglid, mis moodustavad kasutajaagendi stiililehe. Veebibrauser rakendab neid reegleid esialgu igale külastatud lehele.

Kaskaad määrab, et autori stiilileht rakendub pärast kasutajaagendi stiile. Kui meie brauser ütleb, et pealkirjad on paksud, kuid lehe autor kuulutab, et sellel lehel olevad pealkirjad on heledad, siis on need lõpuks heledad.

On veel üks stiililehe allikas, mis annab lugejale teatava kontrolli. Iga veebikasutaja saab teoreetiliselt säilitada kohandatud reeglitega kasutaja stiililehe. Need asuvad keskel: kasutajareeglid tühistavad brauseri vaikeseaded, kuid autori stiilid alistavad need ise. Kahjuks pole kasutaja stiililehtede toetamine kunagi laialt levinud.

Erinevate meediumite sihtimine

Stiililehti saate kasutada erinevates kontekstides, väljaspool ekraani. The pool atribuut link element määratleb, millistele kandjatüüpidele stiilileht kehtib. Näiteks saate määratleda a stiilileht printimiseks kasutades märgistust järgmiselt:

Ühised stiilid saate koondada ühte globaalsesse stiililehte ja meediaspetsiifilised stiilid eraldi failidesse. On isegi meediatüüpe, mis vastavad teie sisu kuuldavale või punktkirjale. CSS on oluline vahend ligipääsetavuse parandamisel.

Seotud: Kuidas veebis sirvida, kui olete pime või nägemispuudega

iphone 8 pluss kodu nupp ei tööta

Sellised saidid nagu Wikipedia kasutavad oma printimisstiili juhtimiseks, soovimatute elementide peitmiseks ja paigutuse lihtsustamiseks CSS -i.

CSS muudab HTML -i hea välja

Kaskaadistandardid hõlmavad palju: kaskaadi, pärandit, valijaid, allikaid, meediat jne. Kuid nende jõud võimaldab kaasaegset veebi. See on meedium, mis pakub sisseehitatud korduvkasutatavust, paindlikkust ja juurdepääsetavuse funktsioone.

CSS -i täieliku võimsuse ja selle pakutavate võimaluste nägemiseks vaadake meie petulehte, mis hõlmab kõiki olulisi CSS3 atribuute.

Jaga Jaga Piiksuma E -post Oluliste CSS3 atribuutide petuleht

Õppige olulist CSS -i süntaksi meie CSS3 atribuutide petulehega.

Loe edasi Seotud teemad
  • Programmeerimine
  • Veebiarendus
  • CSS
Autori kohta Bobby Jack(58 artiklit avaldatud)

Bobby on tehnoloogiahuviline, kes töötas enam kui kaks aastakümmet tarkvaraarendajana. Ta on kirglik mängude vastu, töötab ajakirja Switch Player ülevaadete toimetajana ning on süvenenud kõikidesse veebipõhiste avaldamise ja veebiarenduse aspektidesse.

Veel Bobby Jackilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin