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: 20px" (invece di "margin-left: 20px") funzionerà in IE (browser Internet Explorer), ma non in 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 della testa Pagine HTML usando il tag (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

Qui si può prezzi vantaggiosi compra i migliori elefanti!!

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! Adesso manca poco, vale a dire forzare pagine richieste del nostro sito per trarre 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 in sé esclusivamente informazioni di servizio si trova nell'intestazione 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 documento corrente e il file a cui si fa 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 in formato XML per descrivere il feed di notizie.

genere- Tipo di dati MIME del file incluso.

Dal momento che ci colleghiamo come file esterno foglio di stile a cascata, quindi il nostro collegamento al servizio ha il seguente 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 questa vita testo e contiene una descrizione dello 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", su questo momento, ci sono tre pagine, ognuna delle quali è associata ad una singola css esterno file - miostile.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 …

  Stili correlati

  Il più conveniente, perché con il loro aiuto puoi facilmente organizzare stile uniforme l'intero sito. Lo stile collegato presuppone che tutto lo stile CSS sia in file separato con estensione .css.

  Questo approccio è anche conveniente in quanto separa le regole di layout della pagina dal loro contenuto, il codice CSS può essere facilmente modificato senza interferire con i file HTML e il principio della separazione del codice è molto importante, specialmente nei progetti di grandi dimensioni.

  Per associare le regole di un file CSS a una pagina HTML, usa il tag aggiunto al contenitore , e i suoi attributi.

  Ecco la linea che collega le regole dal file miostile.css con pagina HTML:

  rel = "foglio di stile" specifica che il tag fa riferimento a un file di foglio di stile, href = "mysyle.css" imposta il suo indirizzo. Le regole di indirizzamento sono le stesse di per collegamenti regolari- il percorso può essere assoluto, relativo, ecc.

  Stili importati

  Usando il comando @importare puoi aggiungere stili da un file CSS alla tabella corrente. Ciò può essere necessario, ad esempio, se si desidera integrare il layout del documento individuale, specificato utilizzando stili globali, con regole universali da un file separato. Il metodo non può essere utilizzato con gli stili in linea.

  Il codice seguente importerà la tabella dei file nel documento qualsiasi.css, che si trova nella cartella con il documento HTML in fase di modifica:

  @import url (qualsiasi.css);

  Il comando è scritto sulla riga sotto il tag di apertura

  I fogli di stile a cascata (CSS), o semplicemente fogli di stile, vengono utilizzati per creare la presentazione delle pagine Web. tavolo stili CSS contiene un insieme di regole (stili) che descrivono il design della pagina Web stessa e dei suoi singoli frammenti. Queste regole determinano il colore del testo e l'allineamento del paragrafo, i rientri tra immagine grafica e il testo che lo avvolge, la presenza e i parametri del bordo nella tabella, il colore di sfondo della pagina Web e molto altro.

  Ogni stile CSS deve essere associato all'elemento corrispondente della pagina web (o alla pagina web stessa). Dopo il binding, descritto dallo stile selezionato parametri css iniziare ad applicare a questo elemento... Il legame può essere esplicito,quando noi stessi indichiamo quale stile css è legato a quale elemento della pagina Web, o implicito, quando lo stile css è automaticamente associato a tutti gli elementi della pagina Web creata utilizzando un tag specifico.

  tavolo stili CSS possono essere memorizzati direttamente nel codice HTML di una pagina Web o in un file separato. Quest'ultimo approccio è più in linea con il concetto di Web 2.0; come ricordiamo dal Capitolo 1, richiede che il contenuto e la presentazione della pagina Web siano separati. Inoltre, individuo stili CSS può essere inserito direttamente nel tag HTML che crea l'elemento della pagina Web; questo approccio è usato abbastanza raramente ora e, principalmente, quando si sperimentano stili.

  I fogli di stile CSS sono scritti in un linguaggio speciale chiamato -CSS. Lo standard che descrive la prima versione di questo linguaggio (CSS 1) è apparso nel 1996. Lo standard CSS 2 è ora ampiamente supportato e praticato ed è in corso lo sviluppo dello standard CSS 3, un sottoinsieme limitato del quale è già supportato da molti browser web.

  Solo CSS 3 (più precisamente, il suo sottoinsieme supportato da programmi moderni) noi studieremo.
  

  Creazione di stili CSS

  Formato di definizione normale Stile CSS illustra il Listato 7.1.

  Ecco le regole di base per lo styling css.

  Una definizione di stile CSS include un selettore e un elenco di attributi di stile con i relativi valori.

  - Selettore utilizzato per associare uno stile a un elemento di una pagina Web a cui dovrebbe estendere il suo effetto. Infatti, il selettore identifica in modo univoco dato stile.

  Dopo il selettore, separato da uno spazio, c'è un elenco di attributi di stile CSS ei loro valori, racchiusi tra parentesi graffe.

  Un attributo di stile (da non confondere con un attributo di tag!) Rappresenta uno dei parametri di un elemento della pagina Web: colore del carattere, allineamento del testo, valore di indentazione, spessore del bordo, ecc. Il valore dell'attributo di stile è indicato dopo di esso, separati dal simbolo: (due punti). In alcuni casi, il valore di un attributo di stile CSS è racchiuso tra virgolette.

  coppie<атрибут стиля>:<значение>separati l'uno dall'altro da un simbolo; (punto e virgola).

  Tra l'ultima coppia<атрибут стиля>:<значение>e il carattere parentesi graffa di chiusura; non farlo o alcuni browser Web potrebbero non gestire correttamente la definizione dello stile.

  Le definizioni dei diversi stili sono separate da spazi o nuove righe.

  Spazi e newline non devono essere presenti all'interno di selettori e nomi di stile. Gli spazi e le interruzioni di riga in altre parti della definizione dello stile vengono ignorati dal browser Web. Pertanto, possiamo formattare il codice CSS per la leggibilità, come abbiamo fatto con il codice HTML.

  Ma le regole sono regole e, soprattutto, pratica. Diamo un'occhiata a un esempio di un piccolo stile:

  P (colore: # 0000FF)

  Smontiamolo pezzo per pezzo.

  P è un selettore. Rappresenta il nome del tag

  Il colore è un attributo di stile. Imposta il colore del testo.

  - # 0000FF è il valore dell'attributo color style. Rappresenta il codice di colore blu registrato in formato RGB... (Parleremo di più del codice RGB e di come definirlo nel Capitolo 8.)

  Quando il browser legge lo stile descritto, lo applicherà automaticamente a tutti i paragrafi della pagina web (tag

  ). A proposito, questo è un tipico esempio di associazione di stile implicita.

  Stile CSS che abbiamo trattato è chiamato lo stile di override del tag. Il selettore qui è il nome del tag HTML sovrascritto da questo stile senza caratteri< и >. Selettore può essere digitato sia in maiuscolo che in lettere minuscole; l'autore preferisce il maiuscolo.

  Diamo un'occhiata a un altro paio di questi stili.

  Ecco lo stile del tag di sostituzione :

  EM (colore: # 00FF00;
  font-weight: grassetto)

  Qualsiasi testo inserito in un tag , Il tuo browser web verrà visualizzato in grassetto verde. L'attributo stile font-weight specifica il "grassetto" del carattere e il suo valore in grassetto è in grassetto.

  E questo è lo stile di override del tag :

  CORPO (colore di sfondo: # 000000;
  colore: #FFFFFF)

  Imposta per l'intera pagina Web Colore bianco testo (RGB #FFFFFF) e colore di sfondo nero (RGB # 000000). L'attributo background-color style, come abbiamo già capito, imposta il colore di sfondo.

  Ora diamo un'occhiata a uno stile completamente diverso:

  Testo rosso (colore: # FF0000)

  Imposta il colore del testo su rosso (RGB # FF0000). Ma il selettore non è chiaramente il nome del tag: il tag HTML non esiste.

  Questo è un tipo diverso Stile CSS- classe di stile. Può essere attaccato a qualsiasi tag. Il nome della classe di stile è specificato qui come selettore, che lo identifica in modo univoco. Il nome della classe di stile deve essere in lettere alfabeto latino, numeri e trattini e deve iniziare con una lettera. Nella definizione di una classe di stile, il suo nome è necessariamente preceduto da un simbolo punto - questo è un segno che è la classe di stile che viene definita.

  La classe style richiede un'associazione esplicita al tag. Questo viene fatto usando l'attributo CLASS, che è supportato da quasi tutti i tag. Il nome della classe di stile richiesta senza il simbolo del punto è specificato come valore di questo attributo:

  Attenzione!

  Qui abbiamo associato la classe di stile redtext appena creata all'Avvertenza! Di conseguenza, questo paragrafo sarà digitato in rosso.

  

  Nel Listato 7.2 abbiamo creato la classe di stile di attenzione, che specifica lo stile del carattere rosso e corsivo. (L'attributo font-style specifica il peso del font e il suo valore in corsivo rende semplicemente corsivo il font.) Quindi lo abbiamo associato al tag ... Di conseguenza, il contenuto di questo tag verrà digitato in grassetto corsivo in rosso; l'importanza speciale e l'"audacia" associata del testo sono impostate dal tag , e il corsivo e il rosso sono la classe di stile dell'attenzione.

  Come valore dell'attributo CLASS, puoi specificare più nomi di classi di stile contemporaneamente, separandoli con spazi. In questo caso, l'effetto delle classi di stile si somma. (Scopri di più sull'azione su un elemento di una pagina Web di diversi stili diversi parliamo più tardi.)

  

  Nell'esempio nel Listato 7.3, abbiamo attaccato al tag due classi di stile contemporaneamente: attenzione e bigtext. Di conseguenza, il contenuto di questo tag verrà visualizzato in grassetto corsivo in rosso e di grandi dimensioni. (L'attributo di stile della dimensione del carattere specifica la dimensione del carattere e il suo valore grande è grande taglia, paragonabile alla dimensione del carattere utilizzata per le intestazioni di primo livello.)

  Uno stile con nome è molto simile a una classe di stile. Il selettore di questo stile è anche un nome che lo identifica in modo univoco, ed è anche legato esplicitamente al tag. E poi iniziano le differenze.

  Nella definizione di uno stile con nome, un carattere # ("cancelletto") viene posizionato prima del suo nome. Dice al browser Web che ha uno stile con nome davanti.

  L'associazione di uno stile denominato a un tag viene implementata tramite l'attributo ID, che è supportato anche da quasi tutti i tag. Il nome dello stile denominato richiesto, senza il simbolo #, viene specificato come valore per questo attributo.

  Il valore dell'attributo tag ID deve essere univoco all'interno di una pagina Web. In altre parole, un solo tag con dato valore ID attributo. Pertanto, gli stili denominati vengono utilizzati quando uno stile deve essere associato a un singolo elemento di una pagina Web.

  Nell'esempio

  #bigtext (dimensione del carattere: grande)
  . . .
  

  Questo è un grande testo.

  il paragrafo "Questo è un testo grande" sarà in caratteri grandi.

  Tutti gli stili che abbiamo esaminato avevano un singolo selettore che veniva usato per legare. Tuttavia, i CSS consentono di creare stili con più selettori, i cosiddetti stili combinati. Questi stili vengono utilizzati per associare tag che soddisfano più condizioni contemporaneamente. Ad esempio, possiamo specificare che lo stile combinato deve essere collegato a un tag annidato all'interno di un altro tag, oppure a un tag per il quale è specificata una classe di stile specifica.

  Le regole stabilite dallo standard CSS per la scrittura di selettori di stile combinati.

  -Selettori possono essere nomi di tag, nomi di classi di stile e nomi di stili con nome.

  I selettori sono elencati da sinistra a destra e indicano il livello di nidificazione dei tag corrispondenti, che aumenta man mano che ci si sposta da sinistra a destra: i tag specificati a destra devono essere nidificati nei tag a sinistra.

  Se un nome di tag è combinato con una classe di stile o con un nome di stile denominato, allora per questo tagè necessario specificare il nome della classe di stile o dello stile denominato.

  I selettori sono separati da spazi.

  Lo stile è legato al tag indicato dal selettore più a destra.

  Regole complicate, vero? .. Per capirle, consideriamo alcuni esempi.

  Iniziamo con lo stile combinato più semplice:

  PEM (colore: # 0000FF)

  Nomi di tag usati come selettori

  E .

  Prima viene il tag

  Dietro c'è un tag ... Quindi il tag deve essere nidificato all'interno di un tag

  Lo stile sarà attaccato al tag .

  Questo testo diventa blu.

  
  

  E questo non lo farà.

  
  

  Questo- pure.

  Qui le parole "Questo testo" saranno digitate in blu.

  Ecco un altro stile CSS combinato:

  P.mini (colore: # FF0000;
  dimensione del carattere: più piccola)

  Nome del tag

  Combinato con il nome della classe di stile mini. Ciò significa che lo stile CSS specificato verrà applicato a qualsiasi tag

  Per cui viene specificato il nome della classe di stile mini. (Il valore più piccolo dell'attributo di stile della dimensione del carattere specifica una dimensione del carattere più piccola.)

  Piccolo testo rosso.

  E un ultimo esempio di stile CSS combinato:

  P.sel (colore: #FF0000)

  Questo stile verrà applicato al tag all'interno del tag

  A cui è legata la classe sel style.

  Questo il testo diventa rosso.

  V questo esempio la parola "Questo" sarà evidenziata in rosso.

  Lo standard CSS ti consente di definire più stili identici contemporaneamente elencando i loro selettori separati da virgole:

  H1, .redtext, P EM (colore: #FF0000)

  Qui abbiamo creato tre stili identici contemporaneamente: lo stile di sovrascrittura del tag

  , redtext classe di stile e stile combinato P EM. Tutti impostano il colore del carattere su rosso.

  Tutte e quattro le varietà di stili CSS che abbiamo trattato possono apparire solo nei fogli di stile. Se li specifichi nel codice HTML di una pagina Web, è probabile che vengano ignorati.

  Gli stili dell'ultima - quinta - varietà sono indicati direttamente nel codice HTML della pagina Web, nel tag corrispondente. Questi sono stili in linea. In una famiglia affiatata di stili, si distinguono.

  Non hanno un selettore, poiché vengono inseriti direttamente nel tag richiesto. Il selettore semplicemente non è necessario in questo caso.

  Non ci sono parentesi graffe in esse, poiché non è necessario separare l'elenco degli attributi di stile CSS dal selettore che non esiste.

  Lo stile CSS in linea può essere collegato solo a un tag, quello in cui si trova.

  La definizione dello stile CSS in linea è specificata come il valore dell'attributo STYLE tag desiderato che è supportato da quasi tutti i tag:

  Poco
  - corsivo.

  Abbiamo detto prima che in alcuni casi il valore dell'attributo stile css deve essere racchiuso tra virgolette. Ma nelle definizioni di stile in linea, gli apostrofi vengono utilizzati al posto delle virgolette.

  Gli stili CSS in linea sono usati raramente oggi perché violano il concetto Web 2.0 di separare il contenuto e la presentazione delle pagine Web. Sono principalmente utilizzati per associare gli stili a un singolo elemento di una pagina Web (molto raramente) e quando si sperimentano gli stili.

  Nel capitolo 14 vedremo un altro tipo di Stili CSS... Per ora, finiamo con loro e iniziamo a guardare i fogli di stile.