Što su kaskadne tablice stilova i za što se koristi CSS?

Što su kaskadne tablice stilova i za što se koristi CSS?

CSS pripada trojci osnovnih web tehnologija zajedno s HTML -om i JavaScript -om. Pažljivim planiranjem CSS doprinosi razdvajanju briga. Nezavisni resursi kontroliraju strukturu sadržaja, njegovu prezentaciju i ponašanje.





Tablice stilova igraju važnu ulogu u pristupačnosti, skalabilnosti, pa čak i izvedbi weba. Kao autor sadržaja ili web dizajner, oni vam daju kontrolu nad načinom na koji uređaji iscrtavaju sadržaj. Od izgleda do veličine fonta i boje, CSS pretvara sadržaj u stranice lijepog izgleda.



Kako izgleda CSS?

CSS je veliki jezik - postoji mnogo različitih stvari za stiliziranje! No, njezina je sintaksa jednostavna, sa samo nekoliko pravila koja treba naučiti.





HTML elementi imaju različita svojstva koja CSS može stilizirati. The boja svojstvo postavlja boju prednjeg plana (npr. tekst). Veličina fonta ovisi o veličina fonta imovine.

Svako svojstvo može se postaviti na podržanu vrijednost. Dodjela vrijednosti svojstvu je 'deklaracija'. Općenito, izgledaju ovako:



property: value

Na primjer:

najbolji zvučni zapisi iz video igara za učenje
color: red

Vrijednosti za različita svojstva mogu izgledati vrlo različito, pa čak i vrijednosti za isto svojstvo. Na primjer, evo još dva načina pisanja prethodne deklaracije:



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

Kako se HTML i stilske tablice spajaju

HTML i CSS možete kombinirati na nekoliko različitih načina, svaki sa svojim prednostima.

Ugrađeni stilovi pisanja

Najjednostavniji način je da deklaraciju stila priložite izravno elementu u HTML datoteci. To možete učiniti pomoću stil atribut ovako:




Most of this text is red …


… but this isn’t!


Iako ugrađeni elementi za oblikovanje mogu biti prikladni, on ima nekoliko nedostataka. Za početak, komplicira HTML, otežavajući čitanje na prvi pogled. Također je nezgodno za održavanje: zamislite dugačak dokument u kojem želimo postaviti boju svakog odlomka. Ovo je CSS, ali nije 'Stilska lista'.

Ugrađivanje stilova u glavu

Možete početi vidjeti kako izgleda tablica stilova s ​​drugim mehanizmom, ugrađivanje . Koristeći ovaj pristup, okupljamo sve deklaracije o stilu unutar a stil element u glava našeg dokumenta. Izgledat će otprilike ovako:





/* style instructions go here */



...

Naše upute o stilu ipak trebaju malo više detalja nego prije. Budući da smo ih premjestili u glavu, svako pravilo više nije povezano s elementom. Možda smo se izjasnili boja: crvena , ali što bi trebala imati tu boju?

Ovdje dolaze CSS birači. Oni nam omogućuju ciljanje određenih dijelova stranice i definiranje njihovog stila na jednom mjestu, koristeći ovu sintaksu:

kako instalirati linux na mac
selector {
declaration1;
declaration2;
/* etc. */
}

Na primjer, za stiliziranje teksta odlomaka u plavo možemo navesti sljedeće:

p {
color: blue;
}

U ovom primjeru birač je jednostavno str , koji odgovara svim elementima odlomka u našem dokumentu. Bojat će sav tekst u plavo, sve dok je unutra

Povezivanje vanjskog stila

Posljednja metoda za pokrivanje je povezivanje. Ovo je daleko najkorisniji pristup i za njega biste se trebali odlučiti većinu vremena. Umjesto da CSS pravila ugradite u stil element izravno u dokumentu, možete ih premjestiti u zasebnu datoteku.


Zalijepite ovaj kod u oznake vaše HTML datoteke za povezivanje vašeg vanjskog stila.

Snaga CSS -a

Povezanom metodom iskorištavamo srž moći CSS -a: razdvajanje briga. Svi semantički podaci - što sadržaj znači - sadržani su u HTML dokumentu. Stil - kako izgleda - nalazi se u zasebnoj datoteci, stilskoj tablici.

