Kas yra pakopinio stiliaus lapai ir kam naudojamas CSS?

Kas yra pakopinio stiliaus lapai ir kam naudojamas CSS?

CSS priklauso pagrindinių žiniatinklio technologijų trejetui kartu su HTML ir „JavaScript“. Kruopščiai planuojant, CSS padeda atskirti rūpesčius. Nepriklausomi ištekliai kontroliuoja turinio struktūrą, pateikimą ir elgesį.





Stiliaus lentelės vaidina svarbų vaidmenį pasiekiamumo, mastelio keitimo ir net žiniatinklio veikimo srityse. Kaip turinio autorius ar žiniatinklio dizaineris, jie leidžia jums valdyti, kaip įrenginiai pateikia turinį. Nuo išdėstymo iki šrifto dydžio ir spalvos CSS paverčia turinį gražiai atrodančiais puslapiais.



Kaip atrodo CSS?

CSS yra didelė kalba - stiliui yra daug įvairių dalykų! Tačiau jos sintaksė yra paprasta, reikia išmokti tik keletą taisyklių.





HTML elementai turi įvairių savybių, kurias CSS gali stilizuoti. The spalva ypatybė nustato pirmojo plano (pvz., teksto) spalvą. Šrifto dydis priklauso nuo šrifto dydis nuosavybė.

Kiekvienai ypatybei galima nustatyti palaikomą vertę. Vertės priskyrimas nuosavybei yra „deklaracija“. Paprastai jie atrodo taip:



property: value

Pavyzdžiui:

kaip ištrinti visus vaizdus „Mac“
color: red

Skirtingų savybių vertės gali atrodyti labai skirtingai, netgi tos pačios nuosavybės vertės. Pavyzdžiui, čia yra dar du būdai, kaip parašyti ankstesnę deklaraciją:



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

Kaip susideda HTML ir stiliaus lapai

HTML ir CSS galite derinti keliais skirtingais būdais, kurių kiekvienas turi savo privalumų.

Įterpti rašymo stiliai

Paprasčiausias būdas yra pridėti stiliaus deklaracijas tiesiai prie HTML failo elemento. Tai galite padaryti naudodami stilius toks atributas:




Most of this text is red …


… but this isn’t!


Nors tokie įterpti stiliaus elementai gali būti patogūs, jis turi keletą trūkumų. Pirmiausia tai apsunkina HTML, todėl iš pirmo žvilgsnio tampa sunkiau skaityti. Taip pat nepatogu išlaikyti: įsivaizduokite ilgą dokumentą, kuriame norime nustatyti kiekvienos pastraipos spalvą. Tai CSS, bet ne „Stiliaus lapai“.

Įterpti stilių į galvą

Naudodami antrąjį mechanizmą galite pamatyti, kaip atrodo stiliaus lapas, įterpimas . Naudodamiesi šiuo metodu, mes surenkame visas stiliaus deklaracijas a stilius elementas galva mūsų dokumento. Tai atrodys maždaug taip:





/* style instructions go here */



...

Tačiau mūsų stiliaus instrukcijose reikia šiek tiek daugiau detalių nei anksčiau. Kadangi perkėlėme juos į galvą, kiekviena taisyklė nebėra susieta su elementu. Galėjome deklaruoti spalva: raudona bet kokia turetu buti ta spalva?

Čia ateina CSS parinkikliai. Jie leidžia mums taikyti pagal konkrečias puslapio dalis ir apibrėžti jų stilių vienoje vietoje, naudojant šią sintaksę:

kaip atsikratyti vandens ženklų „Photoshop“
selector {
declaration1;
declaration2;
/* etc. */
}

Pavyzdžiui, norėdami stilizuoti pastraipų tekstą mėlyna spalva, galime nurodyti:

p {
color: blue;
}

Šiame pavyzdyje selektorius yra paprastas p , kuris atitinka visus mūsų dokumento pastraipos elementus. Visas tekstas bus mėlynas, kol jis bus

Išorinio stiliaus lapo susiejimas

Galutinis uždengimo būdas yra susiejimas. Tai, be abejo, pats naudingiausias metodas, kurį turėtumėte pasirinkti dažniausiai. Užuot įterpę CSS taisykles į stilius elementą tiesiai savo dokumente, galite perkelti juos į atskirą failą.


Įklijuokite šį kodą į HTML failo žymas, kad susietumėte išorinį stiliaus lapą.

CSS galia

Naudodami susietą metodą, mes panaudojame pagrindinę CSS galią: rūpesčių atskyrimą. Visa semantinė informacija - ką reiškia turinys - yra HTML dokumente. Stilius - kaip jis atrodo - yra atskirame faile, stiliaus lape.

