Estils en un full externa

Obrirem un nou document al qual podrem titular, Estils II per exemple. I guardar com estilo2

: Activem la finestra d'Estils i premem la icona de crear nova regla CSS:

1

Ens apareixerà la finestra on definir un nou estil:

2

marcarem aquesta vegada, Avançades (ID, selectors contextuals ...)

I si abans ho definíem a Només aquest document, ara ho farem en un full d'estils.

Anem a definir el primer els enllaços, acceptem i ens apareixerà una nova finestra on guardar el full que estem creant i que hem de recordar la seva extensió nombrequepongamos.css

y los de las distintas opciones. I que hem de guardar, normalment jo sòl guardar dins de la carpeta del lloc, al costat dels documents. Index i els de les diferents opcions. I com la resta de documents, hem de pujar al servidor perquè els estils siguin aplicats.

* Nota: Si canviem qualsevol cosa en aquest full d'estils, hem de guardar els canvis i tornar a pujar-la al servidor, trepitjant l'anterior. O el canvi no el veuríem a la web.

6

Un cop guardat, apareixerà la finestra on hem de definir l'estil que desitgem per als enllaços:

7

Hem triat que els enllaços tinguin les fonts Verdanda, Arial, Helvètica, sans-serif

Esto no quiere decir que vayamos a usarlas todas, si no que usaremos este grupo y el navegador, cuando el usuario final, abra la pagina una vez en Internet, usara aquella que tenga instalada, es decir, primero buscara la fuente Verdana, si no la tiene, la Arial… etc, etc.. * Nota: Això no vol dir que anem a usar-les totes, sinó que usarem aquest grup i el navegador, quan l'usuari final, obriu la pàgina un cop a Internet, fes servir la que tingui instal · lada, és a dir, primer busqués la font Verdana , si no la té, la Arial ... etc, etc ..

, el color y que no este subrayado. Aceptamos ( no aplicar ) La mida del text de l'enllaç, serà de 9 px, l'hem triat que es mostri en negreta, el color i que no estigui subratllat. Acceptem (no aplicar)

El full externa d'estils, aquesta creada i podrem veure a la columna de la dreta:

que acabamos de crear: I a la finestra CSS, podrem veure l'estil que acabem de crear:

9

Si volem que en passar el Raon per l'enllaç, es subratlli, per exemple, premem de nou la icona de nova regla css i seleccionem:

10

a: hover i en la finestra de definició:

3

Així podrem definir tots els estats d'un enllaç, si recordeu tal com fèiem al principi des del Inspector en Propietats de la pàgina, amb la diferència que d'aquella manera els estils quedaven en el mateix document, a la l'etiqueta <head>

Ara només queda que creeu un enllaç a la pàgina i veure que passa?

Si tenim un estil definit, però no acaba d'agradar, podem canviar ja sigui la font, el color .. , ir al icono que parece un lápiz, pulsamos sobre el: el subratllat, etc ... n'hi ha prou seleccionar l'estil, anar a la icona que sembla un llapis, premem sobre el:

12

i ens apareixerà la finestra on poder canviar-lo:

13

he canviat la decoració, però igualment podem canviar la mida del text, el color o tot alhora i que sembli un altre ;)

a un nuevo documento totalmente nuevo: Vamos a la ventana CSS y pulsamos el icono: Ara imaginem que ja tenim un full creada i la volem aplicar a un nou document totalment nou: Anem a la finestra CSS i premem la icona:

14

Marca l'opció Vincular:

15

que ya tenemos en este Sitio , o podría ser otra de otra pagina que hayamos creado antes , solo recordar la extensión .css I a Navega buscarem el full d'estils que volem vincular amb el document, pot ser la mateixa que ja tenim en aquest Lloc, o podria ser una altra d'una altra pàgina que hàgim creat abans, només recordar l'extensió. Css

de forma automática . Fins ara hem creat estils que s'apliquen a etiquetes de forma automàtica.

Als enllaços si haurem de fer-los d'aquesta manera, doncs un enllaç sempre voldrem modificar-lo i posar-lo d'acord als colors i disseny final de la nostra web. Pel que ens serà de gran utilitat, els definim un cop i ens podem oblidar ;)

En el proper tutorial veurem com definir estils propis i aplicar-los de la forma que desitgem ;)

Respondre