Evo samo nekoliko prednosti ovog odvajanja:

  • Tablicu stilova možete isključiti samo promjenom reference datoteke. To se čak može dogoditi i dinamički. U jednom koraku možete promijeniti cijeli izgled stranice.
  • Mnoge stranice mogu dijeliti iste stilske tablice prema potrebi. Promjenom jedne datoteke možete ažurirati izgled i dojam cijele web stranice.
  • Razdvajanje stranice na 'sadržaj' i 'stil' ima tehničke prednosti. Proxy i preglednici mogu zasebno predmemorirati pojedinačne datoteke. To znači da web mjesto može poslati svoje podatke o stilu jednom, umjesto da ih uključi na svaku stranicu.
  • Prilikom suradnje različiti timovi mogu raditi na svojim snagama, stvarati i uređivati ​​zasebne datoteke bez međusobnog utjecaja.

Objašnjavajući Kaskadu

Naučili ste mnogo o stilovima i stilovima, ali što je s kaskadnim dijelom CSS -a?

Kaskada je ono što odlučuje koje će se stilove koristiti kada je prisutno više stilskih listova. Vidjeli ste kako autor može odrediti stilove za svoj sadržaj. No, druga značajka CSS -a je ta što čitateljima i proizvođačima preglednika daje neke mišljenje o tome.

Možda ste se već pitali o zadanim stilovima. Na primjer, kako radi an H1 element izgleda velik i podebljan, čak i bez ikakvih autorskih stilova? To je zahvaljujući skupu posebnih pravila koja čine listu stilova korisničkog agenta. Ova pravila vaš web preglednik u početku primjenjuje na svaku stranicu koju posjetite.

Kaskada određuje da se autorska tablica stilova primjenjuje nakon stilova korisničkog agenta. Ako naš preglednik kaže da su naslovi podebljani, ali autor stranice izjavljuje da su naslovi na ovoj stranici laki, oni će na kraju postati svijetli.

Postoji još jedan izvor stilskih listova koji čitatelju predaje određenu kontrolu. Svaki korisnik weba može, u teoriji, održavati tablicu korisničkog stila s prilagođenim pravilima. Oni se nalaze u sredini: korisnička pravila nadjačat će zadane postavke preglednika, ali će ih i sami nadjačati stilovi autora. Nažalost, podrška za korisničke stilove nikada nije bila raširena.

Ciljanje različitih medija

Tablice stilova možete koristiti u različitim kontekstima, izvan zaslona. The pola atribut veza element definira na koje vrste medija se stilska tablica odnosi. Na primjer, možete definirati a stilski list za ispis pomoću oznaka poput sljedećeg:

Zajedničke stilove možete okupiti u jednu globalnu tablicu stilova, a stilove specifične za medije u zasebne datoteke. Postoje čak i vrste medija za slušanje zvučnih ili brajevih azbuka. CSS je vitalni alat za poboljšanje pristupačnosti.

Povezano: Kako pregledavati web ako ste slijepi ili slabovidni

iphone 8 plus tipka za dom ne radi

Mjesta kao što je Wikipedia koriste CSS za kontrolu stila ispisa, skrivanje neželjenih elemenata i pojednostavljivanje izgleda.

CSS čini da HTML izgleda dobro

Kaskadne tablice stilova pokrivaju mnogo toga: kaskadu, nasljeđivanje, birače, izvore, medije itd. Ali njihova moć omogućuje suvremeni web. Ovo je medij koji pruža ugrađene značajke ponovne upotrebe, fleksibilnosti i pristupačnosti.

Da biste vidjeli punu snagu CSS -a i koliko on nudi, provjerite našu tablicu koja pokriva sva bitna svojstva CSS3.

Udio Udio Cvrkut E -pošta Važna lista svojstava osnovnih svojstava CSS3

Ovladajte esencijalnom CSS sintaksom pomoću našeg lista s podacima o svojstvima CSS3.

Pročitajte Dalje Povezane teme
  • Programiranje
  • Web razvoj
  • CSS
O autoru Bobby Jack(Objavljeno 58 članaka)

Bobby je entuzijast u tehnologiji koji je skoro dva desetljeća radio kao programer softvera. Oduševljen je igranjem igara, radi kao urednik recenzija u Switch Player Magazinu, a uronjen je u sve aspekte online izdavaštva i web razvoja.

Više od Bobbyja Jacka

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu