Kako izgraditi vanjski stilski list

Korištenje web stranice CSS Wide

Web stranice su kombinacija stila i strukture, a na današnjem webu najbolja je praksa da ta dva aspekta stranice budu odvojena jedna od druge.

HTML je uvijek bio ono što pruža stranicu sa svojom strukturom. U ranim danima weba, HTML je sadržavao i informacije o stilu. Elementi poput oznake bili su prekriveni HTML kôdom, dodavajući informacije o izgledu i osjećaju uz strukturne informacije. Trendovi web standarda potaknuli su nas da promijenimo ovu praksu i umjesto toga gurati sve informacije o stilu u CSS ili Cascading Style Sheets. Uzimajući ovaj korak dalje, trenutne preporuke su da koristite ono što je poznato kao "vanjski stilski list" za vaše potrebe web-lokacije za oblikovanje.

Prednosti i mane vanjske sheme stila

Jedna od najboljih stvari o Cascading Style Sheetsu jest da ih možete koristiti kako biste cijelu web stranicu dosljedni. Najlakši način za to je povezivanje ili uvoz vanjskog stila . Ako upotrebljavate isti vanjski stilski zapis za svaku stranicu svoje web-lokacije, možete biti sigurni da će sve stranice imati isti stil. Također možete olakšati promjene u budućnosti. Budući da svaka stranica upotrebljava isti vanjski stilski list, svaka promjena na tom listu utjecat će na svaku web stranicu. To je mnogo bolje nego što pojedinačno mijenjati svaku stranicu!

Prednosti vanjskih stilskih listova

  • Možete kontrolirati izgled i dojam nekoliko dokumenata odjednom.
    • To je naročito korisno ako radite s timom ljudi za izradu svoje web stranice. Mnogo pravila stila može biti teško zapamtiti, a iako možete imati vodič za ispis stila, neučinkovito je i dosadno kontinuirano promišljati kako bi se utvrdilo treba li se tekst napisati u 12 bodova Arial font ili 14 korespondira. Imajući sve na jednom mjestu, a budući da je i mjesto gdje ćete napraviti promjene, možete učiniti održavanje puno lakše.
  • Možete stvoriti klase stilova koji se zatim mogu koristiti na različitim HTML elementima .
    • Ako često upotrebljavate određeni stil fonta kako biste naglasili različite stvari na svojoj stranici, možete upotrijebiti atribut klase koji ste postavili na svojem listu stila da biste dobili ovaj izgled i dojam, a ne definirati određeni stil za svaku instancu naglasak.
  • Jednostavno možete grupirati svoje stilove da budu učinkovitije.
    • Sve metode grupiranja koje su dostupne CSS-u mogu se koristiti u vanjskim stilskim listovima, što vam omogućuje veću kontrolu i fleksibilnost na vašim stranicama.

Nedostaci vanjskih stilskih listova

  • Vanjski stilski listovi mogu povećati vrijeme preuzimanja, posebno ako su izuzetno veliki. Budući da je CSS datoteka zaseban dokument koji se mora učitati, to će utjecati na izvedbu za to preuzimanje.
  • Vanjski stilski listovi dobivaju se vrlo brzo jer je teško reći kada stil više nije u upotrebi jer se ne briše kada se stranica ukloni. Pravilno upravljanje vašim CSS datotekama je važno, pogotovo ako više ljudi radi na istoj datoteci.
  • Ako imate samo web stranicu jedne stranice, možda nemate potrebnu vanjsku datoteku za CSS, budući da imate samo jednu stranicu za stil. Mnoge prednosti vanjskog CSS-a su izgubljene kada imate samo jednu stranicu.

Kako stvoriti vanjski stilski list

Vanjski stilski listovi izrađuju se sličnom sintaksom prema listovima stila na razini dokumenta. Međutim, sve što trebate uključiti su selektor i deklaracija. Kao u dokumentu na razini dokumenta, sintaksa za pravilo jest:

selektor {property: value;}

Spremite ova pravila u tekstualnu datoteku s nastavkom .css. To nije potrebno, ali to je dobra navika za ulazak, tako da odmah možete prepoznati svoje stilske listove u imeniku s imenima.

Nakon što imate dokument o stilu, trebate ga povezati s web stranicama . To se može učiniti na dva načina:

  1. povezivanje
    1. Da biste povezali stilski list, koristite HTML oznaku. Ovo ima atribute rel , type i href . Atribut rela govori ono što povezujete (u ovom slučaju stilski obrazac), tip definira MIME tip za preglednik, a href je put do datoteke .css.
  2. Uvoz
    1. Upotrebljivali biste uvozni stilski list u listu stilova na razini dokumenta tako da možete uvesti atribute vanjskog lista stilova dok ne izgubite one koji su specifični za dokument. Nazovete ga na sličan način kao što zovete povezani stilski list, samo ga morate nazvati unutar deklaracije stila na razini dokumenta. Možete uvesti što više vanjskih stilskih pločica kao što je potrebno za održavanje svoje web stranice.

Izvorni članak Jennifer Krynin. Uredio Jeremy Girard na 8/8/17