Enrera
Mòdul 4
Disseny i creació de pàgines web
  Pràctica
1
2
3
4
5
6
   
Exercicis
Exercicis
 
 

El full d'estils CSS

 

Per què utilitzar un full d'estils

A les pràctiques anteriors, hem vist la utilitat de definir estils de text. Quan escriviu amb el processador de text, hi ha la tendència de modificar el tipus de lletra sobre la marxa. Modifiqueu la mida, el format, l'alineació i tots els atributs que aneu necessitant. Totes aquestes modificacions tenen sentit en textos curts, però, en textos que ocupen unes quantes pàgines, la feina pot resultar més feixuga, i correu el risc que us apareguin discordances indesitjades, és a dir, paràgrafs de text amb atributs diferents.

A les pràctiques anteriors, heu après a agrupar propietats d'un text en un estil, però aquests estils només queden definits a la pàgina en què esteu treballant. Això vol dir que, si heu d'aplicar els mateixos estils a diferents pàgines de la vostra web, s'haurien de definir tots de nou.

La solució és crear un fitxer, que anomenareu full d'estils CSS, vinculat permanentment a totes les pàgines de la vostra web. Dins aquest full, aneu afegint els estils que necessiteu per a capçaleres, títols, subtítols, paràgrafs, llistes numerades, etc. D'aquesta manera, aconseguireu que totes les pàgines de la vostra web mantinguin una uniformitat i que el seu manteniment sigui més còmode.

Es proposa de fer una web amb diferents pàgines enllaçades entre si que continguin un text llarg i un aspecte final semblant a l'arxiu webtext.htm. Per facilitar-vos la veina, s'han preparat els textos als arxius: roma1.rtf , roma2.rtf, roma3.rtf i roma4.rtf, que podreu copiar i enganxar o modificar lliurement. Però això ho fareu a la pràctica següent. Ara comenceu per crear un full d'estils on es defineixin els que necessiteu en el vostre treball.

 
 

Desenvolupament de la pràctica

Pràctica

Des del menú Ventana, assegureu-vos que teniu visible l'opció Ocultar paneles. D'aquesta manera, podreu accedir a totes les finestres amb totes les eines. Si, pel contrari, està visible l'opció Mostrar paneles, voldrà dir que aquests estan amagats. També podeu prémer F4 per fer-los visibles.

Localitzeu la finestra Diseño al conjunt de panells que es despleguen en fer clic a la fletxa.


Creeu una carpeta nova al vostre lloc web local i poseu-li el nom estils.

Desplegueu la finestra Diseño i creeu un estil nou.

A la finestra emergent, poseu el nom del primer estil que voleu crear (de moment, el que correspon al títol de la pàgina). Deixeu marcat que aquest estil nou s'ha de crear en un full d'estils nou.


Adjuntar full d'estils

Nou full d'estils

Deseu el full d'estils nou amb el nom webtext. L'extensió CSS es posa automàticament.

Desar full d'estils

 

 

  A partir d'aquí, començaran a aparèixer les finestres que us permetran definir els atributs del primer estil que contindrà i que heu anomenat Títol.
 

Apliqueu els atributs següents:

Tipus:
  • Font: Arial, Helvetica, sans serif
  • Mida: 24 píxels
  • Estil: normal
  • Gruix: negreta
  • Color: #000000

Definiciķ del típus i font de lletra

Observeu que també permet definir un color de fons d'aquest text, o bé que aparegui una imatge a sota, però en l'exemple ho deixareu en blanc.

 
El bloc estarà definit per:
  • Separació entre paraules de 6 punts
  • Espai entre lletres de 4 punts
  • Alineació vertical: centrada
  • Alineació del text: esquerra

Parāmetres del bloc

Apliqueu i accepteu totes les finestres.

Atenció !


El fitxer que acabeu de crear amb el nom webtext.css s'anomena full d'estils CSS, que conté un estil de text que donareu a tots els títols de totes les pàgines. A partir d'aquí, continueu afegint estils nous a aquest full.

 
A mesura que aneu afegint estils nous al full, podeu examinar el codi des de la finestra Diseño.
Finestra ''Diseņo''

Creeu els estils següents dins webtext.css, tal com heu fet abans amb l'estil Titol. Els estils nous que heu de crear s'anomenaran Titol2, Text, nomspropis, llistes_a i ressaltat.

 

Les propietats de cadascun seran aquestes:


ESTIL
PROPIETATS
Titol2

Tipus

  • Arial, Helvetica, sans serif
  • Mida: 14 píxels
  • Estil: normal
  • Gruix: negreta
  • Color negre: #000000
Bloc:
  • Alineació vertical: centrada
  • Alineació del text: esquerra
Text

Tipus

  • Arial, Helvetica, sans serif
  • Mida: 10 píxels
  • Estil: normal
  • Gruix: normal
  • Color negre: #000000
nomspropis

Tipus

  • Arial, Helvetica, sans serif
  • Mida: 10 píxels
  • Estil: normal
  • Gruix: negreta
  • Color negre: #000000
llistes_a
Tipus
  • Arial, Helvetica, sans serif
  • Mida: 10 píxels
  • Estil: normal
  • Gruix: normal
  • Color negre: #000000
Bloc
  • Mostrar: lista-elemento
Posició
  • Coloca: Sup auto; inf 4punts
Lista:
  • Tipus: alfa_minus
  • Posició: exterior
ressaltat
Tipus
  • Arial, Helvetica, sans serif
  • Mida: 10 píxels
  • Estil: normal
  • Gruix: negreta
  • Color negre: #000000
Bloc
  • Espai entre lletres: 2 píxels
 

A l'escriptori, us apareixerà una pestanya amb el contingut del codi font de tots els estils que acabeu de definir.

Per acabar, deseu els canvis aplicats al full.

   
 

 

   
Atenció !

En aquesta pràctica, heu creat una col·lecció d'estils que heu guardat a l'arxiu webtext.css.

En la pròxima pràctica, vinculareu aquest fitxer a diferents pàgines que hauran de tenir la mateixa uniformitat.

 
Amunt