Regles CSS: Estructura i Funcionament

1. Estructura d’una regla CSS

Un conjunt de regles CSS està format per un selector i un bloc de declaració.

selector {
    propietat: valor;
}

alt text

Selector: Apunta a l’etiqueta o elements HTML als quals volem aplicar un estil.
Bloc de declaració: Conté una o més declaracions CSS, separades per punt i coma (;).
- Declaració: Cada declaració especifica una propietat CSS i el seu valor, separats per dos punts (:).
- Blocs de declaració: Es delimiten amb claus ({}).

Exemple bàsic

h1 {
    font-family: Arial;
    font-weight: bold;
    color: #FF0000; /* Roig */
    background-color: #00FF00; /* Verd */
}

L’anterior regla:

Estilitza tots els elements <h1>:
- Canvia la font a Arial.
- Posa el text en negreta.
- Pinta el text de color roig.
- Estableix un fons verd darrere del text.

2. Herència en CSS

La “C” de CSS significa Cascading, que indica que els estils poden ser heretats pels elements fill. Es a dir, les propietats aplicades a un element també poden afectar els seus elements descendents.

Exemple d’herència:

h1, h2 {
    font-family: Arial;
    font-weight: bold;
    color: #FF0000; /* Vermell */
    background-color: #00FF00; /* Verd */
}

h2 {
    font-style: italic;
}

Com funciona?

Els elements <h1> i <h2> hereten les propietats comunes definides a la primera regla.
L’element <h2> tindrà, a més, un estil de font cursiva gràcies a la segona regla.

3. Resolució de conflictes

Quan es defineixen múltiples regles per al mateix element i propietat, l’última regla en el mateix nivell és la que preval.

Exemple:

nom {
    font-family: Arial;
    color: blue;
}

nom {
    color: red;
}

Resultat:

El text dins de l’element <nom> es mostrarà de color roig, ja que la segona regla sobreescriu la primera.

4. Ordenació de l’aplicació d’estils (Cascade)

CSS utilitza un sistema de prioritats per decidir quina regla aplicar si hi ha conflictes. Els factors són:

Especificitat del selector:
- Selectors més específics tenen més prioritat.
- Per exemple: #id > .class > tag.
Ordre de les regles:
- Si dos regles tenen la mateixa especificitat, l’última definida en el codi serà la que preval.
Estils en línia:
- Els estils definits amb l’atribut style dins de l’element HTML tenen prioritat sobre els estils externs o incrustats.
!important:
- Una declaració amb !important sobreescriu qualsevol altra regla, independentment de l’ordre o especificitat.

Exemple:

.nom {
    color: blue !important;
}

.nom {
    color: red;
}

Resultat:

Tot i que la segona regla està definida posteriorment, el text serà blau perquè té !important.

5. Bones pràctiques per evitar conflictes

Defineix els estils de manera jeràrquica, agrupant regles comuns en selectors compartits.
Evita sobreescriure estils de manera innecessària.
Fes ús dels noms de classes per a elements específics, en lloc d’aplicar estils directament a etiquetes.

Selectors CSS

Els selectors CSS són patrons que permeten seleccionar els elements HTML als quals volem aplicar estils. Hi ha diversos tipus de selectors, cadascun amb una funcionalitat específica.

Tipus de Selectors CSS

1. Selector per Element

Aplica estils a tots els elements d’un tipus específic.

p {
    color: blue;
}

exemple:

<h2>Exemple: Selector per Element</h2>
<p>Este text serà blau.</p>
<p>Este també.</p>

Selecciona tots els elements <p> i els aplica un text de color blau.

alt text —

2. Selector per Classe

Selecciona tots els elements que tenen una classe específica. Les classes es defineixen amb un punt (.).

.classe {
    font-size: 24px;
}

HTML:

<p class="classe">Este text tindrà una mida de 24px.</p>
<p class="classe">Este també.</p>
<p>Este no!!.</p>

Només afecta els elements amb la classe classe, independentment del tipus d’etiqueta.

alt text

3. Selector per ID

Selecciona un element únic identificat amb un ID específic. Els IDs es defineixen amb una coixinet (#).

#identificador {
    background-color: lightgray;
}

HTML:

<div id="identificador">Este element tindrà un fons gris clar.
</div>
<div >Este element NO!!
</div>

alt text

Aplica l’estil només a l’element amb l’ID identificador.

[NOTA]

La diferència entre classe i ID és que una classe pot ser utilitzada en diversos elements, mentre que un ID només pot ser utilitzat en un sol element.

La Classe és util quan necessitem aplicar el mateix estil a multiples elements.

L’ID s’utilitza per a elements únics com capçaleres, contenidors principals, o punts d’anclatge, també és molt usat en JavaScript per manipular elements específics.

4. Selector de Descendents

Selecciona elements que són descendents d’un altre element, separats per un espai.

article p {
    font-style: italic;
}

HTML:

<article>
    <p>Este paràgraf estarà en cursiva.</p>
</article>
<p>Este no es veurà afectat.</p>

alt text

Aplica estil en cursiva només als paràgrafs (<p>) dins d’un element <article>.

5. Selector de Grups

Agrupa diversos selectors en una sola regla.

h1, h2, h4 {
    text-align: center;
}

HTML:

<h1>Títol 1</h1>
<h2>Títol 2</h2>
<h3>Títol 3</h3>
<h4>Títol 4</h4>

alt text

Centra tots els encapçalaments <h1>, <h2> i <h4>, <h3> no està al grup.

6. Selector Universal

Selecciona tots els elements HTML de la pàgina.

* {
    margin: 0;
    padding: 0;
}

Elimina el marge i el padding predeterminats de tots els elements de la pàgina.

Pseudoselectors

Els pseudoselectors són selectors CSS especials que permeten aplicar estils a parts específiques d’un element o reaccionar al seu estat.

1- Pseudoselectors Bàsics

`:first-line`

Aplica estils a la primera línia del text d’un element bloc.
Ideal per destacar la primera línia d’un paràgraf o secció.

`:first-letter`

Aplica estils a la primera lletra del text d’un element bloc.
Utilitzat sovint per dissenys decoratius o inicials grans.

`:before` i `:after`

:before: Insereix contingut abans del contingut real d’un element.
:after: Insereix contingut després del contingut real d’un element.
S’utilitzen conjuntament amb la propietat content que estableix el contingut a insertar.

Exemple:

p:first-line {
    font-weight: bold;
    color: blue;
}

p:before {
    content: " HOLA!!.  ";
    color: green;
}

p:first-letter {
    font-size: 24px;
    color: red;
}

p:after {
    content: " [Final del text]";
    color: gray;
    font-style: italic;
}

HTML

<h1>Pseudoselectors Bàsics</h1>
<p>
    Aquesta és una línia de prova per mostrar els pseudoselectors bàsics. Aquí veuràs com funciona la primera línia en negreta i de color blau, mentre que la primera lletra és més gran i vermella. A més, s'ha afegit contingut abans i després del paràgraf amb pseudoelements.
</p>

alt text

La primera línia del paràgraf estarà en negreta i serà blava.
La primera lletra del paràgraf serà de color vermell i de mida gran (24px).
S’insereix la paraula HOLA!!. abans del text i [Final del text] en cursiva i gris al final.

2. Pseudoclases d’Estat

Les pseudoclases d’estat permeten aplicar estils segons l’estat d’interacció d’un element.

`:hover`

Quan el ratolí està sobre un element.

`:focus`

Quan un element (com un camp de formulari) està enfocat.

`:active`

Quan un element està sent clicat o activat.

Exemple:

button {
    background-color: lightgray;
    color: black;
    border: 1px solid black;
    padding: 10px;
    cursor: pointer;
}

button:hover {
    background-color: blue;
    color: white;
}

button:focus {
    border-color: red;
    outline: none;
}

button:active {
    background-color: navy;
}

<button>Clica'm</button>

El botó canviarà de color quan el ratolí passi per sobre (fons blau, text blanc).
Quan el botó estigui enfocat, el contorn serà de color vermell.
Quan es clica, el fons es tornarà blau marí.

3. Pseudoclases Estructurals

Les pseudoclases estructurals seleccionen elements basats en la seva posició dins del DOM.

:nth-child(n)

Selecciona el fill n-è d’un element pare.

:nth-last-child(n)

Selecciona el fill n-è començant des del final.

:first-child i :last-child

:first-child: Selecciona el primer fill d’un element.
:last-child: Selecciona l’últim fill.

:only-child

Selecciona un element que és l’únic fill del seu pare.

:empty

Selecciona elements que no tenen contingut (ni text, ni altres elements fills).

Exemple:

li:nth-child(odd) {
    background-color: lightblue; /* Els elements en posicions imparells (1, 3, 5, ...) tindran un fons blau clar */
}

li:nth-child(even) {
    background-color: lightgray; /* Els elements en posicions parells (2, 4, 6, ...) tindran un fons gris clar */
}

li:nth-child(3) {
    color: red; /* El tercer element sempre tindrà el text en vermell */
}

li:first-child {
    font-weight: bold; /* El primer element es mostra amb text en negreta */
}

li:last-child {
    font-style: italic; /* L'últim element es mostra en cursiva */
}

li:empty {
    border: 1px dashed red; /* Els elements buits tindran un contorn discontinu de color vermell */
}

<ul>
    <li>Primer</li> <!-- Primer element: bold -->
    <li>Segon</li> <!-- Segon element: fons gris clar -->
    <li>Tercer</li> <!-- Tercer element: fons blau clar i text vermell -->
    <li>Quart</li> <!-- Últim element: cursiva -->
    <li></li>      <!-- Element buit: contorn discontinu vermell -->
</ul>

alt text

Els elements imparells tindran un fons blau clar.
Els parells tindran un fons gris clar.
El tercer element serà de color roig.
El primer element estarà en negreta.
L’últim element tindrà cursiva.

Selectors Avançats

1.- Selector de Fills Immediats (`>`):

Selecciona només els fills directes d’un element.

Exemple:

div > p {
    color: green;
}

<div>
    <p>Verd (fill directe)</p>
    <div>
        <p>No afectat</p>
    </div>
</div>

2.- Selector d’Elements Adjacents (`+`):

Selecciona l’element que ve immediatament després d’un altre.

Exemple:

h1 + p {
    margin-top: 10px;
}

<h1>Títol</h1>
<p>Paràgraf formatat.</p>
<p>No afectat.</p>

3.- Selector de Germans Generals (`~`):

Selecciona tots els germans posteriors d’un element.

Exemple:

h1 ~ p {
    color: gray;
}

<h1>Títol</h1>
<p>Primer germà</p>
<p>Segon germà</p>

Selectors d’Atributs

Permeten aplicar estils en funció dels atributs dels elements HTML.

1.- Selector per Atribut:

Selecciona elements que tenen un atribut determinat, independentment del valor.

Exemple:

input[type="text"] {
    border: 1px solid black;
}

Selecciona tots els elements amb l’atribut type="text".
La propietat border aplica una vora negra amb un gruix de 2 píxels.

HTML:

<input type="text" placeholder="Text">
<input type="password" placeholder="Contrasenya">
<input type="checkbox">

Només l’input amb type="text" tindrà una vora negra. Els altres no es veuran afectats.

2.- Selector per Valor Exacte (`[atribut="valor"]`)

Selecciona els elements que tenen un atribut amb un valor exacte.

Exemple:

a[href="https://example.com"] {
    color: green;
    font-weight: bold;
}

Selecciona només els enllaços (<a>) amb l’atribut href exactament igual a "https://example.com".

HTML:

<a href="https://example.com">Enllaç segur</a>
<a href="https://altre.com">Enllaç alternatiu</a>

Només el primer enllaç serà de color verd i tindrà negreta.

3.- Selector per Valor Parcial

^= (Comença amb) Selecciona els elements en què el valor de l’atribut comença amb una cadena específica.

Exemple:

a[href^="https"] {
    color: blue;
}

Selecciona els enllaços amb un href que comenci per https.

HTML:

<a href="https://example.com">Enllaç segur</a>
<a href="http://example.com">Enllaç no segur</a>
<a href="ftp://example.com">Alt tipus d'enllaç</a>

Només l’enllaç amb https:// tindrà el text de color blau.

$= (Acaba amb) Selecciona els elements en què el valor de l’atribut acaba amb una cadena específica.

Exemple:

img[src$=".jpg"] {
    border: 5px solid red;
}

Selecciona totes les imatges amb un src que acabi en .jpg.

HTML:

<img src="foto.jpg" alt="Imatge JPG">
<img src="logo.png" alt="Imatge PNG">
<img src="paisatge.jpg" alt="Altra imatge JPG">

Només les imatges amb extensió .jpg tindran una vora de 5 píxels i color vermell.

*= (Conté) Selecciona els elements en què el valor de l’atribut conté una cadena específica.

Exemple:

a[href*="example"] {
    text-decoration: underline;
    color: purple;
}

Selecciona tots els enllaços amb un href que inclogui la paraula example.

HTML:

<a href="https://example.com">Enllaç principal</a>
<a href="https://sub.example.com">Subenllaç</a>
<a href="https://altresite.com">Altres</a>

Els dos primers enllaços tindran el text de color porpra i subratllat perquè contenen example en l’atribut href.

Selector per Existència de l’Atribut Selecciona elements que tenen un atribut determinat, sense importar el valor.

Exemple:

input[required] {
    border: 2px solid orange;
}

Selecciona qualsevol <input> que tingui l’atribut required (que indica que és obligatori).

HTML:

<input type="text" required placeholder="Obligatori">
<input type="email" placeholder="Opcional">
<input type="password" required placeholder="Obligatori">

Els inputs amb l’atribut required tindran una vora taronja.

