892 Shares 7353 views

CSS-selettore, e il suo ruolo nella formattazione HTML-documento

Creazione di un sito web e lo riempie di alcuni elementi della 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 entrare correttamente le selezioni desiderate. Essi sono divisi per tipo, il principale dei quali vedremo di seguito.

Tipi di selettori nei CSS

Seconda a cui l'elemento è applicato in formato HTML, CSS-selettore può riguardare uno dei seguenti gruppi:

  • selettore di tag;
  • selettore di classe;
  • id-selettore;
  • attributo selettore.

selettore di tag

È anche chiamato "selettore di tipo" o "elemento", è il più semplice e comune. Come il suo CSS-documento sono i nomi degli elementi del file HTML, che descriveremo. Per esempio, se abbiamo bisogno di impostare lo stile di paragrafo, specifichiamo le proprietà ei relativi valori per l'elemento p {background: x; colore: y; Dimensioni: z}. In questo caso, tutti i paragrafi della pagina web avranno lo stesso formato (colore di sfondo, la dimensione del testo, e così via. D.).

selettore di classe

E se avete bisogno di chiedere il vostro ogni punto è diverso da altri stili? Per fare questo, v'è un selettore di classe.

CSS-documento in questo caso sarebbe contenere una voce della forma seguente: p.first {color: x; font-size: y}. Così, si definiscono le proprietà di "colore" e "formato" solo per il paragrafo di prima classe.

In un documento HTML, in questo caso è entrato un attributo di classe per il nome dello stile prima. Le classi possono essere tanto quanto lo stile che si desidera applicare per una pagina web elementi.

selettore di ID

Spesso v'è la necessità di definire uno stile più accurato, ad esempio per qualsiasi elemento della pagina, o per assaggiare loro. In questa situazione, l'aiuto viene id-selettore. Il file HTML assegnare un nome voce desiderata che lo identifica tra gli altri. Ad esempio, gli elementi che vogliamo impostare diverso da altro stile sarà il titolo dell'articolo.

Poi, in un documento HTML di assegnare l'identificatore h1 intestazione, quali articlename. E nel CSS-file, specificare lo stile, aggiungendo al nome ID calandra: #articlename {color: blue; text-align: center}. Ora il nostro titolo avrà il colore blu e centrato.

Ciascuno dei tipi di cui sopra può essere descritto come "un semplice CSS-selettore". 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).

selettori di attributo

In aggiunta a quanto sopra, v'è un CSS-selettori attributi – il metodo più complicato di stili di applicazione. Permette elementi formato HTML sul attributo o valore selezionato. Ci sono diverse varietà di questo selettore:

  • dalla presenza dell'attributo;
  • al suo valore esatto;
  • dal valore dell'attributo parziale;
  • sul suo valore specifico.

Consideriamo ciascuna di queste specie:

  1. Il primo caso. Formattazione viene applicata, se presenti in un attributo specifico codice html (può essere un p, div, intestazione, ecc). Se non lo è, si utilizza un generico per tutti gli elementi di stile. Ad esempio, per gli elementi che hanno il titolo (punta dell'utensile).
  2. Il secondo caso. Lo stile si applica solo agli elementi HTML che hanno una corrispondenza esatta dei valori degli attributi. Ad esempio, per immettere l'elementi, dove il valore dell'attributo tipo uguale presentare.
  3. Il terzo caso. Sotto il formato include solo gli elementi nell'elenco dei valori che ha una certa parola. Ad esempio, sideBar attributo "class" per gli elementi div.
  4. Il quarto caso. Stile è definito solo per gli elementi del documento HTML, il cui attributo particolare ha un certo valore, e inizia con lui. Ad esempio, l'uso del colore specificato a tutti gli elementi che l'attributo di lingua inglese (che può essere en, en-rus, en-au e t. D.).

Quindi, utilizzando uno o l'altro, il selettore CSS, può essere meglio specificata come un'intera pagina web, e descrivere alcuni dei suoi elementi.