Štai tik keletas šio atskyrimo privalumų:

  • Galite pakeisti stiliaus lapą tiesiog pakeisdami failo nuorodą. Tai gali įvykti net dinamiškai. Vienu veiksmu galite pakeisti visą puslapio išvaizdą.
  • Daugelis puslapių gali turėti tuos pačius stiliaus lapus, kaip reikalaujama. Pakeitę vieną failą, galite atnaujinti visos svetainės išvaizdą.
  • Puslapio padalijimas į „turinį“ ir „stilių“ turi techninės naudos. Tarpiniai serveriai ir naršyklės gali atskirai išsaugoti atskirus failus. Tai reiškia, kad svetainė gali vieną kartą atsiųsti savo stiliaus informaciją, o ne įtraukti ją į kiekvieną puslapį.
  • Bendradarbiaudamos skirtingos komandos gali dirbti pagal savo stipriąsias puses, kurdamos ir redaguodamos atskirus failus, nedarydamos įtakos viena kitai.

Kaskados paaiškinimas

Jūs daug sužinojote apie stilių ir stiliaus lapus, bet kaip su CSS pakopine dalimi?

Kaskadas lemia, kuriuos stilius naudoti, kai yra keli stiliaus lapai. Jūs matėte, kaip autorius gali nurodyti savo turinio stilius. Tačiau dar viena CSS ypatybė yra ta, kad ji taip pat suteikia skaitytojams ir naršyklių gamintojams tam tikrą nuomonę.

Galbūt jau susimąstėte apie numatytuosius stilius. Pavyzdžiui, kaip veikia an H1 elementas atrodo didelis ir paryškintas, net ir neturint autoriaus stiliaus lapų? Taip yra dėl specialių taisyklių rinkinio, sudarančio vartotojo agento stiliaus lapą. Šias taisykles jūsų interneto naršyklė iš pradžių taiko kiekvienam jūsų aplankytam puslapiui.

Kaskadoje nurodoma, kad autoriaus stiliaus lapas taikomas po vartotojo agento stilių. Jei mūsų naršyklė sako, kad antraštės yra paryškintos, bet puslapio autorius skelbia, kad šio puslapio antraštės yra šviesios, tada jos bus šviesios.

Yra dar vienas stiliaus lapo šaltinis, kuris perduoda skaitytojui tam tikrą valdymą. Bet kuris interneto vartotojas teoriškai gali išlaikyti vartotojo stiliaus lapą su pasirinktinėmis taisyklėmis. Tai yra viduryje: vartotojo taisyklės pakeis numatytuosius naršyklės nustatymus, tačiau patys bus nepaisyti autoriaus stilių. Deja, vartotojų stiliaus lapų palaikymas niekada nebuvo plačiai paplitęs.

Taikymas skirtingoms žiniasklaidos priemonėms

Stiliaus lapus galite naudoti įvairiuose kontekstuose, už ekrano ribų. The pusė atributas nuoroda elementas apibrėžia, kokiems laikmenos tipams taikomas stiliaus lapas. Pavyzdžiui, galite apibrėžti a stiliaus lapas spausdinimui naudojant žymėjimą, kaip nurodyta toliau:

Galite surinkti įprastus stilius viename bendrame stiliaus lape, o konkrečios medijos stilius-atskiruose failuose. Yra net medijos tipų, skirtų fonetiniam ar Brailio rašto jūsų turinio pristatymui. CSS yra labai svarbi priemonė siekiant pagerinti prieinamumą.

Susijęs: Kaip naršyti internete, jei esate aklas ar silpnaregis

Kaip atsisiųsti podcast'us į kompiuterį

Tokios svetainės kaip „Wikipedia“ naudoja CSS, kad valdytų spausdinimo stilių, slėptų nepageidaujamus elementus ir supaprastintų išdėstymą.

CSS leidžia HTML atrodyti gerai

Kaskadiniai stiliaus lapai apima daug: kaskadą, paveldėjimą, parinkiklius, šaltinius, žiniasklaidą ir tt Tačiau jų galia įgalina šiuolaikinį internetą. Tai laikmena, kuri suteikia įmontuotą daugkartinio naudojimo, lankstumo ir prieinamumo funkcijas.

Norėdami pamatyti visą CSS galią ir kiek ji gali pasiūlyti, peržiūrėkite mūsų apgaulės lapą, apimantį visas esmines CSS3 savybes.

Dalintis Dalintis „Tweet“ Paštu „Essential CSS3 Properties“ apgaulės lapas

Įsisavinkite esminę CSS sintaksę naudodami mūsų CSS3 savybių apgaulės lapą.

Skaityti toliau Susijusios temos
  • Programavimas
  • Interneto svetainių kūrimas
  • CSS
Apie autorių Bobis Džekas(Paskelbti 58 straipsniai)

Bobby yra technologijų entuziastas, kuris beveik du dešimtmečius dirbo programinės įrangos kūrėju. Jis aistringai žaidžia, dirba „Switch Player Magazine“ apžvalgų redaktoriumi ir yra pasinėręs į visus internetinės publikacijos ir žiniatinklio kūrimo aspektus.

Daugiau iš Bobby Jack

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia