logo

Tipuri de CSS

CSS (Foaie de stil în cascadă) descrie elementele HTML care sunt afișate pe ecran, hârtie , sau în alte media . Economisește mult timp. Acesta controlează aspectul mai multor pagini web simultan. Acesta stabilește dimensiunea fontului, familia de fonturi, culoarea, culoarea fundalului pe pagina.

Ne permite să adăugăm efecte sau animatii către site-ul web. Folosim CSS a afișa animatii ca butoane, efecte, încărcătoare sau filatori , Si deasemenea fundaluri animate .

Fara a folosi CSS , site-ul web nu va arăta atractiv. Sunt 3 tipuri de CSS care sunt mai jos:

  • CSS inline
  • CSS intern/ încorporat
  • CSS extern
Tipuri de CSS

1. CSS intern

CSS-ul intern are eticheta în secțiunea HTML document. Acest stil CSS este o modalitate eficientă de a stila pagini individuale. Utilizarea stilului CSS pentru mai multe pagini web necesită mult timp, deoarece necesită plasarea stil pe fiecare pagină web.

Putem folosi CSS-ul intern utilizând următorii pași:

1. În primul rând, deschideți HTML pagina și localizați

2. Pune următorul cod după

 

3. Adăugați reguli de CSS în noua linie.

Exemplu:

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

4. Închideți eticheta de stil.

 

După adăugarea CSS-ului intern, fișierul HTML complet arată astfel:

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

Putem folosi și selectoarele (clasa si act de identitate) în foaia de stil.

Exemplu:

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

Avantajele CSS interne

    CSS internnu pot încărca mai multe fișiere când adăugăm codul cu pagina HTML.

Dezavantajele CSS interne:

  • Adăugarea codului în HTML documentul va reduce mărimea paginii și timp de încărcare a paginii web.

2. CSS extern

În CSS extern, legăm paginile web la cele externe .css fişier. Este creat de editor de text . CSS este o metodă mai eficientă pentru stilarea unui site web. Prin editarea .css fișier, putem schimba întregul site deodată.

Pentru a utiliza CSS extern, urmați pașii, dați mai jos:

1. Creați un nou .css dosar cu editor de text , si adauga Foaie de stil în cascadă regulile de asemenea.

De exemplu:

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

2. Adăugați o referință la extern .css dosar imediat după eticheta în sectiune de Foaie HTML :

 

Avantajele CSS externe:

  • Fișierele noastre au o structură mai curată și de dimensiuni mai mici.
  • Folosim la fel .css fișier pentru mai multe pagini web în CSS extern.

Contra CSS extern:

  • Paginile nu pot fi livrate corect înainte ca CSS-ul extern să fie încărcat.
  • În CSS extern, încărcarea multor fișiere CSS poate crește timpul de descărcare a unui site web.

3. CSS inline

CSS inline este folosit pentru a stila un anumit HTML element. Adauga o stil atribute fiecărei etichete HTML fără a utiliza selectoare. Administrarea unui site web poate fi dificilă dacă folosim numai CSS inline . Cu toate acestea, Inline CSS în HTML este util în unele situații. Nu avem acces la fișiere CSS sau pentru a aplica stiluri unui element.

În exemplul următor, am folosit CSS-ul inline în

forme normale
și

Va fi de folos aici.

Avantajele CSS inline:

  • Putem crea reguli CSS pe pagina HTML.
  • Nu putem crea și încărca un document separat în CSS inline.

Dezavantajele CSS inline:

  • CSS inline, adăugând CSS reguli la elementele HTML este consumă timp și mizerii susține structura HTML.
  • Stilează mai multe elemente în același timp, ceea ce poate afecta dimensiunea paginii și timpul de descărcare a paginii.