Selector per Atribut Separat per Espais ([atribut~="valor"]) Selecciona els elements on el valor de l’atribut inclou un valor específic separat per espais.

Exemple:

div[class~="destacat"] {
    background-color: yellow;
}

Selecciona qualsevol element <div> amb una classe que contingui la paraula exacta destacat dins de la llista de classes.

HTML:

<div class="normal destacat">Contingut destacat</div>
<div class="normal">Contingut normal</div>

Només el primer <div> tindrà un fons groc.

Selector per Valor amb Prefix ([atribut|="prefix"]) Selecciona elements amb un atribut que comenci amb un prefix o amb el prefix seguit d’un guió (-).

Exemple:

[lang|="en"] {
    font-style: italic;
}

Selecciona elements amb l’atribut lang igual a en o que comenci amb en- (com en-US o en-GB).

HTML:

<p lang="en">Text en anglès.</p>
<p lang="en-US">Text en anglès americà.</p>
<p lang="es">Text en castellà.</p>

Els dos primers paràgrafs estaran en cursiva.

i molts més…

Chuleta de Selectors CSS

1. Selectors Bàsics

Per element:
```
p { color: blue; }
```
Per classe (.):
```
.classe { font-size: 18px; }
```
Per ID (#):
```
#id { background: lightgray; }
```

2. Selectors Jeràrquics

Descendents:
```
div p { color: green; }
```
Fills directes (>):
```
div > p { color: red; }
```
Adjacents (+):
```
h1 + p { margin-top: 10px; }
```
Germans generals (~):
```
h1 ~ p { color: gray; }
```

3. Selectors Especials

Universal (*):
```css
- { margin: 0; padding: 0; } ```

4. Pseudoselectors

Primera línia:
```
p:first-line { font-weight: bold; }
```
Primera lletra:
```
p:first-letter { font-size: 24px; }
```

Abans i després:

p:before { content: "🔹 "; }
p:after { content: "[Final]"; }

5. Pseudoclases d’Estat

Ratolí sobre (:hover):
```
button:hover { background: blue; }
```
Element enfocat (:focus):
```
input:focus { border: 2px solid red; }
```
Element clicat (:active):
```
a:active { color: orange; }
```

6. Pseudoclases Estructurals

N-è fill:
```
li:nth-child(2) { color: red; }
```

Primer/últim fill:

li:first-child { font-weight: bold; }
li:last-child { font-style: italic; }

Fill únic:
```
p:only-child { color: purple; }
```

7. Selectors d’Atributs

Per atribut:

input[required] { border: 2px solid orange; }

Comença amb (^=):
```
a[href^="https"] { color: blue; }
```

Acaba amb ($=):

img[src$=".jpg"] { border: 2px solid red; }

Conté (*=):

a[href*="example"] { text-decoration: underline; }

Separat per espais (~=):

div[class~="destacat"] { background: yellow; }

Prefix (|=):
```
[lang|="en"] { font-style: italic; }
```

Regles CSS: Estructura i Funcionament

1. Estructura d’una regla CSS

2. Herència en CSS

Exemple d’herència:

3. Resolució de conflictes

4. Ordenació de l’aplicació d’estils (Cascade)

Exemple:

5. Bones pràctiques per evitar conflictes

Selectors CSS

Tipus de Selectors CSS

1. Selector per Element

2. Selector per Classe

3. Selector per ID

4. Selector de Descendents

5. Selector de Grups

6. Selector Universal

Pseudoselectors

1- Pseudoselectors Bàsics

:first-line

:first-letter

:before i :after

Exemple:

2. Pseudoclases d’Estat

:hover

:focus

:active

Exemple:

3. Pseudoclases Estructurals

Exemple:

Selectors Avançats

1.- Selector de Fills Immediats (>):

Exemple:

2.- Selector d’Elements Adjacents (+):

Exemple:

3.- Selector de Germans Generals (~):

Exemple:

Selectors d’Atributs

1.- Selector per Atribut:

2.- Selector per Valor Exacte ([atribut="valor"])

3.- Selector per Valor Parcial

Chuleta de Selectors CSS

1. Selectors Bàsics

2. Selectors Jeràrquics

3. Selectors Especials

4. Pseudoselectors

5. Pseudoclases d’Estat

6. Pseudoclases Estructurals

7. Selectors d’Atributs

`:first-line`

`:first-letter`

`:before` i `:after`

`:hover`

`:focus`

`:active`

1.- Selector de Fills Immediats (`>`):

2.- Selector d’Elements Adjacents (`+`):

3.- Selector de Germans Generals (`~`):

2.- Selector per Valor Exacte (`[atribut="valor"]`)