7- Fulls d'estil
Què és un full d'estil?
Un full d'estil és un fitxer d'extensió *. CSS (CSS, Cascading Style Sheets = Fulls d'estil) que conté definicions de format (tipus de font, mida, color de la font, color de fons, paràgrafs, etc) de les diferents etiquetes que formen una pàgina *. HTML.
El seu principal avantatge és definir un mateix aspecte per a totes les pàgines d'un lloc web. Es crea un full d'estil i es vinculen totes les pàgines del lloc web a aquesta imatge. Qualsevol canvi efectuat en el full d'estil afecta instantàniament al format de totes les pàgines vinculades a aquesta.
Quan des de l'editor HTML visual s'associa un format a un fragment de text o bé es converteix en un enllaç el que realment s'està fent és situar aquest text entre etiquetes HTML perquè el navegador ho interpreti i visualitzi adequadament.
Exemple: Si des Kompozer selecciones el text titular d'una pàgina web ia continuació desplegueu la llista de formats per seleccionar Títol 1 (de forma similar al proposat en les activitats anteriors d'aquest curs), realment el fragment de text s'ha "etiquetatge" com <h1> Text seleccionat ... </ h1>. Si haguéssim escollit Títol 2 s'hauria etiquetatge amb <h2> ... </ h2>, etc.
Algunes etiquetes HTML són:
<body> ... </ body>. Contenen tots els caràcters que formen la pàgina web.
<h1> ... </ h1>, ..., <h6> ... </ h6>. Permeten definir títols de diferents mides (fins a 6).
<p> ... </ p>. Contenen el text d'un paràgraf.
<a href="http://..."> Text de l'enllaç </ a>. S'utilitza per crear enllaços.
Hi ha moltes més etiquetes però en aquesta pràctica només anem a modificar el format (color, tipus, mida, efecte, etc) dels textos etiquetats amb les que se citen.
En aquesta pràctica crearem un full d'estil i es vincularà a una pàgina.
Crear un full d'estil
1. Abans de començar la pràctica en si, utilitza el navegador d'arxius per crear una subcarpeta de nom css dins elmeuweb.
2. A continuació descàrrega l'arxiu agala.zip i situa'l dins la carpeta elmeuweb. En ingredients damunt la taula trobaràs l'arxiu agala.htm i les imatges agala.jpg i paper.gif guardades dins de la carpeta images.
3. Obre Kompozer ia continuació seleccioneu Fitxer> Obre per localitzar la carpeta elmeuweb i triar l'arxiu agala.htm. Prem el botó Obre.
4. A la pàgina oberta observaràs que en fer clic sobre els diferents paràgrafs el format de cada un d'ells es pot veure a la llista de formats de la barra d'eines. Es tracta de text etiquetat amb: h1, h2, etc. En aquesta pràctica veurem com es pot definir el color, mida, font, etc amb què es mostrarà el text corresponent a cada etiqueta. Per aconseguir això crearem un full d'estil.
5. A la barra de menús de Kompozer seleccioneu Eines> Editor CSS o bé prem el botó CSS que apareix a la barra d'eines.
6. Al quadre de diàleg Fulls d'estil CSS prem al botó que mostra la paleta i al menú desplegable selecciona l'opció Full d'estils enllaçada (en algunes versions de Kompozer la traducció al castellà ha estat Elem. Enllaç)
7. Els estils es poden guardar en el propi codi HTML de la pàgina HTML o bé en un arxiu *. CSS independent. En aquest cas hem optat per la segona opció pel que seleccionem és un full d'estils enllaçada.
8. A la casella URL escriu l'adreça: css / miestilo.css Això li indicarà a Kompozer que els estils es guardaran en un full d'estils extern el nom del fitxer serà miestilo.css dins de la subcarpeta css que hem creat en el pas 1. Per acabar prem el botó Crear full d'estil.
9. Quan es crea un full d'estil el seu nom apareix al panell esquerre de l'editor CSS: Fulles i regles.
10. Selecciona aquesta entrada css / miestilo.css, prem el botó de la paleta i tria Regla d'estil o Regla per crear la primera regla de format.
11. Al tauler dret es mostra Nova regla d'estil. Selecciona l'opció estil aplicat a tots els elements del tipus. D'aquesta forma les característiques d'estil s'apliquen a una etiqueta html estàndard: body, h1, h2, etc.
12. Desplega la llista per seleccionar l'etiqueta HTML el format definirem. En aquest cas l'etiqueta serà body. Aquesta etiqueta afecta a tota la pàgina. A continuació prem el botó Crear regla d'estil.
13. Assegura't que està seleccionat en el panell esquerre el tipus acabat de crear i prem sobre la pestanya Text del panell.
14. En Tipus de lletra anem a canviar el tipus de font amb què es visualitzarà la pàgina. Activa l'opció predefinit i selecciona en la llista: Arial, Helvetica, sans-serif. Recorda que l'usuari que visualitza la pàgina ha de tenir instal en el seu equip les fonts indicades. En cas contrari aquests tipus seran substituïts per les fonts per defecte que empri el navegador web utilitzat. Per això convé utilitzar fonts habituals. En aquesta pestanya es podrien canviar més opcions del text de la pàgina però el deixarem com està.
15. Clic en el pestanya Fons. A la casella Imatge prem el botó Escull fitxer i selecciona la imatge images / paper.gif. D'aquesta forma la pàgina pren aquesta imatge com a fons.
16. En el quadre Fulles i regles fes clic sobre l'entrada css / miestilo.css i prem de nou en el botó de la paleta per desplegar el menú i triar l'opció Nova regla d'estil.
17. Al tauler dret activa l'opció estil aplicat a tots els elements del tipus. A continuació tria l'etiqueta h1 a la llista desplegable i prem el botó Crear regla d'estil. Si l'etiqueta no està disponible a la llista desplegable es pot teclejar directament sobre aquest quadre de text.
18. Assegura't que la regla h1 està seleccionada al panell esquerre i activa la pestanya Text.
19. En el quadre Color prem el botó per triar un color predefinit en la paleta de colors que es mostra. Per exemple: Vermell fosc o marró. Observa que després seleccionar-ja ha canviat de color el títol del document HTML situat sota de l'editor CSS.
20. Repeteix els passos 16-19 per definir l'etiqueta h2 amb el color de text gris fosc.
21. Idem per l'etiqueta a (enllaços) de color de text vermell. En crear la regla d'estil aquesta etiqueta no s'ofereix a la llista desplegable per la qual cosa serà necessari escriure-la.
22. Idem per a l'etiqueta td (cel de taula) de color de text rosa. Observa que després de definir el color la pàgina ja adquireix el color definit en el text associat a aquesta etiqueta HTML.
23. Tanca el panell Full d'estils CSS prement en el botó D'acord.
24. Clic en el botó Desa per guardar les modificacions de la pàgina.
25. Si revises el Codi font de la pàgina (fent clic a la pestanya inferior Codi font) veuràs que s'ha creat una vinculació d'aquesta pàgina al arxiu que conté la informació d'estils: <link rel = "stylesheet" href = "css / miestilo . css "i que a més s'ha creat aquest arxiu *. CSS a la carpeta css.
Vincular un full d'estil a una pàgina web
1. Descarrega i descomprimeix l'arxiu adjunt estilo.zip dins de la carpeta elmeuweb \ css. Com a resultat de l'extracció s'obtindrà l'arxiu estilo.css dins de la carpeta css.
2. Inicia Kompozer ia continuació obre l'arxiu HTML anterior: agala.htm mitjançant Arxiu> Pàgines recents> ...
3. Per obrir l'editor CSS seleccioneu Eines> Editor CSS o bé prem el botó CSS.
4. Per associar un altre full d'estil a la pàgina actual s'ha d'eliminar la vinculació amb el full d'estil miestilo.css que hem creat en l'apartat anterior. Al tauler Fulls d'estil CSS prem sobre el full d'estil creada l'apartat anterior que apareix a la llista de fulls i regles per prémer el botó Suprimeix.
5. A continuació prem el botó full d'estil CSS i al menú desplegable tria Full d'estils enllaçada. En algunes traduccions aquest element té com a nom Elem. enllaç
i en el panell dret prem el botó Escull fitxer per navegar, seleccionar i obrir l'arxiu elmeuweb \ css \ estilo.css.
6. Clic en el botó Crear full d'estils. Després de realitzar aquesta tasca es mostra el full seleccionada al panell esquerre Fulles i regles. Clic sobre ella per seleccionar-la. En obrir prement en el botó "+" es mostraran les regles que conté.
7. Observa que la pàgina web ha adquirit el format del full d'estil triada.
8. Per modificar alguna propietat d'una etiqueta només cal seleccionar-la en el panell esquerre Fulles i regles per després navegar entre les pestanyes del panell dret (General, Text, Fons, etc) i realitzar els canvis oportuns.
9. Clic en el botó Desa per guardar la vinculació de la pàgina agala.html amb el full d'estil estilo.css així com les modificacions introduïdes en aquesta última.
Generadors web de CSS
A Internet hi ha múltiples llocs web on és possible configurar en línia una pàgina *. CSS utilitzant quadres de text i llistes desplegables d'un formulari. El resultat final és un codi CSS que es pot copiar i enganxar en un arxiu *. css local per posteriorment situar-lo en el nostre lloc web i vincular-lo a les pàgines HTML.
Exemple: http://www.ignside.net/man/misc/testcss/cssgenerador.htm
Altres exemples es poden trobar a través de Google amb els termes de recerca: "generador CSS".