Introducción:
Las Hojas de estilo en cascada o estilos CSS (Cascade Style Sheet) permiten controlar el diseño y el aspecto de las páginas aumentando las posibilidades en cuanto a colores, tipos, tamaños y posicionamiento de cualquier tipo de objeto html, ya sea texto, imagen, tabla o campo de formulario (lo que sea que se pueda identificar con una etiqueta html).
Se puede definir una hoja de estilo como una colección de reglas que afectan a la apariencia de un documento o parte del mismo.
Las ventajas que presenta el uso de CSS son:
• Control sobre el diseño de la página: Con los estilos CSS se separa el contenido de la página web, un documento .html, de todas las reglas referidas a su diseño y aspecto, que están separadas en un documento externo he independiente con extension .css.
• Actualización automática del diseño: Empleando hojas de estilo se puede modificar la hoja de estilo individual y cambiar la apariencia de un sitio web completo.
• Discreción: Los navegadores más antiguos no pueden entender las reglas de las hojas de estilo pero no dan errores, simplemente las ignoran. De este modo no se mostrarán los efectos de diseño asignados pero sí el texto básico de las páginas y la apariencia del HTML.
Terminología empleada en CSS
Para comprender el funcionamiento de las hojas de estilo en cascada es necesario conocer los términos empleados en las mismas:
Propiedad: Una propiedad es una característica de un elemento que puede verse modificada mediante una hoja de estilo. Por ejemplo color o text-transform. Estas propiedades son muy numerosas permitiendo cambiar muchas características que hasta ahora no era posible.
Valor: Valor es el dato que se asigna a una determinada propiedad. Por ejemplo #FFFFFF es un valor para el color y uppercase es un valor de la propiedad text-transform.
Declaración: Una declaración esta formada por una propiedad y su valor. La declaración comienza por el nombre de la propiedad seguido de dos puntos y a continuación del valor de la propiedad. En nuestro ejemplo color: #FFFFFF; y text-transform: uppercase; son dos declaraciones.
Selector: Un selector es una etiqueta estándar de HTML o un nuevo nombre escrito por nosotros al cual se le quiere asignar una declaración. Por ejemplo: p, H1, strong son selectores del HTML.
Regla de estilo: Una regla es un selector junto con la declaración, por ejemplo, H1{color:rojo}.
Al crear reglas es posible agrupar selectores y declaraciones. Un ejemplo de regla con dos declaraciones sería:
strong { color: #FFFFFF; text-transform: uppercase; }
Para separar las declaraciones se utiliza punto y coma.
También se pueden agrupar los selectores como en este ejemplo :
H1,H2{color:rojo;font-family:arial}
Tanto los h1 y h2 serán mostrados de color rojo y tipo de letra arial. En este caso se utiliza la coma para separar los selectores.
Hoja de estilo: Una hoja de estilo es un conjunto de reglas que definen completamente el aspecto de todos los elementos de la página.
Colocación de las reglas de estilo:
Las reglas de estilo pueden ir colocadas:
1) Dentro de una etiqueta individual:
<etiqueta STYLE="propiedad1:valor;...;propiedadN:valor"> ...texto... </etiqueta>
Estas reglas sólo afectan a una etiqueta particular. No se utilizan las llaves para escribir las declaraciones sino que se escriben entre comillas dentro del modificador STYLE. Este tipo de colocación es el que implementa KompoZer a las capas en cuanto a tamaño y demás cuando las modificamos mediante la interfaz gráfica.
2) Afectando a toda la página:
Van colocadas dentro del HEAD de la página, entre dos etiquetas <STYLE type="text/css"> ..reglas...</STYLE> y afectan a todas las etiquetas del mismo tipo que aparezcan a lo largo de la página.
3) En un archivo externo llamado hoja de estilos cuya extensión es .CSS
Lo más interesante es coger todos los estilos que vayamos a utilizar en un web y extraerlos a un archivo externo en donde almacenamos esas reglas de estilo. Esos archivos tienen extensión CSS.
Para vincular las páginas al formato definido en el archivo CSS hay que colocar en cada una de ellas una etiqueta como esta dentro del HEAD:
<LINK REL="stylesheet" TYPE="text/css" HREF="archivo.css">
Donde archivo.css contiene las reglas de estilo.
De esta forma conseguimos establecer el formato uniforme para todas las páginas y además cualquier cambio que hacemos en la hoja de estilos se ve reflejado de forma inmediata en todas las páginas que usen esta hoja de estilos. Es por eso que es la opción más utilizada.
Usar hojas de estilo en cascada
KompoZer dispone de un editor de hojas de estilo denominado CaScadeS (CSS,Cascade Style Sheets). CaScadeS puede ser utilizado para producir tanto hojas de estilo internas como externas. A diferencia de los estilos incrustados, las hojas de estilo internas o externas ayudan a mantener separadas la información del contenido de la del estilo.CaScadeS permite dos modos de edición de hojas de estilo:
a) Modo para principiantes: Este modo permite crear reglas asociadas a selectores de clase o selectores de tipo de elemento.
b) Modo avanzado: Este modo permite crear reglas sin restricciones.
Para proporcionar estilo al documento html que se edita, CaScadeS puede iniciarse haciendo clic en el menú Herramientas y seleccionando Editor CSS, apareciendo la siguiente ventana a continuación.
En KompoZer contamos con un botón específico para activar la Hoja de estilos CSS, se trata del icono CasCadeS: 
Para crear una hoja de estilo interna :
1) Dejaremos por defecto la opción URL(ninguna, incrustado en el documento.
(Opcional) Rellenaremos la información sobre Lista de medios y Título de la hoja de estilo.
2) Haremos clic en Crear hoja de estilo.
Para crear una hoja de estilo externa :
1) Pulsamos el icono Exportar hoja de estilos y cambiar a la versión exportada:
2) Seleccionamos el fichero en cuestión, Si no existe ya, se creará un nuevo fichero en el sistema de archivos local. Es recomendable, al guardarlo, asignarle el nombre completo (nombre.css)
(Opcional) Rellenaremos la información sobre Lista de medios y Título de la hoja de estilo.
3) Activaremos comprobar al crear una hoja de estilo alternativa si ésta es una alternativa.
Consejo 1: Guardaremos siempre el documento html antes de agregar una hoja de estilo local. Guardaremos también el documento inmediatamente antes de cerrar el editor CSS.
Consejo 2: Utilizaremos el botón Recargar del panel de la izquierda si la hoja de estilo no se descarga inmediatamente.
Crear reglas de estilo
Después de crear una o más hojas de estilo para el documento html, se pueden crear reglas para cada hoja de estilo de forma individual. Para usar una hoja de estilos concreta al crear o modificar reglas, selecciónela en el panel de la izquierda haciendo clic sobre ella con el botón izquierdo del ratón. El panel de la derecha mostrará entonces los detalles de la hoja de estilo en la pestaña General. Para crear reglas nuevas:
1) Haremos clic en el botón Regla del panel de la izquierda.
2) El panel de la derecha mostrará opciones para especificar el tipo de regla a crear.
Elegiremos una entre las siguientes:
• Estilo con nombre (introduzca abajo el nombre de la clase)
• Estilo aplicado a todos los elementos del tipo (introduzca el tipo abajo)
• Estilo aplicado a todos los elementos coincidentes con este selector
3) Rellenaremos el nombre de la regla.
4) Haremos clic en Crear regla de estilo.
En la parte derecha de esta pantalla de Hoja de estilos CSS, aparerá el elemento creado con el proceso anteriormente descrito.
Las reglas pueden ser definidas usando las pestañas de estilo (Texto, Fondo, Bordes, Caja, Aural) del panel de la derecha. Para ver todas las definiciones de una regla de estilo, seleccionaremos en el panel de la izquierda y haremos clic en la pestaña General del panel de la derecha. La pestaña General mostrará todas las definiciones aplicadas a la regla.
Las Hojas de estilo en cascada o estilos CSS (Cascade Style Sheet) permiten controlar el diseño y el aspecto de las páginas aumentando las posibilidades en cuanto a colores, tipos, tamaños y posicionamiento de cualquier tipo de objeto html, ya sea texto, imagen, tabla o campo de formulario (lo que sea que se pueda identificar con una etiqueta html).
Se puede definir una hoja de estilo como una colección de reglas que afectan a la apariencia de un documento o parte del mismo.
Las ventajas que presenta el uso de CSS son:
• Control sobre el diseño de la página: Con los estilos CSS se separa el contenido de la página web, un documento .html, de todas las reglas referidas a su diseño y aspecto, que están separadas en un documento externo he independiente con extension .css.
• Actualización automática del diseño: Empleando hojas de estilo se puede modificar la hoja de estilo individual y cambiar la apariencia de un sitio web completo.
• Discreción: Los navegadores más antiguos no pueden entender las reglas de las hojas de estilo pero no dan errores, simplemente las ignoran. De este modo no se mostrarán los efectos de diseño asignados pero sí el texto básico de las páginas y la apariencia del HTML.
Terminología empleada en CSS
Para comprender el funcionamiento de las hojas de estilo en cascada es necesario conocer los términos empleados en las mismas:
Propiedad: Una propiedad es una característica de un elemento que puede verse modificada mediante una hoja de estilo. Por ejemplo color o text-transform. Estas propiedades son muy numerosas permitiendo cambiar muchas características que hasta ahora no era posible.
Valor: Valor es el dato que se asigna a una determinada propiedad. Por ejemplo #FFFFFF es un valor para el color y uppercase es un valor de la propiedad text-transform.
Declaración: Una declaración esta formada por una propiedad y su valor. La declaración comienza por el nombre de la propiedad seguido de dos puntos y a continuación del valor de la propiedad. En nuestro ejemplo color: #FFFFFF; y text-transform: uppercase; son dos declaraciones.
Selector: Un selector es una etiqueta estándar de HTML o un nuevo nombre escrito por nosotros al cual se le quiere asignar una declaración. Por ejemplo: p, H1, strong son selectores del HTML.
Regla de estilo: Una regla es un selector junto con la declaración, por ejemplo, H1{color:rojo}.
Al crear reglas es posible agrupar selectores y declaraciones. Un ejemplo de regla con dos declaraciones sería:
strong { color: #FFFFFF; text-transform: uppercase; }
Para separar las declaraciones se utiliza punto y coma.
También se pueden agrupar los selectores como en este ejemplo :
H1,H2{color:rojo;font-family:arial}
Tanto los h1 y h2 serán mostrados de color rojo y tipo de letra arial. En este caso se utiliza la coma para separar los selectores.
Hoja de estilo: Una hoja de estilo es un conjunto de reglas que definen completamente el aspecto de todos los elementos de la página.
Colocación de las reglas de estilo:
Las reglas de estilo pueden ir colocadas:
1) Dentro de una etiqueta individual:
<etiqueta STYLE="propiedad1:valor;...;propiedadN:valor"> ...texto... </etiqueta>
Estas reglas sólo afectan a una etiqueta particular. No se utilizan las llaves para escribir las declaraciones sino que se escriben entre comillas dentro del modificador STYLE. Este tipo de colocación es el que implementa KompoZer a las capas en cuanto a tamaño y demás cuando las modificamos mediante la interfaz gráfica.
2) Afectando a toda la página:
Van colocadas dentro del HEAD de la página, entre dos etiquetas <STYLE type="text/css"> ..reglas...</STYLE> y afectan a todas las etiquetas del mismo tipo que aparezcan a lo largo de la página.
3) En un archivo externo llamado hoja de estilos cuya extensión es .CSS
Lo más interesante es coger todos los estilos que vayamos a utilizar en un web y extraerlos a un archivo externo en donde almacenamos esas reglas de estilo. Esos archivos tienen extensión CSS.
Para vincular las páginas al formato definido en el archivo CSS hay que colocar en cada una de ellas una etiqueta como esta dentro del HEAD:
<LINK REL="stylesheet" TYPE="text/css" HREF="archivo.css">
Donde archivo.css contiene las reglas de estilo.
De esta forma conseguimos establecer el formato uniforme para todas las páginas y además cualquier cambio que hacemos en la hoja de estilos se ve reflejado de forma inmediata en todas las páginas que usen esta hoja de estilos. Es por eso que es la opción más utilizada.
Usar hojas de estilo en cascada
KompoZer dispone de un editor de hojas de estilo denominado CaScadeS (CSS,Cascade Style Sheets). CaScadeS puede ser utilizado para producir tanto hojas de estilo internas como externas. A diferencia de los estilos incrustados, las hojas de estilo internas o externas ayudan a mantener separadas la información del contenido de la del estilo.CaScadeS permite dos modos de edición de hojas de estilo:
a) Modo para principiantes: Este modo permite crear reglas asociadas a selectores de clase o selectores de tipo de elemento.
b) Modo avanzado: Este modo permite crear reglas sin restricciones.
Para proporcionar estilo al documento html que se edita, CaScadeS puede iniciarse haciendo clic en el menú Herramientas y seleccionando Editor CSS, apareciendo la siguiente ventana a continuación.
En KompoZer contamos con un botón específico para activar la Hoja de estilos CSS, se trata del icono CasCadeS: Para crear una hoja de estilo interna :
1) Dejaremos por defecto la opción URL(ninguna, incrustado en el documento.
(Opcional) Rellenaremos la información sobre Lista de medios y Título de la hoja de estilo.
2) Haremos clic en Crear hoja de estilo.
Para crear una hoja de estilo externa :
1) Pulsamos el icono Exportar hoja de estilos y cambiar a la versión exportada:
2) Seleccionamos el fichero en cuestión, Si no existe ya, se creará un nuevo fichero en el sistema de archivos local. Es recomendable, al guardarlo, asignarle el nombre completo (nombre.css)(Opcional) Rellenaremos la información sobre Lista de medios y Título de la hoja de estilo.
3) Activaremos comprobar al crear una hoja de estilo alternativa si ésta es una alternativa.
Consejo 1: Guardaremos siempre el documento html antes de agregar una hoja de estilo local. Guardaremos también el documento inmediatamente antes de cerrar el editor CSS.
Consejo 2: Utilizaremos el botón Recargar del panel de la izquierda si la hoja de estilo no se descarga inmediatamente.
Crear reglas de estilo
Después de crear una o más hojas de estilo para el documento html, se pueden crear reglas para cada hoja de estilo de forma individual. Para usar una hoja de estilos concreta al crear o modificar reglas, selecciónela en el panel de la izquierda haciendo clic sobre ella con el botón izquierdo del ratón. El panel de la derecha mostrará entonces los detalles de la hoja de estilo en la pestaña General. Para crear reglas nuevas:
1) Haremos clic en el botón Regla del panel de la izquierda.
2) El panel de la derecha mostrará opciones para especificar el tipo de regla a crear.
Elegiremos una entre las siguientes:
• Estilo con nombre (introduzca abajo el nombre de la clase)
• Estilo aplicado a todos los elementos del tipo (introduzca el tipo abajo)
• Estilo aplicado a todos los elementos coincidentes con este selector
3) Rellenaremos el nombre de la regla.
4) Haremos clic en Crear regla de estilo.
En la parte derecha de esta pantalla de Hoja de estilos CSS, aparerá el elemento creado con el proceso anteriormente descrito.Las reglas pueden ser definidas usando las pestañas de estilo (Texto, Fondo, Bordes, Caja, Aural) del panel de la derecha. Para ver todas las definiciones de una regla de estilo, seleccionaremos en el panel de la izquierda y haremos clic en la pestaña General del panel de la derecha. La pestaña General mostrará todas las definiciones aplicadas a la regla.
0 comentarios: