El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem sobre els selectors bàsics de CSS, que són fonamentals per aplicar estils als elements HTML. Els selectors ens permeten seleccionar elements específics dins del document HTML per aplicar-hi estils.

Continguts

Selector d'etiqueta
Selector de classe
Selector d'identificador
Selector universal
Selector de descendència
Selector de grup
Exercicis pràctics
Conclusió

Selector d'etiqueta

El selector d'etiqueta aplica estils a totes les instàncies d'una etiqueta HTML específica. Per exemple, si vols aplicar un estil a tots els paràgrafs (<p>), utilitzaries el selector d'etiqueta.

p {
    color: blue;
    font-size: 16px;
}

Aquest codi CSS farà que tot el text dins de les etiquetes <p> sigui blau i tingui una mida de 16 píxels.

Selector de classe

El selector de classe aplica estils a tots els elements que tenen una classe específica. Les classes es defineixen amb un punt (.) seguit del nom de la classe.

<p class="important">Aquest és un paràgraf important.</p>
<p class="important">Aquest també és un paràgraf important.</p>

.important {
    color: red;
    font-weight: bold;
}

Aquest codi CSS farà que tot el text dins dels elements amb la classe important sigui vermell i en negreta.

Selector d'identificador

El selector d'identificador aplica estils a un element únic que té un identificador específic. Els identificadors es defineixen amb un coixinet (#) seguit del nom de l'identificador.

<p id="unique">Aquest és un paràgraf únic.</p>

#unique {
    color: green;
    font-style: italic;
}

Aquest codi CSS farà que el text dins de l'element amb l'identificador unique sigui verd i en cursiva.

Selector universal

El selector universal aplica estils a tots els elements del document. Es defineix amb un asterisc (*).

* {
    margin: 0;
    padding: 0;
}

Aquest codi CSS eliminarà tots els marges i els farcits de tots els elements del document.

Selector de descendència

El selector de descendència aplica estils als elements que són descendents d'un altre element específic.

<div class="container">
    <p>Aquest paràgraf està dins d'un div.</p>
    <p>Aquest també està dins d'un div.</p>
</div>

.container p {
    color: purple;
}

Aquest codi CSS farà que tot el text dins dels paràgrafs que són descendents de l'element amb la classe container sigui de color porpra.

Selector de grup

El selector de grup aplica els mateixos estils a múltiples elements. Els selectors es separen amb una coma (,).

h1, h2, h3 {
    color: navy;
    text-align: center;
}

Aquest codi CSS farà que tot el text dins de les etiquetes <h1>, <h2> i <h3> sigui de color blau marí i estigui centrat.

Exercicis pràctics

Exercici 1: Aplica un estil de color blau a tots els encapçalaments (<h1>, <h2>, etc.) del document.

h1, h2, h3, h4, h5, h6 {
    color: blue;
}

Exercici 2: Crea una classe highlight que faci que el text sigui groc i en negreta. Aplica aquesta classe a diversos paràgrafs.

<p class="highlight">Aquest paràgraf està destacat.</p>
<p class="highlight">Aquest també està destacat.</p>

.highlight {
    color: yellow;
    font-weight: bold;
}

Exercici 3: Aplica un estil de fons gris a tots els elements dins d'un div amb la classe box.

<div class="box">
    <p>Aquest paràgraf està dins d'un div amb classe box.</p>
    <p>Aquest també està dins d'un div amb classe box.</p>
</div>

.box * {
    background-color: grey;
}

Conclusió

En aquesta secció, hem après sobre els selectors bàsics de CSS, incloent-hi els selectors d'etiqueta, classe, identificador, universal, de descendència i de grup. Aquests selectors són fonamentals per aplicar estils als elements HTML i són la base per a qualsevol full d'estil CSS. Amb aquests coneixements, estàs preparat per començar a estilitzar els teus documents HTML de manera efectiva.

Selectors bàsics de CSS

Continguts

Selector d'etiqueta

Selector de classe

Selector d'identificador

Selector universal

Selector de descendència

Selector de grup

Exercicis pràctics

Conclusió

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet