Guia completa de CSS: Conceptes bàsics i avançats
El meu primer encapçalament
El meu primer paràgraf.
Això és un paràgraf.
| Nom | Cognom | Edat |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
Enllaç
Imatge

Què és CSS?
Cascading Style Sheets (CSS) és un llenguatge que s'utilitza per donar format a les dades d'un document, com ara HTML o XML.
Els documents XML i HTML són semblants i, per tant, es poden tractar de la mateixa manera.
Avantatges de CSS
- CSS permet separar el contingut de la seva presentació.
- CSS permet definir les regles de presentació d'un document a partir de les etiquetes que conté.
- CSS permet aplicar les regles de presentació a múltiples pàgines.
Versions de CSS
- CSS 1 (1996)
- La versió inicial oferia unes poques capacitats de visualització, però ja no està suportada pel W3C.
- CSS 2 (1998)
- Expandeix les característiques de CSS1 afegint noves funcionalitats.
- CSS 2.1 es va finalitzar el 2011 i és la versió més corrent actualment.
- CSS 3 (en desenvolupament)
- Està definit en mòduls i dóna un control més potent de la visualització dels documents.
- No està gaire suportat pels navegadors.
Exemples de codi CSS
h1 { font-family:arial; font-weight:bold; color:#FF0000; background-color:#00FF00; }
Totes les etiquetes: *{color:...;}
Selecciona totes les etiquetes que tinguin el mateix atribut "class":
<p class="vermell">Primer paràgraf</p>
p.vermell { color: #FF0000; }
id p#vermell { color: #FF0000; }
Propietats de la vora (border)
- border-style: Pot ser none, solid, dashed, dotted, double, groove, ridge, inset, outset.
- border-width: Especifica l'amplada. El més corrent és fer-ho amb píxels (10px).
- border-color: El color que tindrà. Pot ser amb el nom en anglès, amb la funció
rgb()o en hexadecimal. - border: Tot de cop especificant un rere l'altre amplada, estil i color.
Exemple:
p { border-color:#000000; border-style:solid; }
Posicionament en CSS
El posicionament en CSS es basa en tres opcions:
- Posicionament normal
- Posicionament flotant
- Posicionament absolut
Exemple de taula amb vores
table, th, td { border: 1px solid black; border-collapse: collapse; }
Exemple de llista
- Cafè
- Te
- Llet