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

Creazione di un sito web e lo riempie di alcuni elementi di una pagina web, tutti si troveranno ad affrontare un termine come CSS-selettore.Serve per determinare più esattamente tutti gli elementi di HTML file del loro design e la posizione sulla pagina.Per fare questo, creare un CSS-un documento che enuncia alcuni selettori e le relative opzioni di formattazione: colore, dimensione, posizione, e altri.Ogni web designer deve conoscere ed essere in grado di entrare correttamente le date di selettori.Essi sono divisi per tipo, il cui principale vedremo di seguito.

Tipi selettori nei CSS

In base a quanto html-elemento si applica la formattazione, CSS selettore possono riferirsi a uno dei seguenti gruppi:

  • tag di selezione;
  • selettore di classe;
  • id-selezionatore;Attributi del
  • .

selettore di tag

E 'chiamata anche "selettore di tipo" e "a voce", è la più semplice e comune.Come il suo CSS-documento sono i nomi degli elementi file HTML che descriviamo.Per esempio, se abbiamo bisogno di impostare lo stile di paragrafo, specifichiamo le proprietà ei loro valori per l'elemento p {background: x;colore: y;formato: z}.In questo caso, tutte le pagine web paragrafi avrà lo stesso formato (colore di sfondo, la dimensione del testo e così via. D.).Selettore di classe

Ma cosa succede se avete bisogno di chiedere il vostro ogni punto è diverso da altri stili?A questo scopo vi è un selettore di classe.

CSS-documento in questo caso, conterrà una voce simile alla seguente: p.first {color: x;font-size: y}.Così, si definiscono le proprietà di "colore" e "formato" solo per un punto di prima classe.

in html-documento in questo caso, inserire l'attributo class per il nome dello stile prima.Le classi possono essere tanto quanto lo stile che si desidera applicare per gli elementi della pagina web.

selettore id

Spesso vi è la necessità di definire lo stile, più precisamente, per esempio, a qualsivoglia elemento di una pagina o in loro campione.In questa situazione, l'aiuto viene id-selettore.Il file html assegnare un nome voce desiderata che lo identifica tra gli altri.Ad esempio, l'elemento che vogliamo impostare uno stile diverso dagli altri, la volontà articolo titolo.

Poi assegnare html-documento identificativo intestazione h1, tale articlename.E nel CSS-file per impostare lo stile, aggiungendo alla griglia di nome identificativo: #articlename {color: blue;text-align: center}.Ora il nostro titolo sarà il colore blu e centrato.

Ognuno dei tipi di cui sopra può essere chiamato "un semplice CSS-selettore."Essi definiscono la formattazione di un particolare parametro html-documento: elementi insieme simili (per esempio, tutti i paragrafi di questo articolo), una classe (ad esempio, solo il primo paragrafo) o un elemento specifico (per esempio, il titolo di questo articolo).Selettore

attributi

aggiunta a quanto sopra, ci sono CSS-in selettori di attributo - un modo più sofisticato per utilizzare gli stili.Permette elementi di formattazione HTML di un attributo o valore selezionato.Ci sono diverse varietà di questo selettore:

  • dalla presenza di un attributo;
  • sul suo valore esatto;
  • sul valore di attributo parziale;
  • del suo valore particolare.

Consideriamo ciascuna di queste varietà:

  1. primo caso.Formattazione viene applicata se vi è un attributo specifico in html-code (può essere p, div, intestazione, ecc).Se non lo è, si utilizza un generico per tutti gli elementi dello stile.Ad esempio, gli elementi aventi il ​​titolo (tooltip).
  2. secondo caso.Lo stile è valida solo per gli elementi HTML che sono una esatta corrispondenza valori degli attributi.Ad esempio, per quegli elementi di ingresso, in cui il valore del tipo di attributo uguale a presentare.
  3. terzo caso.Sotto il formato includerà solo elementi della lista dei valori che ha una certa parola.Ad esempio, l'attributo sideBar "classe" negli elementi div.
  4. quarto caso.Style è definito solo per quegli elementi documento HTML in cui un attributo particolare, ha un certo valore, e inizia con lui.Ad esempio, l'uso del colore specificato per tutti gli elementi, attributi che la lingua inglese (può essere en, en-rus, en-au ecc. D.).

Quindi, utilizzando uno o l'altro CSS-selettore può essere meglio posizionato in una pagina web intera, e descrivere alcuni dei suoi elementi.