2.- Estilos CSS (II).
Empezamos con otro nuevo documento.
Para vincular este documento con la hoja de estilos que ya tenemos creada,
le damos a Ventana > Estilos
CSS y se abrirá la columna
de la derecha desplegándose
Ahora pinchamos en el icono 
de 
y se abrirá:
Nuestra hoja está en el sitio web en el que estamos trabajando. Por eso, no hay que importarla de ningún otro sitio. Le damos a Examinar... y se abre:
Seleccionamos nuestra hoja1 y le damos a Aceptar:
Volverá a salir la ventana anterior con la hoja ya seleccionada:
Le damos a Aceptar.
En el desplegable Diseño se habrán colocado todos los estilos definidos en la hoja1 que acabamos de vincular:
Y podremos aplicar los estilos creados a las palabras o párrafos que nos interese. Observad que el estilo texto1 se aplica automáticamente conforme pulsamos la tecla Enter y creamos un nuevo párrafo.
2.1.- Un vistazo al código fuente generado
Pinchamos en el icono 
para ver el código fuente.
Vemos que en la cabecera del documento entre las etiquetas <head> y </head> se ha vinculado el documento con la hoja de estilos que hemos llamado hoja1
Más adelante, cada vez que hacemos uso de uno de los estilos definido dentro de esa hoja se genera una etiqueta
<p class> o <span class> que afecta al párrafo o al texto seleccionado:
Los estilos que hemos definido han sido de la categoría tipo:
Como se puede ver hay un montón más de categorías que se pueden definir.
Nosotros, de momento, vamos a pasar a ver los estilos que redefinen una etiqueta HTML.
 |