Selettore CSS e il suo ruolo nella formattazione di documenti html

Creare il tuo sito e riempirlo con certezzaelementi di una pagina web, tutti si troveranno ad affrontare un termine come il CSS-selettore. Serve a stabilire con maggiore precisione tutti gli elementi del file HTML del loro design e la posizione sulla pagina. Per fare questo, creare un CSS-un documento che enuncia alcuni selettori e le loro opzioni di formattazione: colore, dimensione, posizione e altri. Ogni web designer dovrebbe conoscere ed essere in grado di inserire correttamente i selettori desiderati. Sono divisi in tipi, i principali dei quali considereremo di seguito.

Tipi di selettori in CSS

A seconda dell'elemento html a cui è applicata la formattazione, il selettore CSS può fare riferimento a uno dei seguenti gruppi:

il selettore di tag;
selettore di classe;
id-selettore;
selettore di attributi.

Selettore Tag

Viene anche chiamato "selettore di tipi" o "dielemento, "è il più semplice e il più comune, come il nome degli elementi del file html che descriviamo in esso, per esempio, se abbiamo bisogno di specificare uno stile di paragrafo, specifichiamo le proprietà ed i loro valori per il p { sfondo: x; colore: y; dimensione: z}. In questo caso, tutti i paragrafi della pagina Web avranno la stessa formattazione (colore di sfondo, testo, dimensioni, ecc.).

Selettore di classe

E se fosse necessario impostare un proprio stile diverso per gli altri per ogni paragrafo? Per questo, c'è un selettore di classe.

Il documento CSS in questo caso conterrà la seguente voce: p.first {color: x; font-size: y}. Pertanto, impostiamo le proprietà "color" e "size" solo per il paragrafo di classe prima.

Nel documento html in questo caso, si inserisce per primo l'attributo class con il nome dello stile. Le classi possono essere tante quante sono gli stili che vuoi applicare agli elementi di una pagina web.

Selettore per id

Spesso è necessario definire uno stileancora più esattamente, ad esempio, a un singolo elemento della pagina o al loro campione. In questa situazione, l'id-selector viene in soccorso. Nel file html, assegniamo il nome all'elemento desiderato, identificandolo tra gli altri. Ad esempio, l'elemento che vogliamo impostare diverso dall'altro stile sarà il titolo dell'articolo.

Quindi nel documento html assegniamo l'intestazione h1id, ad esempio articlename. E nel file CSS, imposta lo stile aggiungendo un reticolo prima del nome dell'identificatore: #articlename {color: blue; allineamento del testo: centro}. Ora il nostro titolo avrà un colore blu e un allineamento al centro.

Ognuno di questi tipi può essere chiamato"semplice selettore CSS". Essi definiscono la formattazione di un particolare parametro del documento HTML: elementi insieme simili (ad esempio, tutti i paragrafi di questo articolo), una classe (ad esempio, solo il primo paragrafo) o un elemento specifico (ad esempio, il titolo dell'articolo).

Selettore di attributi

Oltre a quanto sopra, ci sono i selettori CSSgli attributi sono un modo più complesso di applicare gli stili. Permette di formattare gli elementi HTML dall'attributo selezionato o dal suo valore. Esistono diverse varietà di questo selettore:

dalla presenza di un attributo;
dal suo valore esatto;
per valore di attributo parziale;
dal suo significato specifico.

Consideriamo in dettaglio ciascuna di queste varietà:

Il primo caso. La formattazione è usata se c'è un attributo specifico nel codice html (possono essere p, div, header e altri). Se manca, viene utilizzato uno stile universale per tutti gli elementi. Ad esempio, per gli articoli che hanno un titolo (un suggerimento).
Il secondo caso Lo stile è applicato solo a quegli elementi HTML che hanno corrispondenze esatte dei valori degli attributi. Ad esempio, a quegli elementi di input il cui valore dell'attributo type è uguale a submit.
Il terzo caso La formattazione è limitata agli elementi con una parola specifica nell'elenco dei valori. Ad esempio, sideBar nell'attributo "class" degli elementi div.
Il quarto caso. Lo stile è specificato solo per quegli elementi del documento html, per i quali un determinato attributo ha un determinato valore e inizia con esso. Ad esempio, applicando il colore specificato a tutti gli elementi la cui lingua di attributi è l'inglese (questo può essere en, en-rus, en-au, ecc.).

Pertanto, utilizzando un particolare selettore CSS, è possibile progettare al meglio l'intera pagina Web e descriverne i singoli elementi.