En aquest article, agafarem un document HTML senzill i hi aplicarem una mica de CSS per aprendre algunes coses pràctiques sobre aquest llenguatge informàtic.
| Prerequisits: | Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML). |
|---|---|
| Objectiu: | Comprendre els fonaments bàsics d’enllaçar un document CSS a un fitxer HTML i poder crear un text simple amb CSS. |
El nostre punt de partida és un document HTML. Pots copiar el codi de sota si vols treballar al teu propi ordinador. Desa el codi de sota com a index.html en una carpeta de l'ordinador.
<!doctype html>
<html lang="ca">
<head>
<meta charset="utf-8">
<title>Introducció al CSS</title>
</head>
<body>
<h1>Sóc un títol de nivell u</h1>
<p>Aquest és un paràgraf de text. Al text hi ha un <span>element span</span>
i també un enllaç <a href="http://example.com">link</a>.</p>
<p>Aquest és el segon paràgraf. Conté un element <em>subratllat</em>.</p>
<ul>
<li>Article 1</li>
<li>Article 2</li>
<li>Article <em>tres</em></li>
</ul>
</body>
</html>
Nota: Si llegeixes això en un dispositiu o en un entorn on no pots crear fitxers fàcilment, no et preocupis: a continuació es mostren editors de codi en directe per a escriure un exemple de codi aquí a la pàgina.
El primer que hem de fer és dir al document HTML que tenim unes regles CSS que volem que utilitzi. Habitualment trobaràs tres maneres diferents d’aplicar CSS a un document HTML, però de moment examinarem la manera més comuna i útil: enllaçar el CSS des de la capçalera del document.
Crea un fitxer a la mateixa carpeta que el teu document HTML i desa’l com styles.css. L’extensió .css mostra que es tracta d’un fitxer CSS.
Per a enllaçar styles.css a index.html, afegeix la línia següent en algun lloc de la capçalera ({{htmlelement("head")}}) del document HTML:
<link rel="stylesheet" href="styles.css">
Aquest element {{htmlelement("link")}} indica al navegador que hi ha un full d'estil i utilitza l'atribut rel i la ubicació d'aquest full d'estil com a valor de l'atribut href. Pots provar si funciona el CSS afegint una regla a styles.css. Fent servir l'editor de codi, afegeix el següent al fitxer CSS:
h1 {
color: red;
}
Desa els fitxers HTML i CSS i torna a carregar la pàgina en un navegador web. Ara el títol d’encapçalament de primer nivell a la part superior del document s'ha de veure de color vermell. Si això succeeix, enhorabona: has aplicat amb èxit una mica de CSS a un document HTML. Si això no passa, comprova ho has escrit tot correctament.
Pots continuar treballant amb styles.css localment, o bé pots utilitzar el nostre editor interactiu, que trobaràs a continuació, per continuar amb aquest tutorial. L’editor interactiu actua com si el CSS del primer quadre estigués vinculat al document HTML, tal com passa amb el nostre document anterior.
En tornar el títol vermell, ja hem demostrat que podem seleccionar un element HTML i aplicar-hi estil. Ho fem delimitant un selector d’elements: un seleccionador que coincideix directament amb un nom d’element HTML. Per a seleccionar tots els paràgrafs del document, utilitzaries el selector p. Per a convertir tots els paràgrafs en verd, faries servir:
p {
color: green;
}
Pots seleccionar diversos selectors alhora, separats amb una coma. Si volem que tots els paràgrafs i tots els elements de la llista siguin verds, la regla ha de ser la següent:
p, li {
color: green;
}
Prova-ho a l’editor interactiu següent (edita els quadres de codi) o al teu document CSS local.
{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}}
Quan observem un document HTML ben marcat, fins i tot una cosa tan simple com el nostre exemple, podem veure que el navegador afegeix algun estil per defecte per fer que l’HTML sigui llegible. Els títols són grans i en lletra negreta i la nostra llista inclou vinyetes. Això passa perquè els navegadors tenen fulls d’estil interns que contenen estils predeterminats que s’apliquen per defecte a totes les pàgines; sense això no hi hauria distincions dins el text i hauríem d’aplicar estil a tot des de zero. Tots els navegadors moderns mostren el contingut HTML de la mateixa manera per defecte.
Tanmateix, sovint voldràs alguna cosa que no sigui la tria que ha fet el navegador. Això es pot fer escollint només l’element HTML que vols canviar i fent servir una regla CSS per a canviar-ne l’aspecte. Un bon exemple és <ul>, que marca una llista no ordenada. Mostra boletes en els elements de llista, però si decideixo que no les vull, les puc eliminar:
li {
list-style-type: none;
}
Prova d’afegir això al teu CSS.
És una bona opció consultar la propietat list-style-type a la pàgina de MDN per veure quins valors admet. Per provar uns valors diferents, dona una ullada a la pàgina list-style-type, on trobaràs un exemple interactiu a la part superior de la pàgina i, a continuació, es detallen tots els valors que s’admeten.
Si consultes aquesta pàgina, descobriràs que, a banda d’eliminar les vinyetes de la llista, també les pots canviar: prova de canviar-les per vinyetes quadrades amb el valor square.
Fins al moment hem dissenyat elements basats en els seus noms en HTML. Això funciona sempre que vulguis que tots els elements d’aquest tipus del document presentin el mateix aspecte. Moltes vegades no és el cas, així que hauràs de trobar la manera de seleccionar un subconjunt dels elements sense canviar els altres. La manera més habitual de fer-ho és afegir una classe a l'element HTML i delimitar aquesta classe.
Al teu document HTML, afegeix un atribut de classe al segon element de la llista. La teva llista ara es veurà així:
<ul> <li>Article 1</li> <li class="special">Item two</li> <li>Article <em>tres</em></li> </ul>
Al teu CSS pots seleccionar la classe special creant un selector que comenci amb un punt. Afegeix el següent al teu fitxer CSS:
.special {
color: orange;
font-weight: bold;
}
Desa i actualitza per veure quin és el resultat.
Pots aplicar la classe special a qualsevol element de la pàgina que vulguis que tingui el mateix aspecte que aquesta llista. Per exemple, potser vols que l’element <span> del paràgraf també es vegi de color taronja i en negreta. Prova d’afegir-hi una classe special i torna a carregar la pàgina, i observa què passa.
De vegades veuràs regles amb un selector que enumera el selector d’elements HTML juntament amb la classe:
li.special {
color: orange;
font-weight: bold;
}
Aquesta sintaxi vol dir «selecciona qualsevol element li que tingui una classe special». Si ho fas així, ja no podràs aplicar la classe a un element <span> o qualsevol altre element simplement afegint-hi la classe; hauràs d’afegir aquest element a la llista de selectors:
li.special,
span.special {
color: orange;
font-weight: bold;
}
Com pots imaginar, algunes classes podrien aplicar-se a molts elements i no vols haver d’editar el CSS cada vegada que calgui adoptar un estil nou. Per tant, de vegades és millor deixar de banda l’element i simplement fer referència a la classe, tret que sàpigues que vols crear algunes regles especials per a un sol element i potser vols assegurar-te que no s’apliquen a altres coses.
Hi ha vegades que voldràs que alguna cosa sembli diferent segons el lloc en què es troba dins el document. Hi ha diversos selectors que poden ajudar en aquesta situació, però ara per ara només ens fixarem en un parell. Al nostre document hi ha dos elements <em>: un dins d’un paràgraf i l’altre dins d’una llista. Per a seleccionar només un <em> que estigui situat dins d'un element <li>, pots utilitzar un selector anomenat combinador de descendents, que simplement pren la forma d'un espai entre dos altres selectors.
Afegeix la regla següent al teu full d’estil.
li em {
color: rebeccapurple;
}
Aquest selector seleccionarà qualsevol element <em> que es trobi dins un (descendent de) <li>. Per tant, al document d’exemple, hauries de trobar que el <em> de l’element de la tercera llista és morat, però el que hi ha dins del paràgraf no canvia.
Una altra cosa que potser t'agradaria provar és aplicar estil a un paràgraf que surt immediatament després d'un títol d’encapçalament del mateix nivell de jerarquia de l'HTML. Per fer-ho, col·loca un + (un combinador de germans adjacents) entre els selectors.
Prova d'afegir aquesta regla al teu full d'estil, també:
h1 + p {
font-size: 200%;
}
L'exemple en directe següent inclou les dues regles anteriors. Prova d'afegir una regla perquè un element span es mostri de color vermell si és dins d'un element paràgraf. Sabràs que ho has fet bé si element span del primer paràgraf és vermell, però el que apareix al primer element de llista no canvia de color.
{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
Nota: Com pots veure, el CSS ens ofereix diverses maneres de seleccionar elements, i fins ara només n’hem gratat la superfície! Analitzarem amb detall tots aquests selectors i molts més en els nostres articles sobre selectors que trobaràs més endavant en el curs.
El darrer tipus d’aplicació d’estil que analitzarem en aquest article és la capacitat d’aplicar estil a les coses en funció del seu estat. Un exemple senzill d’això són els enllaços. Quan dissenyem un enllaç, hem de seleccionar l’element <a> (anchor). Això té diferents estats en funció de si no s’ha visitat, s’ha visitat, s’hi passa pel damunt, se selecciona amb el teclat o s'hi fa clic (s’activa). Pots fer servir el CSS per a dirigir-te a aquests estats diferents: el CSS que trobaràs a continuació estableix els enllaços no visitats en rosa, i els visitats en verd.
a:link {
color: pink;
}
a:visited {
color: green;
}Pots canviar l'aparença de l'enllaç quan l'usuari hi col·loca el punter a sobre, per exemple, eliminar-ne el subratllat, que s'aconsegueix amb la regla següent:
a:hover {
text-decoration: none;
}A l’exemple en directe següent pots jugar amb diferents valors per als diversos estats d’un enllaç. Hi hem afegit les regles anteriors, i ens adonem que el color rosa és força clar i difícil de llegir; per què no el canviem per un color que vagi més bé? Es poden posar els enllaços en negreta?
{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}}
Hem eliminat el subratllat del nostre enllaç quan s’hi passa el punter del ratolí per sobre. Pots eliminar el subratllat de tots els estats d’un enllaç. Val la pena recordar, però, que en un lloc web real, vols que els visitants sàpiguen que un enllaç és un enllaç. Deixar el subratllat a lloc pot ser una pista important perquè la gent s’adoni que pot fer clic en un text dins d’un paràgraf; aquest és el comportament al qual estan acostumats. Com tot en CSS, amb els canvis es pot fer que el document sigui menys accessible; tractarem de posar en evidència els entrebancs potencials en els llocs adequats.
Nota: sovint veuràs que en aquests articles i en l’MDN es menciona l'accessibilitat. Quan parlem d’accessibilitat ens referim al requisit que les nostres pàgines web siguin comprensibles i utilitzables per tothom.
El teu visitant pot entrar a la pàgina web des d'un ordinador amb un ratolí o un trackpad, o des d’un telèfon amb pantalla tàctil. O potser utilitza un lector de pantalla que llegeix el contingut del document; o necessita utilitzar una mida de lletra del text molt més gran; o bé navega pel lloc web només amb el teclat.
Un document HTML senzill és en general accessible per a tothom, i a l'hora d’aplicar estil a aquest document, és important que no el facis menys accessible.
Val la pena assenyalar que pots combinar diversos selectors i combinadors. Per exemple:
/* selecciona qualsevol <span> que estigui dins d'un <p>, que està dins d'un <article> */
article p span { ... }
/* Selecciona qualsevol <p> que vagi directament després d'un <ul>, que vagi directament després d'un <h1> */
h1 + ul + p { ... }
També pots combinar diversos tipus. Intenta afegir el següent al teu codi:
body h1 + p .special {
color: yellow;
background-color: black;
padding: 5px;
}
Aplicarà estil a qualsevol element amb una classe special que es trobi dins d’un element <p>, que vingui just després d’un element <h1>> que es trobi dins del <body>. Uf!
A l'HTML original que t’hem proporcionat, l'únic element amb estil és <span class="special">.
No et preocupis si et sembla complicat en aquest moment, començaràs a entendre-ho ben aviat de seguida que treballis més amb el CSS.
En aquest tutorial hem analitzat diverses maneres d’aplicar estil a un document amb CSS. Anirem desenvolupant aquests coneixements a mesura que avancem amb la resta d'articles. Tanmateix, ja en coneixes prou per a aplicar estil al text, aplicar CSS a partir de diferents maneres de seleccionar els elements del document i cercar propietats i valors en la documentació MDN.
Al proper article analitzarem com s’estructura el CSS.
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}