Selector de CSS i el seu paper en el format de documents html

En crear el vostre lloc i omplir-lo amb certs elements d'una pàgina web, tothom certament trobarà un concepte com ara un selector CSS. Serveix per determinar amb precisió tots els elements del fitxer html, el seu disseny i el lloc a la pàgina. Per fer-ho, creeu un document CSS que prescrigui aquests o altres selectors i paràmetres per al seu format: color, mida, posició i altres. Tot dissenyador web hauria de saber i poder introduir correctament els selectors desitjats. Estan dividits per tipus, els principals que anem a considerar a continuació.

Tipus de selectors en CSS

Segons quin element HTML s'apliqui el format, el selector CSS pot fer referència a un dels següents grups:

• El selector d'etiquetes;
• Selector de classe;
• Selector d'identificadors;
• Selector d'atributs.

Etiqueta del selector

També s'anomena "selector de tipus" o "per element", és el més simple i més comú. Com el seu nom en el document CSS són els noms d'aquests elements del fitxer html que descriurem. Per exemple, si necessitem especificar un estil de paràgraf, s'especifiquen les propietats i els seus valors per a la p {background: x; Color: i; Mida: z}. En aquest cas, tots els paràgrafs de la pàgina web tindran el mateix format (color de fons, text, mida, etc.).

Selector de classe

I què passa si heu d'establir el vostre estil diferent per als altres per a cada paràgraf? Per a això, hi ha un selector de classe.

El document CSS en aquest cas contindrà la següent entrada: p.first {color: x; Mida del tipus de lletra: i}. D'aquesta manera, fixem primer les propietats "color" i "mida" per al paràgraf de la classe.

En el document html en aquest cas, primer s'introdueix l'atribut class amb el nom de l'estil. Les classes poden ser tants com els estils que voleu aplicar als elements d'una pàgina web.

Selector per id

Sovint és necessari definir l'estil amb més precisió, per exemple, a un únic element de la pàgina o a la seva mostra. En aquesta situació, el selector d'identitats arriba al rescat. En el fitxer html, assignem el nom a l'element desitjat, identificant-lo entre els altres. Per exemple, l'element que volem diferenciar de l'altre estil serà el títol de l'article.

A continuació, en el document html, assignem l'identificador h1 a l'encapçalament, per exemple nom de l'article. I al fitxer CSS, estableixi l'estil afegint una retícula abans del nom de l'identificador: #articlename {color: blue; Alinear text: centre}. Ara, el nostre encapçalament tindrà el color blau i l'alineació central.

Cadascun dels tipus anteriors es pot anomenar "selector CSS senzill". Defineixen el format d'un paràmetre particular d'un document HTML: una col · lecció d'elements similars (per exemple, tots els paràgrafs d'un article), una classe (per exemple, només el primer paràgraf) o un element específic (per exemple, el títol d'un article).

Selector d'atributs

A més de l'anterior, hi ha selectors d'atributs CSS: una forma més complexa d'aplicar els estils. Permet formatar elements HTML mitjançant l'atribut seleccionat o el seu valor. Hi ha diverses varietats d'aquest selector:

• Per la presència d'un atribut;
• Pel seu valor precís;
• Per valor d'atribut parcial;
• Pel seu significat específic.

Anem a considerar en detall cadascuna d'aquestes varietats:

1. El primer cas. El format s'utilitza si hi ha un atribut específic al codi html (poden ser p, div, encapçalament, etc.). Si falta, s'utilitza un estil universal per a tots els elements. Per exemple, per als elements que tenen un títol (una informació sobre l'eina).
2. El segon cas. L'estil s'aplica només a aquells elements HTML que tenen coincidències exactes dels valors de l'atribut. Per exemple, a aquells elements d'entrada el valor de l'atribut tipus és igual a enviar.
3. El tercer cas. El format està restringit a elements amb una paraula específica a la llista de valors. Per exemple, sideBar en l'atribut "class" dels elements div.
4. El quart cas. L'estil només s'especifica per a aquells elements del document html, per als quals un determinat atribut té un valor determinat i comença amb ell. Per exemple, l'aplicació del color especificat a tots els elements del qual el llenguatge dels atributs és anglès (això pot ser en, en-rus, en-au, etc.).

D'aquesta manera, mitjançant un selector CSS particular, podeu dissenyar millor la pàgina web sencera i descriure els elements individuals.