Anche prima del 1998, quando apparve la specifica CSS di livello 2, gli elementi del modulo erano già ampiamente supportati in tutti i principali browser. La specifica CSS 2 deve ancora rispondere alla domanda su come gli elementi del modulo dovrebbero essere presentati agli utenti. Poiché gli elementi del modulo fanno parte dell'interfaccia utente in ogni documento Web, gli autori delle specifiche hanno scelto di abbandonare presentazione visiva elementi del modulo html per impostazione predefinita per ogni browser.
Nel corso degli anni, la mancanza di dettagli nelle specifiche relative agli elementi del modulo ha costretto gli sviluppatori a creare un gran numero di test ed esempi, il cui compito principale era quello di portare i componenti visivi di tutti gli elementi del modulo in un aspetto cross-browser. In questo articolo ne vedremo alcuni Modelli CSS che ti permetterà di portare gli elementi della forma a un denominatore comune.
I test di Roger Johansson per lo styling degli elementi della forma
Nel 2004 e poi nel 2007, Roger Johansson ha creato suite di test personalizzate per elementi dei moduli e CSS. Da questi test è emersa una conclusione che ha sconvolto Roger:
Quindi cosa ha mostrato l'esperimento? Come ho già notato, i test hanno dimostrato che con usando i CSS non è possibile controllare gli stili del modulo per rendere gli elementi del modulo uguali su tutti i browser e le piattaforme. I test hanno anche dimostrato che la maggior parte dei browser ignora molte proprietà CSS quando vengono applicate agli elementi del modulo di stile.
Nonostante l'innegabile verità di questi risultati, gli sviluppatori web continuano a sperimentare Elementi CSS form alla ricerca del Santo Graal, o almeno un ragionevole compromesso tra il rendering predefinito del browser e lo stile nativo.
Modello di visualizzazione predefinito per gli elementi del modulo
Per impostazione predefinita, la specifica CSS 2.1 per HTML4 imposta la modalità di visualizzazione del blocco in linea per gli elementi del modulo come textarea, input e select:
Textarea, input, select (display: inline-block;)
Al contrario, gli elementi form e fieldset hanno una modalità di visualizzazione a blocchi:
Fieldset, form (display: block;)
Il modello di specifica CSS per gli elementi di stile nei moduli termina in questo passaggio. Tutti gli altri aspetti della visualizzazione degli elementi del modulo dipendono dal foglio di stile predefinito del browser. Tuttavia, le regole di cui sopra significano quanto segue:
- Gli elementi del blocco in linea possono essere stilizzati utilizzando il contesto di formattazione in linea. Ciò implica usando i CSS proprietà come line-height e vertical-align per controllare l'altezza dell'elemento e l'allineamento verticale. Le proprietà padding e margin possono essere utilizzate anche per controllare padding e padding per gli elementi del modulo. Vale la pena notare che gli elementi del blocco in linea possono anche essere controllati usando la larghezza e l'altezza, il loro comportamento a questo proposito non differisce dagli elementi di blocco ordinari.
- Gli elementi del blocco possono essere stilizzati in modo standard utilizzando il normale contesto di formattazione dei blocchi. Tuttavia, ci sono problemi con gli elementi del form fieldset e legend poiché si basano interamente sugli stili del browser stesso.
Sorge la domanda, come fanno gli sviluppatori a risolvere questi problemi?
Risolvere problemi con la dimensione degli elementi del modulo
Gli sviluppatori Web hanno presto notato che i browser gestiscono gli elementi dei blocchi in linea in un modo piuttosto strano quando si tratta di dimensionarli. Determinare l'altezza abbastanza spesso porta a risultati inaspettati:
Input, seleziona (larghezza: 120 px; altezza: 32 px;)
Gli sviluppatori hanno provato a risolvere questo problema con il blocco in linea:
Input, seleziona (larghezza: 120 px; altezza: 32 px; display: blocco;)
I risultati sono ancora scarsi ad eccezione dell'elemento textarea. Per risolvere questo problema, devi prima normalizzare il carattere e la dimensione del carattere per gli elementi del modulo:
Input, seleziona (larghezza: 120px; font: 1em Arial, sans-serif;)
Una volta installato il carattere, puoi aggiungere il rientro:
Input, seleziona (larghezza: 120px; font: 1em Arial, sans-serif; padding: 3px 6px;)
Agli elementi di input e textarea può anche essere assegnato un bordo, che influenzerà le loro dimensioni in base al box-model:
Input, input, textarea (bordo: 1px solido #ccc;)
Gli elementi tipo di ingresso pulsante e invia può avere un'imbottitura aggiuntiva aggiunta dal browser. Una pratica comune è normalizzarli:
Input, input (imbottitura: 2px;)
Il problema con questo approccio è che i browser spesso applicano i prefissi del fornitore alle proprietà degli elementi, quindi non è sempre possibile normalizzare il padding. Ad esempio, per un web-kit, puoi normalizzare in questo modo:
Input, input, input, input :: - webkit-file-upload-button, button (-webkit-box-align: center; text-align: center; cursor: default; color: buttontext; padding: 2px 6px 3px; bordo : 2px outset buttonface; border-image: iniziale; background-color: buttonface; box-sizing: border-box;) input, input, input (-webkit-aspetto: pulsante; spazio bianco: pre;)
Il padding funziona anche sugli elementi fieldset e legend, ma con risultati diversi:
- L'impostazione del padding di un fieldset su 0 ripristina il padding predefinito solo in alcuni browser (non IE)
- L'impostazione del riempimento della legenda su 0 provoca la riduzione di quell'elemento
Seleziona, checkbox, gli elementi radio possono essere normalizzati con buoni risultati solo per alcune proprietà:
- Famiglia di font
- Dimensione del font
- Larghezza (per selezionare)
- Imbottitura
L'applicazione di altre proprietà a questi elementi del modulo produce risultati incoerenti.
Allineare gli elementi nei moduli
Gli elementi del modulo possono essere allineati verticalmente e orizzontalmente. Possono trovarsi sulla stessa linea o in un gruppo. Per allinearli sulla stessa riga, puoi utilizzare float o il contesto standard inline-block.
Quando si utilizzano i float, gli elementi vengono automaticamente inseriti in un riquadro. Ciò significa che ora ci sono altre nove regole box-model che controllano questi elementi.
Con elementi galleggianti, compito principaleè ottenere un buon allineamento verticale su linea corrente... In questo caso, è pratica comune utilizzare margini verticali o padding:
Input, seleziona (larghezza: 120 px; float: left; margin-top: 0.4em;)
Questo approccio funziona quando non è necessario allineare i blocchi con il testo, ad esempio un elemento etichetta. In questo caso, puoi utilizzare il posizionamento relativo, il padding o il margine su un elemento che contiene solo testo:
Un altro problema sorge con i pulsanti. In questo caso, quando hai un pulsante più grande degli altri elementi, puoi impostare allineamento verticale utilizzando il posizionamento relativo:
Input (mobile: sinistra; larghezza: 90 px; posizione: relativa; alto: 0,4 em;)
Questo approccio di posizionamento relativo funziona anche per caselle di controllo e pulsanti di opzione. Posizionamento relativo può anche essere usato per normalizzare il padding sinistro di una legenda in un fieldset.
Se stai utilizzando elementi nel contesto della formattazione in linea, puoi utilizzare la proprietà vertical-align per l'allineamento verticale:
Etichetta, input (vertical-align: middle; margin-right: 1em;)
Bei risultati può essere ottenuto combinando questa proprietà con la proprietà line-height. Tuttavia, questa proprietà deve essere impostata sull'elemento padre. Se lo imposti direttamente sull'elemento del modulo stesso, verrà utilizzata l'altezza dell'elemento:
Riga del modulo (altezza della linea: 1,4;)
Utilizzo di una dichiarazione di altezza per elemento genitore accoppiato con la stessa altezza di linea è anche una buona pratica:
Riga del modulo (altezza della linea: 1,8; altezza: 1,8 em;)
Nel contesto della formattazione in linea, puoi usare proprietà di allineamento del testo per un elemento genitore per allineare il contenuto dell'elemento form a sinistra, al centro o a destra.
Comportamento strano degli input di file
Un elemento di input di tipo file è occasione speciale... Tale elemento dovrebbe essere sempre visibile e riconoscibile nell'interfaccia del browser per motivi di sicurezza. Ciò significa che i browser ignorano deliberatamente alcune regole di stile (come quelle relative alla visibilità) e tendono ad applicare i propri algoritmi come definito dal proprio foglio di stile predefinito.
Inoltre, alcuni browser visualizzano solo un pulsante, mentre altri aggiungono ancora un semi per il percorso del file.
Tuttavia, gli sviluppatori web hanno trovato il modo di aggirare questa limitazione. Innanzitutto, avvolgono un contenitore attorno all'elemento.
CSS (fogli di stile a cascata) o fogli di stile a cascata sono usati per descrivere aspetto esteriore documento scritto in 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 a cascata descrivono le regole per formattare gli elementi usando proprietà e valori accettabili queste proprietà. Per ogni elemento, puoi utilizzare un insieme limitato di proprietà, il resto delle proprietà non avrà alcun effetto su di esso.
Una dichiarazione di stile è composta da due parti: l'elemento della pagina web - selettore e i comandi di formattazione sono - blocco degli annunci... Il selettore dice al browser quale elemento formattare e il blocco di dichiarazione (codice tra parentesi graffe) elenca i comandi di formattazione - proprietà e i loro valori.
Riso. 1. Struttura di una 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 rappresenta file di testo css, che contiene un insieme di elementi in stile CSS. Il file viene creato in un editor di codice, proprio come una pagina HTML. Il file può contenere solo stili, nessun markup HTML. Un foglio di stile esterno è connesso a una pagina web usando il tag situato all'interno della sezione
... Questi stili funzionano per tutte le pagine del sito.È possibile allegare più fogli di stile a ciascuna pagina Web aggiungendo più tag in sequenza specificando lo scopo di questo foglio di stile nell'attributo tag media. rel = "foglio di stile" indica il tipo di collegamento (collegamento al foglio di stile).
L'attributo type = "text/css" è facoltativo nello standard HTML5 e può essere omesso. Se l'attributo è assente, 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 sono inferiori agli stili in linea (specificati utilizzando l'attributo style)....
1.3. Stili in linea
Quando scriviamo stili in linea, scriviamo il codice CSS in un file HTML, direttamente all'interno del tag dell'elemento utilizzando l'attributo style:
Presta attenzione a questo testo.
Questi stili influiscono solo sull'elemento per il quale sono specificati.
1.4. @Importa regola
@Importa regola consente di caricare fogli di stile esterni. Perché la direttiva @import funzioni, deve apparire 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 della pagina web. Sono usati per creare regole per formattare gli 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;) azzera imbottitura esterna per tutti gli elementi del sito. Inoltre, il selettore può essere utilizzato in combinazione con la pseudo-classe o pseudo-elemento: *: dopo (stili CSS), *: selezionato (stili CSS).
2.2. Selettore elemento
I selettori di elementi ti consentono di formattare tutti gli elementi di questo tipo su 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 su pagine diverse luogo. Ad esempio, per creare un titolo con la classe del titolo, aggiungi un attributo di classe con il titolo del valore al tag di apertura
e imposta lo stile per la classe specificata. Gli stili creati con la classe possono essere applicati ad altri elementi, non necessariamente di questo tipo.
Istruzioni per l'uso personal computer
.headline (trasformazione del testo: maiuscolo; colore: azzurro;)2.4. Selettore identificatore
Il selettore id ti permette di formattare uno articolo specifico. L'ID deve essere univoco e può apparire solo una volta in una pagina.
#sidebar (larghezza: 300 px; float: sinistra;)
2.5. Selettore discendente
I selettori discendenti applicano gli stili agli elementi all'interno di un elemento contenitore. Ad esempio, ul li (text-transform: maiuscolo;) selezionerà tutti gli elementi li che sono discendenti di tutti gli elementi ul.
Se vuoi formattare i discendenti di un elemento specifico, devi impostare una classe di stile per quell'elemento:
p.prima a (colore: verde;) - dato stile si applicherà a tutti i collegamenti che discendono da un paragrafo con classe prima;
p .first a (colore: verde;) - se aggiungi uno spazio, i link che si trovano all'interno di qualsiasi tag di classe .first, che è un figlio dell'elemento, verranno stilizzati
Primo a (colore: verde;) - questo stile verrà applicato a qualsiasi collegamento situato all'interno di un altro elemento designato dalla classe .first.
2.6. Selettore bambino
Un elemento figlio è un figlio diretto del suo elemento contenitore. Un elemento può avere più figli e ogni elemento può avere un solo genitore. Il selettore figlio consente di applicare gli stili solo se l'elemento figlio segue immediatamente l'elemento padre e non ci sono altri elementi tra di loro, ovvero il figlio non è più nidificato.
Ad esempio, p> strong selezionerà tutti gli elementi strong che sono figli dell'elemento p.
2.7. Selettore sorella
Nasce una relazione fraterna tra elementi con un genitore comune. I selettori di pari livello ti consentono di selezionare elementi da un gruppo di fratelli.
h1 + p - selezionerà tutti i primi paragrafi immediatamente successivi a qualsiasi tag
senza influenzare il resto dei paragrafi;
h1 ~ p - seleziona tutti i paragrafi che sono fratelli di qualsiasi intestazione h1 e subito dopo.
2.8. Selettore di attributi
I selettori di attributo selezionano gli elementi in base a un nome di attributo o a un valore di attributo:
[attributo] - tutti gli elementi che contengono l'attributo specificato - tutti gli elementi per i quali è impostato l'attributo alt;
selector [attributo] - elementi di questo tipo contenenti l'attributo specificato, img - solo immagini per le quali è impostato l'attributo alt;
selector [attributo = "valore"] - elementi di questo tipo contenenti l'attributo specificato con un valore specifico, img - tutte le immagini i cui nomi contengono la parola fiore;
selector [attributo ~ = "valore"] - elementi che contengono parzialmente dato valore, ad esempio, se vengono specificate più classi per un elemento separato da uno spazio, p - paragrafi, il cui nome di classe contiene feature;
selettore [attributo | = "valore"] - elementi la cui lista dei valori degli attributi inizia con la parola specificata, p - paragrafi il cui nome di classe è caratteristica o inizia con caratteristica;
selettore [attributo ^ = "valore"] - elementi il cui valore di attributo inizia con il valore specificato, a - tutti i collegamenti che iniziano con http: //;
selector [attributo $ = "valore"] - elementi il cui valore di attributo termina valore specificato, img - tutte le immagini in formato png;
selector [attributo * = "valore"] - elementi il cui valore di attributo contiene la parola specificata ovunque, a - tutti i collegamenti il cui nome contiene libro.
2.9. Selettore di pseudo classi
Le pseudo-classi sono classi che non sono effettivamente collegate ai tag HTML. Ti permettono di applicare le regole CSS agli elementi su evento o sottomesso una certa regola... Le pseudo-classi caratterizzano gli elementi con le seguenti proprietà:
: hover - qualsiasi elemento su cui passa il cursore del mouse;
: focus - un elemento interattivo che è stato navigato usando la tastiera o attivato usando il mouse;
: attivo - un elemento che è stato attivato dall'utente;
: valido - campi del modulo il cui contenuto è stato verificato nel browser per la conformità con il tipo di dati specificato;
: invalid - campi del modulo il cui contenuto non corrisponde al tipo di dati specificato;
: abilitato - tutti i campi del form attivi;
: disabilitato - campi modulo disabilitati, cioè in uno stato inattivo;
: in-range - campi del modulo i cui valori sono nell'intervallo specificato;
: fuori intervallo - campi del modulo i cui valori non sono inclusi nell'intervallo specificato;
: lang() - elementi con testo nella lingua specificata;
: not (selettore) - elementi che non contengono il selettore specificato - classe, identificatore, nome o tipo del campo modulo -: not ();
: target - l'elemento con il simbolo # a cui si fa riferimento nel documento;
: selezionato - elementi del modulo selezionati (selezionati dall'utente).
2.10. Selettore di pseudo-classe strutturale
Le pseudo-classi strutturali selezionano i bambini in base al parametro specificato tra parentesi:
: n-esimo figlio (dispari) - figli dispari;
: nth-child (pari) - anche bambini;
: nth-child (3n) - ogni terzo elemento tra i bambini;
: nth-child (3n + 2) - seleziona ogni terzo elemento a partire dal secondo figlio (+2);
: nth-child (n + 2) - seleziona tutti gli elementi a partire dal secondo;
: nth-child (3) - seleziona il terzo figlio;
: nth-last-child() - nella lista dei figli seleziona l'elemento con posizione specificata, simile a: nth-child(), ma partendo dall'ultimo in senso inverso;
: first-child - ti permette di applicare uno stile solo al primissimo figlio del tag;
: last-child - permette di formattare l'ultimo figlio del tag;
: figlio unico - seleziona l'elemento figlio unico;
: vuoto - seleziona gli elementi che non hanno figli;
: root - seleziona l'elemento che è la radice del documento - elemento html.
2.11. Selettore di pseudo-classi di tipo strutturale
Indica un tipo specifico di tag figlio:
: nth-of-type() - seleziona gli elementi per analogia con: nth-child(), tenendo conto solo del tipo di elemento;
: first-of-type - seleziona il primo figlio del tipo dato;
: 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 i figli dell'elemento genitore.
2.12. Selettore di pseudo elementi
Gli pseudo-elementi vengono utilizzati per aggiungere contenuto generato utilizzando la proprietà content:
: prima lettera - seleziona la prima lettera di ogni paragrafo, si applica solo agli elementi in blocco;
: first-line - seleziona la prima riga del testo dell'elemento, si applica solo agli elementi del blocco;
: prima - inserisce il contenuto generato prima dell'elemento;
: after - aggiunge il 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 parola css.
4. Raggruppamento dei selettori
Lo stesso stile può essere applicato a più elementi contemporaneamente. Per fare ciò, sul lato sinistro della dichiarazione, elenca i selettori richiesti separati da virgole:
H1, h2, p, span (colore: pomodoro; sfondo: bianco;)
5. Eredità e cascata
Ereditarietà e cascata sono due concetti fondamentali nei CSS che sono 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 sovrascrivono a vicenda.
5.1. Eredità
Ereditàè il meccanismo mediante il quale determinate proprietà vengono trasmesse da un antenato ai suoi discendenti. La specifica CSS prevede l'ereditarietà delle proprietà relative al contenuto del testo di una pagina, come colore, carattere, spaziatura tra lettere, altezza della riga, stile elenco, allineamento del testo, rientro del testo, trasformazione del testo, visibilità, bianco -spazio e spaziatura tra le parole. Questo è utile in molti casi perché non è necessario impostare la dimensione e la famiglia del carattere per ogni elemento della pagina web.
Le proprietà di formattazione dei blocchi non vengono ereditate. Questi sono sfondo, bordo, visualizzazione, float e clear, altezza e larghezza, margine, altezza e larghezza min-max, contorno, overflow, padding, posizione, decorazione del testo, allineamento verticale e z-index.
Eredità forzata
attraverso parola chiave inherit È possibile forzare un elemento ad ereditare qualsiasi valore di proprietà dall'elemento padre. Funziona anche per le proprietà che non sono ereditate per impostazione predefinita.
Come sono impostati e funzionano gli stili CSS
1) Gli stili possono essere ereditati dall'elemento genitore (proprietà ereditate o utilizzando il valore ereditato);
2) Gli stili che si trovano nel foglio di stile sotto sovrascrivono gli stili che si trovano nella tabella sopra;
3) Un elemento può essere stilizzato da diverse fonti... Puoi controllare quali stili vengono applicati nella modalità sviluppatore del browser. Per fare ciò, fare clic sopra l'elemento. clic 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 specificate e numero di serie righe di codice.
Riso. 2. Modalità sviluppatore in Browser di Google Cromo 4) Quando si definisce uno stile, è possibile utilizzare qualsiasi combinazione di selettori: selettore di elemento, pseudo-classe di elemento, identificatore di classe o elemento.
div (border: 1px solid #eee;) #wrap (width: 500px;) .box (float: left;) .clear (clear: entrambi;)
5.2. Cascata
cascataÈ un meccanismo che controlla il risultato finale quando vengono applicate diverse regole CSS allo stesso elemento. Esistono tre criteri che determinano l'ordine in cui vengono applicate le proprietà: la regola Importante, la specificità e l'ordine in cui sono inclusi i fogli di stile.
La regola importante
Il peso della regola può essere impostato utilizzando la parola chiave!Importante, che viene aggiunta immediatamente dopo il valore della proprietà, ad esempio span (spessore font: grassetto!Importante;). La regola va posta alla fine della dichiarazione, prima della parentesi chiusa, senza spazi. Tale annuncio avrà la precedenza su tutte le altre regole. Questa regola ti consente di cancellare il valore della proprietà e impostarne uno nuovo per un elemento da un gruppo di elementi nel caso in cui non ci sia accesso diretto al file con gli stili.
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 maggiore specificità. Il valore di specificità ha quattro parti: 0, 0, 0, 0. La specificità di un selettore è determinata come segue:
per id, aggiungi 0, 1, 0, 0;
0, 0, 1, 0 viene aggiunto per la classe;
0, 0, 0, 1 viene aggiunto per ogni elemento e pseudo-elemento;
per lo 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 * / .sidebar (colore: grigio;) / * specificità 0, 0, 1, 0 * / #sidebar (colore: arancione;) / * specificità 0, 1, 0, 0 * / li # sidebar (colore: aqua;) / * specificità: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1 * /
Di conseguenza, tali regole verranno applicate all'elemento la cui specificità è maggiore. Ad esempio, se un elemento ha due specificità con valori 0, 0, 0, 2 e 0, 1, 0, 1, vince la seconda regola.
L'ordine delle tabelle allegate
Puoi creare più fogli di stile esterni e collegarli a una pagina web. Se in tavoli diversi si incontreranno significati diversi proprietà di un elemento, di conseguenza verrà applicata all'elemento la regola trovata nel foglio di stile nell'elenco sottostante.
CSS sta per Cascading Style Sheets, che significa Cascading Style Sheets. Usato per decorare le pagine web. Se HTML contiene contenuto (cosa mostrerà il browser), allora CSS determina il suo aspetto (come il browser lo mostrerà). La bellezza dei CSS è che con l'aiuto di uno stile puoi progettare tutti gli elementi dello stesso tipo di una pagina o di un intero sito contemporaneamente (tutti i collegamenti, i paragrafi, gli elenchi contemporaneamente). Con uno stile CSS, definisci una volta come dovrebbe apparire un particolare elemento, ad esempio le immagini, e cambiano il loro aspetto in tutti i documenti contemporaneamente. Per modificare la formattazione del testo in tutto il tuo sito, devi modificare il codice CSS solo una volta.
Elementi CSS di base
Proprio come l'HTML è composto da tag, attributi e valori, così il CSS è composto da sé propri elementi... L'essenza dei costrutti CSS può essere spiegata come segue: "Indica a quale elemento della pagina applicare lo stile e indica come modificarlo". Ecco i costrutti CSS costitutivi.
- Selettore... Un identificatore che indica al browser a quale elemento della pagina applicare il design. Grazie ad esso, il browser "capisce" che lo stile è destinato, ad esempio, a decorare elenchi o tabelle.
- Blocco dichiarazione di stile... È scritto dopo il selettore ed è composto da bretelle... Imposta lo stile dell'elemento (il suo design). Il blocco della dichiarazione di stile è composto da due parti.
- Proprietà... Analogo di un attributo in HTML. Determina quale particolare proprietà di stile verrà modificata.
- Senso... È impostato sulla proprietà, separato da due punti, e determina esattamente come verrà modificata la proprietà.
Possono esserci diverse proprietà e valori nel blocco della dichiarazione di stile, nel qual caso sono elencati separati da punto e virgola.
Tipi di selettore
Esistono diversi tipi di selettori a seconda delle proprietà degli elementi della pagina che definiscono.
- universale... Imposta le regole per tutti gli elementi della pagina per i quali non sono impostate altre regole.
Il codice * (dimensione carattere: 14px;) imposta la dimensione del carattere a 14 pixel per tutti gli elementi del documento per i quali non sono state specificate altre regole utilizzando altri selettori. - Tega. Questo tipo di selettore specifica le regole di formattazione per il contenuto di un tag HTML specifico. Il nome del selettore è lo stesso del nome del descrittore, solo che è scritto senza parentesi angolari: P, h1, ul.
Ad esempio il codice h2 (colore rosso;) imposta colore verde testo per tutte le intestazioni di secondo livello, ovvero il contenuto dei tag . - attributi... Con questo gruppo di selettori, puoi definire lo stile del contenuto di tutti i tag a cui è assegnato un attributo specifico. I selettori possono essere specificati in modo più preciso specificando non solo il nome dell'attributo, ma anche il valore ad esso assegnato, nonché il nome del tag che lo contiene. Questo può essere utilizzato per personalizzare il design.
- Classe... Una sorta di selettori nel caso in cui sia necessario modellare il contenuto di tag dello stesso tipo in modi diversi. Ad esempio, vuoi rendere rossi i collegamenti nella parte inferiore del sito, mentre tutti gli altri dovrebbero rimanere blu, così com'erano. Per applicare le regole di classe a un elemento del sito, è necessario specificare il nome della classe nell'attributo classe etichetta corrispondente.
Supponiamo di usare la classe fare un passo singoli elementiè necessario impostare il rientro sinistro su 15 pixel.
Il codice CSS sarà così:
Passaggio (margine sinistro: 15 px;)
Il codice HTML che legherà l'elemento alla regola sarà il seguente:
Testo rientrato
- ID... Usato insieme all'attributo ID Tag HTML e viene utilizzato quando le proprietà devono essere impostate su un singolo elemento. A differenza di un selettore di classe, che è preceduto da un punto, è scritto tramite un cancelletto:
#exclusive (colore: arancione;)
- Contestuale... In HTML, alcuni tag si trovano spesso all'interno di altri e i selettori contestuali ti aiutano a definire le regole proprio per questo caso. Usandoli, ad esempio, puoi formattare elementi all'interno di elenchi numerati o testo in corsivo all'interno di paragrafi:
P i (famiglia fint: Secolo;)
Il resto dei gruppi di selettori si basa sulla combinazione dei tipi elencati, nonché sul principio di ereditarietà, quando l'elemento figlio assume le proprietà del genitore.
La combinazione e il raggruppamento dei selettori è utile in molte situazioni. Ad esempio, per definire le regole di classe fare un passo solo per i link è necessario specificare entrambi i selettori separati da un punto (prima il tag, poi la classe):
A.step (margine sinistro: 15px;)
Come collego CSS a una pagina HTML?
Esistono diversi modi per far interagire gli strumenti di creazione di siti Web tra loro. Gli stili sono suddivisi nelle seguenti categorie in base al metodo di aggiunta.
Stili in linea
Sono impostati nel documento direttamente all'interno del tag HTML utilizzando l'attributo stile... Avere la massima priorità. Ciò significa che se per lo stesso elemento è dato design diverso, quindi verrà data la preferenza alla regola che è scritta all'interno del tag. Il selettore per lo stile in linea non è necessario, poiché la relazione tra lo stile e il tag è ovvia: il design del tag è impostato in esso.
Il codice seguente imposta la dimensione e il colore del carattere per il testo all'interno del tag.
Testo in stile interno.
Stili globali
Definito dal tag …