Aquest article presenta un tema interessant i important conegut com Selectors i el segueix amb una demostració pràctica de suport. En aquest article es tractaran les següents indicacions,
- Dissenyar elements HTML
- Selectors CSS
- Selector d'identificació CSS
- Selector de classes CSS
- Selector universal CSS
- Selectors de grups CSS
Comencem doncs,
Dissenyar elements HTML
Anem a entendre què és CSS abans d’arribar als selectors CSS. Si s'ha de considerar HTML com a esquelet, aleshores CSS (Cascading Style Sheets) és com els músculs i la pell. El cervell és JavaScript. Per tant, per a una pàgina web, els estils CSS són essencialment el disseny i el disseny. Des del posicionament de les imatges i del text fins a la mida de la font i el color de fons, CSS controla l'aspecte dels elements HTML en un navegador.
Podeu entendre millor CSS si teniu una bona comprensió del que són els selectors CSS. Aquests selectors us permeten orientar elements HTML específics perquè els hi pugueu aplicar l’estil adequat.
Entenguem com podem seleccionar elements HTML,
Com seleccionar elements?
Per exemple, voleu que un títol determinat tingui un estil diferent de la resta de contingut d'una pàgina web. Ara, mitjançant els selectors CSS podeu orientar aquest element HTML a un estil diferent. Els selectors CSS ajuden a definir els elements per als quals s'aplica un determinat conjunt de regles CSS. Hi ha diversos tipus de selectors CSS que us permeten escollir amb precisió els elements que voleu estilitzar. Podeu donar a la pàgina web sencera un estil general i, a continuació, treballar per donar estil a altres elements de la pàgina.
Els selectors formen part d'una regla CSS i aquests selectors vénen just abans de la declaració dels blocs CSS. Per a una millor comprensió, podeu consultar la imatge següent.
Continuant amb l'article CSS Selectors
Selectors CSS
Aquest selector us permet seleccionar un element HTML pel seu nom.
Penseu en el codi següent:
p {text-align: centre color: magenta}Aquest estil s'aplicarà a tots els paràgrafs.
Paràgraf 1
Paràgraf 2
Aquest codi us proporcionarà la següent sortida:
Aquest estil s'aplicarà a tots els paràgrafs
Paràgraf 1
Paràgraf 2
Al codi anterior, els elements HTML han estat alineats al centre i tenen el color 'magenta'.
Continuant amb l'article CSS Selectors
Selector d'identificació CSS
Si seleccioneu l'atribut id d'un element HTML, podeu seleccionar aquest element específic. Com que l'identificador és exclusiu d'una pàgina, podeu seleccionar l'element adequat mitjançant l'atribut id.
Podeu seleccionar l'element HTML mitjançant '#' seguit de l'identificador d'aquest element. Per exemple, '#firstname' selecciona l'element on l'identificador és 'firstname'.
Penseu en el codi següent:
# para1 {text-align: color central: taronja}Hola món
Aquest paràgraf no es veurà afectat.
La sortida del codi anterior és:
Hola món
Aquest paràgraf no es veurà afectat.
Com podeu veure a la sortida anterior, incloent id = 'para1', hem pogut canviar el color d'aquest element a taronja. L’altre element que no té això no es veu afectat.
Continuant amb l'article CSS Selectors
Selector de classes CSS
Mitjançant el selector de classes, podeu seleccionar elements HTML que tinguin un atribut de classe específic. Podeu definir el selector mitjançant un punt (símbol de punt) seguit del nom de la classe. Per exemple, .intro selecciona els elements on la classe és 'intro'. Una cosa que cal tenir en compte és que mai no es pot començar un nom de classe amb un número.
Penseu en el codi següent:
.center {text-align: center color: pink}Aquest encapçalament és de color rosa i està alineat al centre.
Aquest paràgraf és de color rosa i està alineat al centre.
La sortida del codi anterior és:
Aquest encapçalament és de color rosa i està alineat al centre.
Aquest paràgraf és de color rosa i està alineat al centre.
Podeu utilitzar selectors de classes CSS per a un element específic. Si voleu que només s’estili un element específic, podeu utilitzar el nom de l’element juntament amb el selector de classes.
c ++ sort ()
Per exemple, tingueu en compte el codi següent:
p.center {text-align: color central: rosa}Aquest encapçalament no es veu afectat
Aquest paràgraf és de color rosa i està alineat al centre.
La sortida del codi anterior és:
Aquest encapçalament no es veu afectat
Aquest paràgraf és de color rosa i està alineat al centre.
Com podeu veure a la sortida, l'estil no afecta l'encapçalament h2. Com que hem especificat 'p.center', l'estil només afecta el paràgraf.
Seguint amb aquest article de CSS Selectors,
Selector universal CSS
Aquest tipus de selector es pot considerar com un caràcter comodí que selecciona tots els elements de la pàgina. Selecciona tots els elements de la pàgina i s’especifica amb “*”.
Per exemple, tingueu en compte el codi següent:
* {color: font de color verd fosc: 30 px)Aquesta és una prova (tipus de lletra més petit)
Aquest és un paràgraf.
La sortida del codi anterior és:
Hola món
Aquesta és una prova (tipus de lletra més petit)
Aquest és un paràgraf.
Com podeu veure a la sortida, tots els elements que es defineixen mitjançant el selector de grups tenen la mateixa definició d'estil: estan alineats al centre i el color de la font és cian.
Això ens porta al final d’aquest article.
Consulteu el nostre que inclou formació en viu dirigida per un instructor i experiència en projectes reals. Aquesta formació us permet dominar les habilitats necessàries per treballar amb tecnologies web front-end i front-end. Inclou formació sobre desenvolupament web, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Tens alguna pregunta? Si us plau, mencioneu-lo a la secció de comentaris de l’article i us respondrem.