Ejemplo III
Con este ejemplo vamos a ver como darle un formato concreto y algo distinto al predeterminado a nuestros títulos y comprobaremos como están separadas la parte que indica el Aspecto de la que indica el Contenido.
Este es el código para dicho ejemplo. No os asustéis porque en lo sucesivo os explico todo lo que aqui aparece detalladamente.
Copiaros este código tal y como os dije en el apartado anterior y os comento como funciona. (lo que rodea a "color:red" son corchetes "{ }", no paréntesis "( )" !! )
Vemos como están claramente separadas la zona de definición de la Forma y de Contenido. En la cabecera, entre <STYLE> y </STYLE>
se define la forma en que se deben representar los contenidos. Por otro lado, entre <BODY> y </BODY> se encuentran los contenidos en sí, y se indica el tipo de presentación (el formato) que debe tener cada elemento, los cuales ya han sido definidos en la zona STYLE.
Zona de Definición de la Forma
Las definiciones de cada uno de los estilos se agupan entre las etiquetas <STYLE> y </STYLE> dentro de la cabecera (HEAD).
Podemos definir todos los estilos que queramos, e incluso retocar los ya existentes. Aunque os lo explico más adelante, en el ejemplo que nos ocupa se puede ver que se esta definiendo un estilo llamado rojo, que simplemente se caracteriza por convertir en color rojo (red) el elemento al que se le aplique.
Por si accedéis a alguno de los tutoriales que indico al final para el que quiera perfeccionar o profundizar en el tema, os adelanto que la definición de un estilo se denomina "regla" y que consta de un "selector" (en el caso del ejemplo el selector sería "rojo") y una "declaración", donde se indican las características que deseamos que tenga ese elemento o selector.
Zona de Definición del Contenido
En esta zona, vemos que se ha escrito un párrafo (caracterizado por ir entre los simbolos <p> y <p>) y que a una de sus palabras (concretamente "Estilo") se le ha aplicado el estilo "rojo" antes definido. Vemos como para aplicar ese estilo a esa palabra se usa la nueva palabreja <span>.
Todo lo encerrado entre <span...> y </span> tendrá el formato que se indique mediante la otra palabreja class.
Para especificar que tipo de estilo de los definidos en STYLE se deben aplicar a lo encerrado entre <span...> y </span> se utiliza la palabra class de la forma que veis en el ejemplo:
<span class="tipodeestilo"> texto al que se va a aplicar el estilo </span>
No es tan dificil, no?
|
Introdución