logo

Tipi di CSS

CSS (foglio di stile a cascata) descrive gli elementi HTML su cui vengono visualizzati schermo, carta , o dentro Altri Media . Risparmia molto tempo. Controlla il layout di più pagine Web contemporaneamente. Imposta il dimensione carattere, famiglia carattere, colore, colore di sfondo sulla pagina.

Ci permette di aggiungere effetti O animazioni al sito web. Noi usiamo CSS da visualizzare animazioni Piace pulsanti, effetti, caricatori O filatori , e anche sfondi animati .

Senza usare CSS , il sito web non apparirà attraente. Ci sono 3 tipi di CSS che sono di seguito:

  • CSS in linea
  • CSS interno/incorporato
  • CSS esterno
Tipi di CSS

1. CSS interno

Il CSS interno ha tag nel sezione del HTML documento. Questo stile CSS è un modo efficace per definire lo stile di singole pagine. L'utilizzo dello stile CSS per più pagine Web richiede molto tempo perché è necessario posizionare il file stile su ogni pagina web.

Possiamo utilizzare il CSS interno seguendo i seguenti passaggi:

1. Innanzitutto, apri il file HTML pagina e individuare il file

2. Inserisci il seguente codice dopo

 

3. Aggiungi il regole dei CSS nella nuova riga.

Esempio:

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

4. Chiudi il tag stile.

 

Dopo aver aggiunto il CSS interno, il file HTML completo è simile al seguente:

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

Possiamo anche usare i selettori (classe e ID) nel foglio di stile.

Esempio:

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

Pro dei CSS interni

    CSS internonon è possibile caricare più file quando aggiungiamo il codice con la pagina HTML.

Contro del CSS interno:

  • Aggiunta del codice nel file HTML documento ridurrà il dimensioni della pagina E tempo di caricamento della pagina web.

2. CSS esterno

Nei CSS esterni colleghiamo le pagine web a quelle esterne .css file. È stato creato da editor di testo . Il CSS è il metodo più efficiente per definire lo stile di un sito Web. Modificando il .css file, possiamo modificare l'intero sito in una volta.

Per utilizzare il CSS esterno, seguire i passaggi indicati di seguito:

1. Creane uno nuovo .css file con editor di testo , e aggiungi Foglio di stile a cascata anche le regole.

Per esempio:

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

2. Aggiungere un riferimento all'esterno .css file subito dopo tag nel sezione di Foglio HTML :

 

Pro dei CSS esterni:

  • I nostri file hanno una struttura più pulita e dimensioni più ridotte.
  • Usiamo lo stesso .css file per più pagine Web in CSS esterni.

Contro dei CSS esterni:

  • Le pagine non possono essere consegnate correttamente prima del caricamento del CSS esterno.
  • Nei CSS esterni, il caricamento di molti file CSS può aumentare il tempo di download di un sito web.

3. CSS in linea

Il CSS in linea viene utilizzato per definire uno stile specifico HTML elemento. Aggiungere un stile attribuire a ciascun tag HTML senza utilizzare i selettori. Gestire un sito web può essere difficile se lo utilizziamo solo CSS in linea . Tuttavia, in linea CSS in HTML è utile in alcune situazioni. Non abbiamo accesso al File CSS o per applicare stili all'elemento.

Nell'esempio seguente, abbiamo utilizzato il CSS inline in

coppia C++
E

Sarà utile qui.

Pro dei CSS in linea:

  • Possiamo creare regole CSS sulla pagina HTML.
  • Non possiamo creare e caricare un documento separato nel CSS in linea.

Contro dei CSS in linea:

  • CSS in linea, aggiungendo CSS regole per gli elementi HTML è richiede tempo E pasticci la struttura HTML.
  • Applica uno stile a più elementi contemporaneamente, il che può influire sulle dimensioni della pagina e sul tempo di download della pagina.