Visita la Nueva Versión de ComoCrearTuWeb!!
Los Estilos CómoCrearTuWeb > Menú Principal > Los Estilos > Introducción
Introdución Su Utilidad

 

Opciones de Estilo

Est. Predeterminados Nuevos Estilos Para una página Para toda la Web

 

Creando Hojas de Estilos

Requerimientos Sintaxis Las Propiedades Las Unidades

 

Asociando Hojas de Estilo

Como Asociar la Hoja

 

Aplicando Hojas de Estilo

Opciones A Nivel de Bloque A Nivel de Línea De una Sola Vez

 

Ejemplos Prácticos

Antes de ... Ejemplo I Ejemplo II Ejemplo III Ejemplo IV Ejemplo V

 

Cosejos Finales

Recomendaciones Simplificando Depurando

Foro de Estilos

Al Menú Principal


Página Anticuada. Visita la nueva versión.


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?

 

¿Sabias que..?

Dinos Algo..

Entra en el nuevo Foro CCTW


Esta versión es antigua. Visita la nueva web de: ComoCrearTuWeb


Entra en el nuevo Foro CCTW


Mas Cosillas..

Acerca de CCTW

Foro de Posicionamiento en Buscadores
ChatCCTW  Actualizaciones  Recomendar  Colabora  Errores?  Agradécemelo  Escríbeme
Actualizada el Jueves, 11-Ago-2005 23:10 Creada y diseñada por Jorgens