I CSS, come ogni linguaggio, hanno una propria sintassi. Non ha elementi, parametri, tag. Ha delle regole. Una regola è costituita da un selettore e un blocco di dichiarazione di stile racchiuso tra parentesi graffe:

Il blocco di dichiarazione di stile stesso è costituito da proprietà e dai relativi valori, separati da punto e virgola:

Proviamolo in pratica. Apri la pagina html e la pagina CSS create nel tutorial precedente. Diamo alla nostra pagina uno sfondo blu. Come ricorderete, il tag è responsabile di questo , quindi andiamo alla pagina style.css e scriviamo il seguente codice:

corpo (sfondo: blu; )

Apri la tua pagina html in un browser e assicurati che lo sfondo sia blu. Ora, rendiamo bianco il testo sulla pagina:

corpo (sfondo: blu; colore: bianco;)

Aggiorna la pagina html nel browser (Ctrl+F5) e assicurati che tutto il testo sia ora Colore bianco. Ora rendiamo i colori dell'intestazione rosso (per h1) e giallo (per h2):

corpo (sfondo: blu; colore: bianco; ) h1(colore:rosso;) h2(colore:giallo;)

Aggiorna di nuovo la pagina nel browser e assicurati che tutto sia come previsto.

Penso che il principio sia già chiaro: specifichiamo un selettore, cioè l'elemento a cui è applicato lo stile e in parentesi graffe- le sue proprietà ei loro significati. Verranno trattati proprietà e valori lezioni individuali mentre stiamo valutando principio generale compilazione di un foglio di stile.

Selettori CSS

Selettori per ID

Nel nostro esempio, gli elementi della pagina sono stati usati come selettori: body, h1, h2. Ma cosa succede se la nostra pagina html ha diversi elementi identici (ad esempio paragrafi) e vogliamo che il testo di tutti i paragrafi sia nero e uno di questi - rosa. Quindi dobbiamo fornire un identificatore univoco per questo paragrafo e creare uno stile per esso.

In HTML, l'ID di un elemento viene specificato utilizzando il parametro id An il cui valore è un nome univoco. Per esempio:

Testo del paragrafo con identificatore (id).

Puoi dare qualsiasi nome, ad eccezione delle parole riservate (queste includono i nomi di tag e parametri di elementi HTML e CSS), ad esempio, non puoi nominare il corpo dell'identificatore. Aggiungiamo un paio di paragrafi alla nostra pagina html e diamo a uno di essi un ID: Se ora guardiamo la nostra pagina nel browser, i nostri paragrafi sono entrambi bianchi. Aggiungiamo gli stili per i nostri paragrafi al foglio di stile (style.css):

corpo (sfondo: blu; colore: bianco; ) h1(colore:rosso;) h2(colore:giallo;) p(colore:nero;)p#rosa(colore:rosa;)

Abbiamo prima specificato di rendere nero il testo di tutti i paragrafi e il testo del paragrafo con id "rosa" fare rosa. Il nostro selezionatore lo è questo caso dall'elemento ( p), separatore ( # ) e nome identificativo ( rosa).

È importante ricordare che può esserci un solo identificatore (id) per pagina. Quelli. per il nostro esempio, non puoi creare due paragrafi con id "rosa", un paragrafo con id può essere solo uno. Ma ogni paragrafo può avere un proprio identificatore, ad esempio puoi creare un paragrafo con id="green" e impostare lo stile per questo paragrafo nel foglio di stile.

Selettori per classe

Nell'esempio sopra, abbiamo creato un paragrafo con il colore del testo rosa e abbiamo indicato che può esserci solo uno di questi ID. Ma cosa succede se lo vogliamo colore rosa il testo aveva due o tre paragrafi. C'è un parametro in HTML per questo classe An il cui valore è il suo nome.

Aggiungiamo un altro paio di paragrafi alla nostra pagina html e diamoli classe = "rosa": Per specificare lo stile per questa classe, scriveremo una regola nel foglio di stile, dove l'elemento sarà nuovamente utilizzato come selettore p e nome rosa, ma in questo caso è il nome della classe, quindi il punto (.) sarà usato come delimitatore:

corpo (sfondo: blu; colore: bianco; ) h1(colore:rosso;) h2(colore:giallo;) p(colore:nero;)p#rosa(colore:rosa;)p.rosa(colore:rosa;)

Ci può essere un numero qualsiasi di paragrafi con questa classe.

Riassumiamo:

