Quando il browser legge il foglio di stile, formatta il documento di conseguenza.
Tre modi per inserire CSS
Esistono tre modi per inserire un foglio di stile:
- Foglio di stile esterno
- Foglio di stile interno
- Stile in linea
Foglio di stile esterno
Un foglio di stile esterno è l'ideale quando gli stili devono essere applicati a molte pagine. Con un foglio di stile esterno è possibile modificare l'aspetto di un intero sito Web modificando un singolo file. Ogni pagina dovrebbe collegarsi al foglio di stile usando il tag ... Etichetta situato nella sezione testa:
Non lasciare spazi tra il valore dell'immobile e le sue unità! "margin-left: 20 px" (invece di "margin-left: 20px") funzionerà in IE (browser Internet Explorer), ma non nei browser Firefox o Opera.
Foglio di stile interno
Un foglio di stile interno viene utilizzato quando un singolo documento ha uno stile unico. Definisci gli stili interni nella sezione head di una pagina HTML usando il tag
Qui accadrà quanto segue: per tutti gli elementi all'interno del tag
si farà quanto segue: il loro colore sarà rosso e il margine superiore sarà di 100 pixel.
Terzo modo di assegnazione Stile CSS- esso stili importati... Sono anche come inserito sono impostati in testa al documento, ma già da un file. Ecco un esempio:
Qui gli stili del file verranno applicati all'intera pagina " mio.css".
E l'ultimo sguardo Stili CSS sono gli stili del file. Questo metodo è il più comune e consiste nel collegare il file di stile tramite il tag in testa al documento. Ad esempio, in questo modo:
Questo metodo è molto simile al metodo precedente, ma il tag non viene utilizzato qui. (da non confondere con l'attributo omonimo) in cui avviene la descrizione degli elementi di cui abbiamo bisogno.
Dai un'occhiata all'esempio, ci saranno commenti qui sotto.
Tutto sugli elefanti
In questo sito troverai tutte le informazioni sugli elefanti.
Compra un elefante
Puoi acquistare i migliori elefanti da noi a prezzi competitivi!!
Ingaggia un elefante
Solo qui puoi noleggiare qualsiasi elefante!
Come puoi vedere dall'esempio, abbiamo ottenuto esattamente lo stesso risultato del primo caso, solo che ora non prescriviamo uno stile per ogni elemento individualmente, ma lo inseriamo nella "testata" del documento, indicando così che tutte le intestazioni ,
- sarà blu e paragrafi
- rosso. Immagina come semplificheremmo il nostro lavoro se ci fossero cento di questi paragrafi e quindici titoli su una pagina, e il documento stesso iniziasse a pesare meno a causa della "rimozione" di tutte le descrizioni di stile ripetitive per ogni singolo elemento.
Ora i commenti promessi:
Etichetta esiste una dichiarazione diretta degli stili di alcuni elementi HTML secondo la seguente sintassi:
Se nel blocco della dichiarazione di stile sono specificate più proprietà di un elemento, queste vengono separate da punto e virgola.
CSS in un file esterno separato.
Per quanto tempo è breve, siamo arrivati al principale, secondo me, il vantaggio dei CSS, ovvero la possibilità di trasferire tutte le informazioni relative alla progettazione del sito in un file esterno separato.
Quindi, apri il blocco note (o un altro editor) e scrivi il seguente testo:
Corpo (colore di sfondo: # c5ffa0)
a (colore: # 000060; spessore del carattere: grassetto;)
a: hover (colore: # ff0000; font-weight: grassetto; text-decoration: nessuno)
h1 (colore: # 0000ff; dimensione carattere: 18px)
h2 (colore: # ff00ff; dimensione carattere: 16px)
p (colore: # 600000; dimensione carattere: 14px)
Quello che abbiamo scritto di così strano, cercherò di raccontarvi in dettaglio nei successivi capitoli di questo tutorial.
Qualunque cosa! file di descrizione dello stile creato! Ora manca solo un po', vale a dire forzare le pagine necessarie del nostro sito a estrarre informazioni da questo file.
Questo viene fatto usando il tag (connessione). Etichetta multiuso e serve a "collegare" un documento HTML con file esterni aggiuntivi per garantirne il corretto funzionamento. Etichetta è una sorta di collegamento, destinato solo non agli utenti, ma ai programmi browser (browser). Perché porta solo informazioni di servizio, si trova nella testa del documento HTML tra i tag e non viene visualizzato sullo schermo dai browser.
Etichetta ha attributi:
href- Il percorso del file.rel- Definisce la relazione tra il documento corrente e il file di riferimento.
- icona di collegamento: specifica il file di inclusione.
- foglio di stile- Specifica che il file incluso contiene un foglio di stile.
- application / rss + xml - File XML per la descrizione del feed di notizie.
Poiché includiamo il foglio di stile a cascata come file esterno, il nostro collegamento al servizio ha questo aspetto:
Ripeto, per fugare senz'altro possibili equivoci. Attributo rel assegna valore foglio di stile poiché includiamo il foglio di stile a cascata come file esterno, specifichiamo il percorso del file css (in questo esempio, il file si chiama miostile.css e si trova accanto al documento HTML in cui è scritto questo collegamento) indichiamo anche che questo file è di testo e contiene una descrizione di stile tipo = "testo/css"
Ora inseriamo questa riga nelle intestazioni di pagina del nostro sito e godiamoci il risultato..
File Mystyle.css
corpo (colore di sfondo: # c5ffa0)
a (colore: # 000060; spessore del carattere: grassetto;)
a: hover (colore: # ff0000; font-weight: grassetto; text-decoration: nessuno)
h1 (colore: # 0000ff; dimensione carattere: 18px)
h2 (colore: # ff00ff; dimensione carattere: 16px)
p (colore: # 600000; dimensione carattere: 14px)
File index.html
Menù:
Tutto sugli elefanti.
Compra un elefante.
Noleggia un elefante.
Tutto sugli elefanti
In questo sito troverai tutte le informazioni sugli elefanti.
File Elefante.html
Menù:
Tutto sugli elefanti.
Compra un elefante.
Noleggia un elefante.
Compra un elefante
Puoi acquistare i migliori elefanti da noi a prezzi competitivi!!
File Elephant1.html
Menù:
Tutto sugli elefanti.
Compra un elefante.
Noleggia un elefante.
Ingaggia un elefante
Solo qui puoi noleggiare qualsiasi elefante!
Nell'esempio sopra, il "sito dell'elefante", ci sono attualmente tre pagine, ognuna delle quali è associata a un singolo file css esterno - mystyle.css. Pertanto, l'abbiamo "scaricato" in modo significativo e reso "mobile" il design dell'intero sito. Immagina quanti b kilobyte vinceremmo se ci fossero cento pagine a tutti gli effetti su questo sito!? E inoltre, quanto tempo risparmieresti se dovessimo cambiare qualcosa nel suo design!?
In questo capitolo abbiamo esaminato tre modi per incorporare CSS in un documento HTML. Quale è meglio usare?
- Usa l'attributo stile per qualsiasi elemento se questo elemento con uno stile diverso dagli altri elementi è l'unico su tutto il sito.
- Usa un tag
Esempio: foglio di stile interno
- Provate voi stessi "
Intestazione
Primo testo
Secondo testo
Terzo testo
Foglio di stile interno Intestazione
Primo testo
Secondo testo
Terzo testo
In questo esempio, utilizziamo i CSS per impostare il colore di sfondo per l'elemento.
: colore di sfondo: verde chiaro, colore e tipo di carattere per i titoli: colore blu; font-family: verdana così come la dimensione del carattere, il colore e l'allineamento centrale per i paragrafi
: dimensione del carattere: 20px; colore rosso; allineamento del testo: centro.
Stile in linea
Quando è necessario formattare un singolo elemento di una pagina HTML, la descrizione dello stile può essere inserita direttamente all'interno del tag di apertura utilizzando l'attributo style già specializzato. Ad esempio:
Paragrafo
Tali stili sono chiamati stili in linea o stili in linea. Le regole definite direttamente all'interno del tag di apertura di un elemento sovrascrivono le regole definite nel file CSS esterno e le regole definite nell'elemento
Intestazione
Primo testo
Secondo testo
Terzo testo