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.


La Sintaxis del CSS

En la Hoja de Estilos que vamos a crear con el Notepad no hay que indicar nada más que el estilo y su definición o más técnicamente hablando, el selector y su declaración, que juntos componen la Regla CSS.

El selector puede ser un nombre aleatorio inventado por nosotros, pero sin espacios intermedios ni símbolos, ni guiones, ni nada. Todo seguido. En el caso de querer variar un estilo ya predeterminado, lo escribiremos tal y como es.

En primer lugar se escribe el selector con un punto delante ( .miparrafo .mititulo .titulocentrado .parrafofondoverde .resaltado etc, etc, etc) o en el caso de querer variar uno de los predeterminados, solo su nombre ( p, pre, h1, code, etc).

Tras cada uno de esos selectores y sin preocuparnos demasiado en la cantidad de espacios en blanco que pongamos entre ellos, pondremos la declaración recogida entre corchetes { y }. Por cierto, se escriben pulsando la tecla "Alt Gr" y a la vez las teclas que hay a la derecha de la "ñ". Asi, mirad . . . . { . . .}. . .{}{ , je je je.

Os muestro un ejemplo. Más tarde os cuento el significado de lo que hay entre los corchetes.

 .selector  { propiedad1:valor1 ; propiedad2:valor2 ; propiedadX:valorX ;}
 .resaltado { font-size: 14px ; font-style: italic ; color: red ;}
 p          { text-indent: 10px ;}

Como véis, entre los corchetes se pone cada propiedad (característica), dos puntos y su valor seguido de punto y coma para separar todo eso de la siguiente propiedad a definir.

Si en lugar de crear un nuevo estilo lo que queréis es variar alguno de los estilos predeterminados, NO pondremos el punto delante del selector. Por ejemplo, para que los parrafos aparezcan de color azul, hariamos:

p { color: blue; }

Donde "p" es el selector predeterminado para los párrafos, "color" una propiedad que define el color del texto de ese párrafo y "blue" es el valor que queremos darle a esa propiedad (azul, se entiende). El punto y coma de la última propiedad que metamos entre los corchetes no es obligatoria pero si muy recomendable. En cuanto a los espacios en blanco, poner tantos como queráis, de forma que la Hoja de Estilo quede fácil de ver, es decir, clarita. Obviamente si lo ponéis todo junto os liaréis ligeramente a la hora de querer retocarla, pues los valores no se verian bien. Un buen método es poner en línea los primeros corchetes, tal y como véis en el ejemplo de arriba, pero eso ya es cosa vuestra, cuestión de manias.

Ya solo nos falta conocer cuantas propiedades distintas hay, que valores pueden tener cada una de ellas y para que sirven. Pero eso lo vemos en la siguiente lección. Verdad que esto está requetefácil? Si hasta yo se hacerlo!! Vamos que ya queda menos.

¿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:07 Creada y diseñada por Jorgens