• se tutti questi elementi (ad esempio, tutte le intestazioni h1) devono avere lo stesso stile, il selettore è costituito solo da quell'elemento (ad esempio, p(colore:nero;))
• se un elemento (qualsiasi: paragrafo, intestazione...) deve essere diverso da tutti gli altri, allora gli viene assegnato un identificatore ( id) e il delimitatore nel foglio di stile è il cancelletto ( # ), Per esempio, p#rosa(colore:rosa;) .
• se nella pagina sono presenti più elementi con lo stesso stile, viene assegnata loro una classe ( classe) e il separatore nel foglio di stile è un punto (.), ad esempio, p.rosa(colore:rosa;).
• l'identificatore ha una precedenza maggiore rispetto alla classe. Pertanto, se per qualsiasi elemento vengono specificati sia una classe che un identificatore (il che non contraddice Principi CSS), verrà applicato lo stile dell'identificatore.

Come già accennato, identificatori e classi possono essere assegnati a qualsiasi elemento html. Ma capita spesso di voler evidenziare diversi elementi con lo stesso stile, ad esempio, in verde. In tal caso, puoi usare selettore unificato. In tali selettori, non viene specificato il nome dell'elemento, viene specificato un punto o un cancelletto come attributo di classe o identificatore e un nome. Per esempio:

Rosso( colore:rosso; ) #giallo(colore:giallo;)

Quindi, non importa quale elemento abbiamo impostato classe = "rosso"(intestazione, paragrafo o collegamento), il colore del testo diventa rosso. Un elemento sulla pagina (qualsiasi) possiamo impostare id="giallo" e il colore del testo di quell'elemento diventerà giallo.

Selettore di contesto

Supponiamo di avere una pagina html con questo codice: vogliamo che anche il corsivo sia evidenziato in verde. Quindi nel foglio di stile scriveremo il selettore per elemento, ad es.

i(colore:verde; )

Ora la nostra pagina nel browser si presenta così:

Ma cosa succede se vogliamo che non tutto il testo in corsivo sia verde, ma solo quello nei paragrafi. Per fare ciò, apporteremo modifiche al foglio di stile:

pi(colore:verde; )

Quindi abbiamo indicato di applicare dato stile agli elementi io, che sono negli elementi p. I nomi degli elementi sono separati da uno spazio. Questi selettori sono chiamati contestuale. Ora la nostra pagina nel browser si presenta così:

Selettori di raggruppamento

Se i blocchi di dichiarazione di stile per più selettori sono gli stessi (ad esempio, vogliamo che le intestazioni dei primi tre livelli siano verdi), allora possono essere raggruppati. Per fare ciò, i selettori a cui verrà applicato lo stesso stile devono essere elencati separati da virgole. Esempio:

h1, h2, h3 (colore: verde; )

Supponiamo che oltre al colore, vogliamo impostare la dimensione delle nostre intestazioni. Quindi possiamo semplicemente aggiungere al nostro foglio di stile:

h1, h2, h3(colore:verde;) h1(dimensione carattere:18px;) h2(dimensione carattere:16px;) h3(dimensione carattere:14px;)

Le nostre intestazioni avranno dimensione indicata, ma saranno tutti verdi.

In realtà, ci sono disaccordi sui raggruppamenti. Alcuni considerano il codice sopra corretto, perché il raggruppamento ha aiutato a evitare la ripetizione stessa proprietà per tre elementi, questo accorcia il codice.

Altri ritengono che in questo modo la logica del codice peggiori. Poiché, trovato il selettore per l'intestazione h3, non è subito chiaro perché il testo al suo interno sia verde. I fautori della logica raccomandano di raggruppare solo gli elementi i cui blocchi di descrizione sono esattamente gli stessi.

In generale, raggruppare o meno, una questione di gusti. Ma devi ricordare approcci diversi quando leggi il codice di qualcun altro, ad esempio, nei modelli.

Questo conclude la lezione sui selettori. Nella prossima lezione faremo conoscenza con concetti come pseudo-elementi e pseudo-classi.

Esiste quattro modi per collegare gli stili al tuo documento HTML. I metodi più comunemente usati sono CSS in linea e CSS esterni.

CSS in linea in HTML - elemento

Di seguito è riportato un esempio Incorpora CSS in base alla sintassi di cui sopra:

intestazione

Paragrafo.

Otteniamo il seguente risultato:

Attributi

CSS in linea - attributo di stile

È possibile utilizzare un attributo su qualsiasi elemento HTML per definire le regole di stile. Queste regole si applicheranno solo a dato elemento. Ecco la sintassi generale:

<элемент style = "...правила стиля...">

Attributi

Esempio

Di seguito è riportato un esempio di CSS inline basato sulla sintassi sopra:

CSS in linea

Otteniamo il seguente risultato:

Stili CSS esterni - elemento

Elemento può essere utilizzato per il collegamento esterno file css s al tuo documento HTML.

Tavolo esterno stili CSSè un separato file di testo con estensione .css. Definisci tutte le regole di stile in questo file di testo e quindi puoi includere il file CSS in qualsiasi documento HTML utilizzando l'elemento .

Ecco la sintassi generale per includere un file CSS esterno:

Attributi

Gli attributi sono associati agli elementi o regole definite in alcuno file esterno fogli di stile.

Qualsiasi regola definita nei tag, sovrascrive le regole definite in qualsiasi file CSS esterno.

Qualsiasi regola definita in un file di foglio di stile esterno ha la precedenza più bassa in CSS e le regole definite in quel file si applicheranno solo quando le due regole precedenti non si applicano.

Gestione da vecchi browser

Esistono molti browser meno recenti che non supportano i CSS. Pertanto, dobbiamo occuparci di scrivere CSS in linea nel nostro documento HTML. Il seguente frammento di codice mostra come utilizzare i tag di commento per nascondere i CSS dai browser meno recenti:

Regole CSS

css, come qualsiasi altro linguaggio informatico, ha una sintassi rigorosamente definita, ovvero le regole con cui vengono creati i fogli di stile. Nel capitolo precedente, hai già visto diversi esempi di fogli di stile diversi e probabilmente hai notato che la sintassi CSS è diversa dalla sintassi HTML. Non ci sono elementi, attributi, tag nei CSS. Ha regole, ognuna delle quali descrive l'aspetto di uno o di un gruppo di elementi HTML. La regola determina l'aspetto di un determinato elemento. Diamo una definizione.

Una regola CSS è un'unità strutturale di un foglio di stile che contiene una descrizione degli stili per un particolare elemento. Una regola è costituita da un selettore, che è sempre a sinistra, e da un blocco di dichiarazione di stile, racchiuso tra parentesi graffe e che segue immediatamente il selettore (figura). Ogni dichiarazione a sua volta è costituita da una proprietà e dal suo valore. È la proprietà che determina il tipo di stile che verrà applicato all'elemento.

Una regola può contenere più dichiarazioni, separate da punto e virgola. È possibile omettere il punto e virgola dopo l'ultima dichiarazione.

Per comodità di lettura e modifica dei fogli di stile, le sue regole sono generalmente scritte in modo tale che ogni dichiarazione si trovi su una riga separata. Per esempio:

Sarà percepito esattamente allo stesso modo, anche ulteriore risparmio nella dimensione del codice rimuovendo personaggi extra spazi e nuove righe. Ma tale scrittura complica la percezione del codice. Puoi fare un compromesso: prima scrivi le regole, suddividendole in righe, e dopo che il foglio di stile è finalmente pronto, rimuovi i caratteri non significativi non necessari. Ma non c'è alcuna garanzia che dopo non vorrai aggiustare qualcos'altro B, quindi dovrai soffrire un po' prima di trovare la proprietà giusta e modificarla.

Per ogni proprietà css la specifica specifica l'insieme di valori che questa proprietà può assumere, nonché il valore e l'ambito di default! proprietà, cioè gli elementi a cui può essere applicato. Indica anche se questa proprietà è ereditata, ad es. se si applicherà agli elementi discendenti. Specifica i dispositivi di output a cui si applicano queste proprietà. Dal momento che considereremo progettazione informatica, menzioneremo solo quelle proprietà che sono applicabili nel nostro caso, cioè progettati per controllare la visualizzazione sullo schermo del monitor e sono supportati anche dai browser moderni.

Considera il principale regole CSS per la registrazione elementi di testo Sulla pagina.

• famiglia di font: famiglia-font|tipo-carattere. Un avvertimento: se il nome del carattere contiene uno spazio, allora questo nome deve essere racchiuso tra virgolette.
• dimensione del font: magnitudine|%. Questa è la dimensione del carattere. Può essere specificato in pixel, percentuali, ems. Inoltre, le percentuali sono calcolate dalla dimensione del carattere che questo elemento ha ereditato.
• peso del carattere: normal|grassetto|bolder|lighter|un numero compreso tra 100 e 900. Questo è il peso del carattere. 400 = normale, 700 = grassetto.
• stile carattere: normale|corsivo. Questa è la pendenza del tuo carattere. L'impostazione predefinita è normale.
• font-variante: normale|minuscolo. Questa è un'iscrizione di lettere minuscole.
• regole prefabbricate font. Consentono di specificare singole regole separate da spazi. Nella maggior parte delle regole prefabbricate, l'ordine non è importante, ma nella regola dei caratteri lo è.
• font: font-style font-variant font-weight font-size font-family. Le regole sono scritte in quest'ordine. Le regole font-size e font-family devono essere specificate (perché non hanno valori predefiniti), il resto delle regole può essere omesso.

famiglia di caratteri: Arial, Ginevra, Helvetica, sans-serif; dimensione del carattere: 10px; font-weight: grassetto; stile del carattere: corsivo; font-variant: maiuscolo; carattere: grassetto 10px Arial;

Regole di testo CSS

• allineamento del testo: sinistra|destra|centro|giustificato. Questo è un sostituto attributo allinea, questo è allineamento orizzontale linee. Si applica solo agli elementi di blocco.
• decorazione del testo: nessuno|sovralinea (|) sottolinea (|) riga attraverso. Questa decorazione linea orizzontale(nessuna riga, riga sopra la riga di testo, riga sotto la riga di testo, barrato).
• indentatura del testo: magnitudine|%. Questa è la linea rossa. Le percentuali sono calcolate dalla dimensione dell'area in cui si trova lo stesso testo. Si applica solo agli elementi di blocco.
• trasformazione del testo: nessuno|maiuscolo|maiuscolo|minuscolo (i caratteri non cambiano, metti in maiuscolo ogni parola, converti in minuscolo o lettere maiuscole). Questa è la trasformazione del carattere.
• spaziatura del carattere: valore|normale. Questa è la distanza tra i personaggi. Non può essere specificato come percentuale.
• spaziatura delle parole: valore|normale. Questa è la distanza tra le parole. Non può essere specificato come percentuale.
• allineamento verticale: baseline|sub|super|top|text-top|middle|bottom|text-bottom|%. Allineamento verticale. Questo allineamento elementi in linea tra di loro. Ma per gli elementi della tabella "td" e "th" allineamento verticale allinea tutto il contenuto che si trova all'interno.
• altezza della linea: normale|valore|%. L'altezza della riga in cui si trova il testo.
• spazio bianco: normale|pre|nowrap. Come gestire caratteri di spazio vuoto nel nostro elemento (normal - sono ridotti e vengono automaticamente avvolti, nowrap - i caratteri degli spazi bianchi sono ridotti, ma non sono avvolti, i pre - spazi non vengono elaborati in alcun modo, ovvero non vengono ridotti e non c'è nemmeno il wrapping su di essi ).

allineamento del testo: a destra; decorazione del testo: sottolineatura; rientro testo: 10px; trasformazione del testo: maiuscolo; spaziatura delle lettere: 10px; spaziatura delle parole: 10px; allineamento verticale: in alto; altezza della linea: 5%; spazio bianco: pre;

Liste di stili nei CSS

Le regole di stile degli elenchi in CSS possono essere applicate sia all'intero elenco che a singoli elementi elenco.

• tipo stile elenco: nessuno|cerchio|disco|quadrato|decimale|alfa-inferiore|alfa-superiore|romano-inferiore|romano-superiore. Questo è il tipo di marcatura: nessun pennarello, cerchio, disco, quadrato, numeri arabi, lettere in diversi registri, numeri romani in diversi registri.
• posizione in stile elenco: fuori|dentro (fuori, dentro). Questo è il posizionamento dell'area con il marker. Viene formata un'area speciale per il marker: all'esterno dell'elemento "li" o al suo interno (per impostazione predefinita, all'esterno dell'elemento).
• immagine in stile elenco: nessuno|url. Immagine per il design del pennarello. Possiamo specificare l'URL dell'immagine in modo che venga visualizzato al posto del marcatore.
• stile elenco: tipo-stile-elenco posizione-stile-elenco-stile-elenco-immagine. Quelli. qui scriviamo tutte e tre le regole sopra in una, una regola di raccolta. Qui l'ordine non ha importanza.

tipo-stile-elenco: quadrato; posizione-stile-elenco: all'interno; immagine-stile-elenco: url("ball.gif "); stile elenco: decimale all'interno;

Colore CSS e proprietà di sfondo

• colore: colore.
• colore di sfondo: colore|trasparente. Questo è il colore di sfondo. È trasparente per impostazione predefinita.
• immagine di sfondo: nessuno|url. immagine di sfondo. Puoi inserire un'immagine specificando il suo URL.
• posizione di sfondo: alto|basso|centro|sinistra|destra|valore|%. La posizione dell'immagine nell'elemento.
• sfondo-allegato: fixed|scroll (legandosi a elemento, viewport). Si tratta di allegare un'immagine, da cui viene calcolata la coordinata. Risolto il problema con la lettura delle coordinate dalla finestra.
• sfondo ripetuto: ripeti|ripeti-x|ripeti-y|non-ripeti. Ripeti: su entrambi gli assi, ripetere l'asse x (orizzontale), l'asse y (verticale), non ripetere.
• sfondo:trasparente colore di sfondo immagine di sfondo sfondo-ripetizione sfondo-attaccamento sfondo-posizione. Una regola prefabbricata che unisce tutte le regole di fondo.

colore rosso; colore di sfondo: #330033 ; immagine di sfondo: url("fon.gif"); posizione sullo sfondo: in alto a destra; sfondo-allegato: fisso; background-repeat: repeat-x ; sfondo: #ffffff no-ripeti url(fon.gif );

CSS (Cascading Style Sheets) o Cascading Style Sheets, sono usati per descrivere aspetto esteriore un documento scritto in un linguaggio di markup. In genere, gli stili CSS vengono utilizzati per creare e modificare lo stile degli elementi della pagina Web e interfacce utente scritto in Linguaggi HTML e XHTML, ma può anche essere applicato a qualsiasi tipo di documento XML, inclusi XML, SVG e XUL.

I fogli di stile sovrapposti descrivono le regole per la formattazione degli elementi utilizzando le proprietà e valori consentiti queste proprietà. Per ogni elemento è possibile utilizzare un insieme limitato di proprietà, le altre proprietà non avranno alcun effetto su di esso.

La dichiarazione di stile è composta da due parti: l'elemento della pagina web − selettore e comandi di formattazione - blocco degli annunci. Il selettore indica al browser quale elemento formattare e il blocco di dichiarazione (il codice tra parentesi graffe) elenca i comandi di formattazione: le proprietà ei relativi valori.

Riso. 1. Struttura della dichiarazione in stile CSS

Tipi di fogli di stile a cascata e loro specifiche

1. Tipi di fogli di stile

1.1. Foglio di stile esterno

Foglio di stile esternoè un file di testo con estensione .css, che contiene un insieme di stili CSS per gli elementi. Il file viene creato nell'editor di codice, proprio come una pagina HTML. Il file può contenere solo stili, nessun markup HTML. Un foglio di stile esterno viene allegato a una pagina Web tramite un tag situato all'interno della sezione . Questi stili funzionano per tutte le pagine del sito.

Puoi allegare più fogli di stile a ciascuna pagina web aggiungendo più tag in sequenza , specificando lo scopo di questo foglio di stile nell'attributo del tag multimediale. rel="stylesheet" indica il tipo di collegamento (link al foglio di stile).

L'attributo type="text/css" non è richiesto dallo standard HTML5, quindi può essere omesso. Se l'attributo è mancante, il valore predefinito è type="text/css" .

1.2. Stili interni

Stili interni incorporato nella sezione documento HTML e sono definiti all'interno del tag. Gli stili interni hanno la precedenza sugli stili esterni, ma sostituiscono gli stili in linea (specificati tramite l'attributo style).

...

1.3. Stili in linea

Quando scriviamo stili in linea, scriviamo il codice CSS nel file HTML, direttamente all'interno del tag dell'elemento utilizzando l'attributo style:

Presta attenzione a questo testo.

Tali stili influiscono solo sull'elemento per cui sono impostati.

1.4. @regola di importazione

@regola di importazione consente di caricare fogli di stile esterni. Affinché la direttiva @import funzioni, deve essere inserita nel foglio di stile (esterno o interno) prima di tutte le altre regole:

La regola @import viene utilizzata anche per includere i caratteri Web:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Tipi di selettori

Selettori rappresentano la struttura di una pagina web. Sono usati per creare regole per la formattazione degli elementi di una pagina web. I selettori possono essere elementi, le loro classi e identificatori, nonché pseudo-classi e pseudo-elementi.

2.1. Selettore universale

Corrisponde a qualsiasi elemento HTML. Ad esempio, * (margine: 0;) annullerà margini per tutti gli elementi del sito. Un selettore può essere utilizzato anche in combinazione con una pseudo-classe o uno pseudo-elemento: *:after (Stili CSS) , *:checked (Stili CSS) .

2.2. Selettore di elementi

I selettori di elementi consentono di formattare tutti gli elementi di questo tipo in tutte le pagine del sito. Ad esempio, h1 (font-family: Lobster, cursive;) imposterà lo stile di formattazione generale per tutte le intestazioni h1.

2.3. selettore di classe

I selettori di classe ti consentono di modellare uno o più elementi con lo stesso nome classe collocata in punti diversi della pagina o sopra pagine diverse luogo. Ad esempio, per creare un'intestazione con la classe del titolo, aggiungi l'attributo della classe con il titolo del valore al tag di apertura

e imposta lo stile per la classe specificata. Gli stili creati con una classe possono essere applicati ad altri elementi, non necessariamente di quel tipo.

Manuale d'uso personal computer

.headline ( trasformazione del testo: maiuscolo; colore: azzurro; )

2.4. Selettore ID

Il selettore ID consente la formattazione uno elemento specifico. L'identificatore id deve essere univoco e può verificarsi solo una volta su una pagina.

#barra laterale (larghezza: 300px; float: sinistra; )

2.5. Selettore discendente

I selettori discendenti applicano gli stili agli elementi che si trovano all'interno di un elemento contenitore. Ad esempio, ul li (trasformazione del testo: maiuscolo;) selezionerà tutti gli elementi li che sono figli di tutti gli elementi ul.

Se vuoi formattare i figli di un particolare elemento, devi assegnare a quell'elemento una classe di stile:

p.first a (colore: verde;) - questo stile verrà applicato a tutti i link, discendenti del paragrafo con la classe first ;

p .first a (colore: verde;) - se aggiungi uno spazio, i collegamenti che si trovano all'interno di qualsiasi tag di classe .first che è figlio dell'elemento avranno uno stile

First a (colore: verde;) - questo stile verrà applicato a qualsiasi collegamento situato all'interno di un altro elemento, indicato dalla classe .first.

2.6. Selettore figlio

Un elemento figlio è un figlio diretto del suo elemento contenitore. Un elemento può avere più elementi figlio e ogni elemento può avere un solo elemento padre. Il selettore figlio consente di applicare gli stili solo se l'elemento figlio viene immediatamente dopo l'elemento padre e non ci sono altri elementi intermedi, ovvero l'elemento figlio non è nidificato in nient'altro.
Ad esempio, p > strong selezionerà tutti gli elementi forti che sono figli dell'elemento p.

2.7. Sorella selezionatrice

Le relazioni tra fratelli si verificano tra elementi che hanno un genitore comune. I selettori di elementi di pari livello consentono di selezionare elementi da un gruppo di elementi di pari livello.

h1 + p - seleziona tutti i primi paragrafi immediatamente successivi a qualsiasi tag

senza pregiudicare il resto dei paragrafi;

h1 ~ p selezionerà tutti i paragrafi che sono fratelli di qualsiasi intestazione h1 e immediatamente dopo di essa.

2.8. Selettore attributi

I selettori di attributo selezionano gli elementi in base al nome dell'attributo o al valore dell'attributo:

[attributo] - tutti gli elementi contenenti l'attributo specificato, - tutti gli elementi per i quali è impostato l'attributo alt;

selector[attributo] - elementi di questo tipo che contengono l'attributo specificato, img - solo le immagini per le quali è impostato l'attributo alt;

selector[attribute="value"] — elementi di questo tipo che contengono l'attributo specificato con un valore specifico, img — tutte le immagini i cui nomi contengono la parola flower ;

selector[attribute~="value"] - elementi che contengono parzialmente dato valore, ad esempio, se un elemento ha più classi separate da uno spazio, p sono paragrafi il cui nome di classe contiene feature ;

selector[attribute|="value"] - elementi il ​​cui elenco di valori di attributo inizia con la parola specificata, p - paragrafi il cui nome di classe è caratterizzato o inizia con caratteristica;

selector[attribute^="value"] - elementi il ​​cui valore di attributo inizia con il valore specificato, a - tutti i collegamenti che iniziano con http:// ;

selector[attribute$="value"] - elementi il ​​cui valore di attributo termina con valore specificato, img — tutte le immagini in formato png;

selector[attribute*="value"] - elementi il ​​cui valore di attributo contiene la parola specificata ovunque, a - tutti i collegamenti il ​​cui nome contiene book .

2.9. Selettore di pseudoclassi

Le pseudo-classi sono classi non effettivamente associate a tag HTML. Consentono di applicare le regole CSS agli elementi quando si verifica o obbedisce a un evento. certa regola. Le pseudo-classi caratterizzano elementi con le seguenti proprietà:

:hover - qualsiasi elemento su cui si passa con il cursore del mouse;

:focus - un elemento interattivo che è stato navigato con la tastiera o attivato con il mouse;

:active - l'elemento che è stato attivato dall'utente;

:valid - campi modulo il cui contenuto è stato convalidato nel browser per la conformità con il tipo di dati specificato;

:invalid - campi modulo il cui contenuto non corrisponde al tipo di dati specificato;

:enabled - tutti i campi del modulo attivi;

:disabled - campi modulo disabilitati, ovvero in uno stato inattivo;

:in-range - campi del modulo i cui valori sono nell'intervallo specificato;

:out-of-range - campi del modulo i cui valori non sono inclusi nell'intervallo impostato;

:lang() - elementi con testo nella lingua specificata;

:not(selettore) - elementi che non contengono il selettore specificato - classe, identificatore, nome o tipo di campo modulo - :not() ;

:target è l'elemento # a cui si fa riferimento nel documento;

:checked - elementi del modulo selezionati (selezionati dall'utente).

2.10. Selettore di pseudoclasse strutturale

Le pseudo-classi strutturali selezionano gli elementi figlio in base al parametro specificato tra parentesi:

:nth-child(odd) - elementi figlio dispari;

:nth-child(even) - anche elementi figlio;

:nth-child(3n) - ogni terzo elemento tra i bambini;

:nth-child(3n+2) - seleziona ogni terzo elemento, a partire dal secondo elemento figlio (+2) ;

:nth-child(n+2) - seleziona tutti gli elementi, a partire dal secondo;

:nth-child(3) - seleziona il terzo elemento figlio;

:nth-last-child() - nell'elenco degli elementi figlio, seleziona l'elemento con posizione specificata, simile a :nth-child() , ma indietro rispetto all'ultimo;

:first-child - ti permette di dare uno stile solo al primo elemento figlio del tag;

:last-child - ti permette di formattare l'ultimo elemento figlio del tag;

:only-child - seleziona un elemento che è l'unico figlio;

:empty - seleziona gli elementi che non hanno figli;

:root - seleziona l'elemento che è la radice del documento - elemento html.

2.11. Selettore di pseudoclassi di tipo strutturale

Punta a un tipo specifico di tag figlio:

:nth-of-type() - seleziona gli elementi per analogia con :nth-child() , tenendo conto solo del tipo dell'elemento;

:first-of-type - seleziona il primo figlio del tipo specificato;

:ultimo tipo - seleziona ultimo elemento di questo tipo;

:nth-last-of-type() - seleziona un elemento dato tipo nell'elenco degli elementi in base alla posizione specificata, a partire dalla fine;

:only-of-type - seleziona l'unico elemento del tipo specificato tra gli elementi figlio elemento padre.

2.12. Selettore di pseudo elementi

Gli pseudo-elementi vengono utilizzati per aggiungere contenuto generato utilizzando la proprietà del contenuto:

:first-letter - seleziona la prima lettera di ogni paragrafo, si applica solo agli elementi di blocco;

:first-line - seleziona la prima riga del testo dell'elemento, si applica solo agli elementi del blocco;

:before - inserisce il contenuto generato prima dell'elemento;

:after - Aggiunge contenuto generato dopo l'elemento.

3. Combinazione di selettori

Per una selezione più precisa degli elementi per la formattazione, puoi utilizzare combinazioni di selettori:

img:nth-of-type(even) - seleziona tutte le immagini pari, testo alternativo che contiene css parola.

4. Selettori di raggruppamento

Lo stesso stile può essere applicato a più elementi contemporaneamente. Per fare ciò, sul lato sinistro della dichiarazione, elenca i selettori necessari separati da virgole:

H1, h2, p, span ( colore: pomodoro; sfondo: bianco; )

5. Ereditarietà e cascata

Ereditarietà e cascata sono due concetti fondamentali nei CSS strettamente correlati. Ereditarietà significa che gli elementi ereditano le proprietà dal loro genitore (l'elemento che li contiene). La cascata si manifesta nel modo tipi diversi i fogli di stile vengono applicati al documento e come le regole in conflitto si prevalgono a vicenda.

5.1. Eredità

Ereditàè il meccanismo mediante il quale alcune proprietà vengono trasmesse da un antenato ai suoi discendenti. La specifica CSS prevede l'ereditarietà delle proprietà relative al contenuto testuale di una pagina, come color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibilità , white-space e la spaziatura delle parole. In molti casi, questo è conveniente perché non è necessario impostare la dimensione del carattere e la famiglia di caratteri per ogni elemento della pagina web.

Le proprietà di formattazione del blocco non vengono ereditate. Questi sono sfondo , bordo , display , float e clear , height e width , margin , min-max-height and -width , outline , overflow , padding , position , text-decoration , vertical-align e z-index .

Eredità forzata

Usando parola chiave inherit può forzare un elemento a ereditare qualsiasi valore di proprietà del suo elemento padre. Funziona anche per le proprietà che non vengono ereditate per impostazione predefinita.

Come vengono impostati e funzionano gli stili CSS

1) Gli stili possono essere ereditati dall'elemento padre (proprietà ereditate o utilizzando il valore inherit);

2) Gli stili nel foglio di stile sottostante sovrascrivono gli stili nel foglio di stile sopra;

3) È possibile applicare uno stile a un elemento fonti diverse. Puoi controllare quali stili vengono applicati nella modalità sviluppatore del browser. Per fare ciò, fare clic sull'elemento. fare clic con il tasto destro mouse e seleziona "Visualizza codice" (o qualcosa di simile). La colonna di destra elencherà tutte le proprietà impostate per questo elemento o ereditate dall'elemento padre, nonché i file di stile in cui sono specificati, e numero di serie righe di codice.

