logo

Vrste CSS-a

CSS (kaskadna tablica stilova) opisuje HTML elemente koji se prikazuju na ekran, papir , ili u drugi mediji . To štedi puno vremena. Upravlja izgledom više web stranica odjednom. Postavlja veličina fonta, obitelj fonta, boja, boja pozadine na stranici.

Omogućuje nam dodavanje učinci ili animacije na web stranicu. Koristimo CSS prikazati animacije Kao gumbi, efekti, učitavači ili spineri , I također animirane pozadine .

Bez korištenja CSS , web stranica neće izgledati privlačno. Tamo su 3 vrste CSS koji su ispod:

  • Inline CSS
  • Interni/ugrađeni CSS
  • Vanjski CSS
Vrste CSS-a

1. Interni CSS

Interni CSS ima oznaka u odjeljak od HTML dokument. Ovaj CSS stil učinkovit je način stiliziranja pojedinačnih stranica. Korištenje CSS stila za više web stranica oduzima puno vremena jer zahtijevamo postavljanje stil na svakoj web stranici.

Interni CSS možemo koristiti koristeći sljedeće korake:

1. Prvo, otvorite HTML stranicu i pronađite

2. Stavite sljedeći kod nakon

 

3. Dodajte pravila CSS-a u novom retku.

Primjer:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. Zatvorite oznaku stila.

 

Nakon dodavanja internog CSS-a, kompletna HTML datoteka izgleda ovako:

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

Možemo koristiti i selektore (klasa i ID) u listu stilova.

Primjer:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

Prednosti internog CSS-a

    Interni CSSne može učitati više datoteka kada dodamo kod s HTML stranicom.

Nedostaci internog CSS-a:

  • Dodavanje koda u HTML dokument će smanjiti veličina stranice i vrijeme učitavanja web stranice.

2. Vanjski CSS

U vanjskom CSS-u povezujemo web stranice s vanjskim .css datoteka. Nastaje od strane uređivač teksta . CSS je učinkovitija metoda za oblikovanje web stranice. Uređivanjem .css datoteku, možemo promijeniti cijelu stranicu odjednom.

Za korištenje vanjskog CSS-a slijedite dolje navedene korake:

1. Stvorite novi .css datoteka sa uređivač teksta , i dodajte Kaskadna lista stilova pravila također.

Na primjer:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. Dodajte referencu na vanjski .css datoteku odmah nakon oznaka u odjeljak od HTML list :

 

Prednosti vanjskog CSS-a:

  • Naše datoteke imaju čišću strukturu i manju su veličinu.
  • Koristimo iste .css datoteka za više web stranica u vanjskom CSS-u.

Nedostaci vanjskog CSS-a:

  • Stranice se ne mogu ispravno isporučiti prije učitavanja vanjskog CSS-a.
  • U vanjskom CSS-u, učitavanje velikog broja CSS datoteka može povećati vrijeme preuzimanja web stranice.

3. Inline CSS

Inline CSS se koristi za stiliziranje određenog HTML element. Dodati stil atribut svakoj HTML oznaci bez korištenja selektora. Upravljanje web-stranicom može biti teško ako koristimo samo ugrađeni CSS . Međutim, Inline CSS u HTML-u korisna je u nekim situacijama. Nemamo pristup CSS datoteke ili primijeniti stilove na element.

U sljedećem primjeru upotrijebili smo ugrađeni CSS

java je instanceof
i

Ovdje će biti od koristi.

Prednosti ugrađenog CSS-a:

  • Možemo kreirati CSS pravila na HTML stranici.
  • Ne možemo stvoriti i učitati zaseban dokument u ugrađenom CSS-u.

Nedostaci ugrađenog CSS-a:

  • Inline CSS, dodavanje CSS pravila za HTML elemente je dugotrajan i neredi do HTML strukture.
  • Stilizira više elemenata u isto vrijeme što može utjecati na veličinu stranice i vrijeme preuzimanja stranice.