Riso. 2. Modalità sviluppatore in browser Google Cromo

4) Quando si definisce uno stile, è possibile utilizzare qualsiasi combinazione di selettori: un selettore di elemento, una pseudo-classe di elemento, una classe o un identificatore di elemento.

div (bordo: 1px solido #eee;) #wrap (larghezza: 500px;) .box (float: left;) .clear (clear: both;)

5.2. Cascata

a cascataè un meccanismo che controlla il risultato finale in una situazione in cui diverse regole CSS vengono applicate allo stesso elemento. Esistono tre criteri che determinano l'ordine in cui vengono applicate le proprietà: la regola !important, la specificità e l'ordine in cui sono inclusi i fogli di stile.

Regola! importante

Il peso di una regola può essere impostato utilizzando la parola chiave !important, che viene aggiunta immediatamente dopo il valore della proprietà, ad esempio span (font-weight: bold!important;) . La regola va posta alla fine della dichiarazione prima della parentesi di chiusura, senza spazio. Tale dichiarazione avrà la precedenza su tutte le altre norme. Questa regola consente di annullare il valore della proprietà e di impostarne uno nuovo per un elemento di un gruppo di elementi nel caso in cui non ci sia accesso diretto al file di stile.

Specificità

Per ogni regola, il browser calcola specificità del selettore, e se l'elemento ha dichiarazioni di proprietà in conflitto, viene presa in considerazione la regola con la specificità più alta. Il valore di specificità ha quattro parti: 0, 0, 0, 0 . La specificità del selettore è definita come segue:

0, 1, 0, 0 vengono aggiunti per id;
per la classe 0, 0, 1, 0 viene aggiunto;
0, 0, 0, 1 vengono aggiunti per ogni elemento e pseudoelemento;
per uno stile in linea aggiunto direttamente a un elemento, 1, 0, 0, 0 ;
il selettore universale non ha specificità.

H1 (colore: azzurro;) /*specificità 0, 0, 0, 1*/ em (colore: argento;) /*specificità 0, 0, 0, 1*/ h1 em (colore: oro;) /*specificità: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (colore: blu;) /*specificità: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .barra laterale (colore: grigio;) /*specificità 0, 0, 1, 0 */ #barra laterale (colore: arancione;) /*specificità 0, 1, 0, 0*/ li#barra laterale (colore: acqua;) /*specificità: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Di conseguenza, quelle regole, la cui specificità è maggiore, verranno applicate all'elemento. Ad esempio, se un elemento ha due specificità con valori 0, 0, 0, 2 e 0, 1, 0, 1 , vincerà la seconda regola.

Ordine delle tabelle collegate

Puoi creare più fogli di stile esterni e collegarli alla stessa pagina web. Se dentro tabelle diverse si incontreranno significati diversi proprietà di un elemento, quindi, come risultato, la regola che si trova nel foglio di stile nell'elenco seguente verrà applicata all'elemento.