| TÍTULO: Cómo usar CSS con el editor de de páginas web NVU 1.0 | | RESUMEN: Conoce las ventajas del uso de hojas de estilo en cascada (CSS) y aprende a crearlas con el editor NVU 1.0 | | AUTOR: Montserrat Pérez Lobato |
Cómo usar hojas de estilo en cascada (CSS) con el editor de páginas web NVU 1.0 Introducción Cuando comenzó el desarrollo de páginas web, los desarrolladores directamente las “escribían” de principio a fin mediante su conocimiento del lenguaje HTML. Con el paso del tiempo aparecieron otros lenguajes que permitieron dar dinamismo a las web, como javascript o asp. También llegaron los editores de páginas web que trajeron la posibilidad de desarrollar sitios web teniendo conocimientos mínimos de HTML y permitiendo agilizar su implementación. Otro avance fue la aparición de las hojas de estilo en cascada, o CSS, que permiten simplificar aún mas el desarrollo de páginas web. Una vez que se sabe utilizar un editor web resulta muy interesante comenzar a usar las hojas de estilo en cascada. Al principio puede costar si estamos acostumbrados a mezclar el contenido y el estilo de presentación, pero una vez superada esta dificultad inicial nos daremos cuenta de todas las ventajas que esta práctica nos reporta y del tiempo que ahorramos a la hora de producir las web. Al terminar la lectura de este artículo se debe saber qué son las hojas de estilo en cascada, qué ventajas proporciona su uso, cómo implementar las reglas que las forman y por último se sabrá cómo crearlas y utilizarlas en el editor de páginas web NVU 1.0 con su editor CSS. Qué son las hojas de estilo en cascada (CSS) Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un concepto ligado al desarrollo de páginas web. Según la definición dada por la enciclopedia on-line wikipedia éstas “son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML)”. Lo que en definitiva viene a querer decir es que las CSS se utilizan para dar estilo a los documentos HTML, XML o XHTML y así poder separar en un documento de este tipo por un lado, su contenido y estructura, y por otro, su estilo y presentación. Así las hojas de estilo en cascada proporcionan un mecanismo simple para describir cómo se va a mostrar en pantalla una página web, cómo se va a imprimir o cómo se va a pronunciar su información a través de un dispositivo de lectura independientemente de lo que contenga la página. Para que todo quede mas claro veamos con un ejemplo muy sencillo qué es lo que se pretende. Cuando en una página web queremos resaltar un texto para que sea un título o encabezado de nivel 1 se utilizan las etiquetas o tags <H1> para indicar dónde comienza el título y </H1> para indicar su final, en medio de ellas se debe escribir el texto del título. Si no se utiliza una hoja de estilo en cascada y se quiere que el título tenga ciertas características o atributos especiales como por ejemplo, aparecer centrado o que el texto tenga un color determinado, rojo en este caso, se debe añadir el código siguiente a la etiqueta de comienzo de título de la siguiente forma: <H1 style="text-align: center; color: rgb(255, 0, 0);">Esto es un encabezado de nivel 1</H1> De esta forma se está mezclando el contenido de la página (en este caso el texto del título -> Esto es un encabezado de nivel 1) y su estructura (la utilización de etiquetas para crear un encabezado -> <H1></H1>) junto con la forma de presentación en la que se quería que ésta apareciera (título centrado y en color rojo -> style="text-align: center; color: rgb(255, 0, 0);"). Cada vez que se quiera centrar un encabezado o cambiar su color a rojo se debe añadir el código anterior a cada etiqueta H1. En cambio, si se utilizan CSS esto cambia radicalmente, teniendo que escribir el código una sola vez y así no se tendrá que estar repitiendo cada vez que se defina un encabezado de nivel 1. Además, al separar los estilos del contenido y estructura de las páginas los desarrolladores podrán controlar el formato de múltiples páginas al mismo tiempo y cualquier cambio que quieran realizar en un elemento de la CSS afectará a todas las páginas que lo utilizan sin necesidad de ir realizando el cambio una por una. Ventajas de la utilización de las CSS Ahora que ya sabemos lo que es una hoja de estilo vamos a ver cuales son las principales ventajas que reporta su utilización: -
En primer lugar y como ya hemos visto, permiten centralizar el control de la presentación de un sitio web completo con lo que a la hora de realizar modificaciones se reduce enormemente el tiempo de desarrollo puesto que cuando se realice en la CSS un cambio en el estilo marcado para un elemento (un párrafo, un encabezado,…) éste afectará a todas las páginas vinculadas a esa CSS en las que aparezca dicho elemento.
Implementación de una hoja de estilo en cascada Las CSS están compuestas por reglas que son las especificaciones sobre el estilo de uno o más elementos. Cada regla se compone de dos partes: selector y declaración. El selector sirve de enlace entre el documento y el estilo, determinando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que determina el efecto y debe ir entre corchetes {}. A su vez, la declaración está formada por una propiedad y su valor. Una declaración puede estar compuesta por una o mas propiedades y cada vez que se defina una propiedad se debe terminar con el punto y coma (;). A modo de ejemplo, una CSS podría estar formada por estas 2 reglas: H1 {color: red;}
p {
padding: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
text-align: center;
}
Como se puede ver, la primera regla se aplica a los elementos encabezado de nivel 1 como indica el selector H1. La declaración ({color: red;}) nos indica que la propiedad que se va a ver afectada es el color del encabezado y el valor será rojo (red). En la segunda regla, se puede ver que el elemento afectado por el estilo es el párrafo, como podemos ver por el selector p. La declaración para esta segunda regla es mas compleja puesto que está formada por mas de una propiedad. Estas dos reglas harán que cada vez que se defina un elemento H1 (<H1></H1>) o p (<p></p>)en el documento o documentos que estén vinculados a esta hoja de estilos en cascada, éstos se verán afectados por las declaraciones de sus respectivas reglas. Ya sabemos lo básico para crear reglas de estilo para las CSS. Vamos a ver por último una serie de conceptos que nos ayudarán a crear reglas mas eficaces: H1, H2, H3 {color: red;}
p {font-family: "Times New Roman";}
Ejemplo de declaración de una clase para un párrafo: p.cambiarcolor {color: green;}
Para aplicar la clase anterior a un párrafo concreto tendríamos que escribir el código siguiente: <p class="cambiarcolor">Este párrafo se escribe en color verde</p>
Se puede conseguir que una clase se pueda utilizar para cualquier elemento de un documento. Para ello se debe utilizar el asterisco (*) o simplemente no poner nada a la izquierda del punto cuando se define la clase. Ejemplo:
*.letrapequenya {
font-size: 8px;
}
.letragrande {
font-size: 48px;
}
Unos ejemplos de utilización de las clases genéricas anteriores podrían ser: <p class="letrapequenya">Este párrafo se escribe con un tamaño de letra pequeña</p>
<H1 class="letragrande">Este encabezado se escribe con tamaño de letra grande</H1>
A estas alturas nos podemos preguntar ¿se pueden aplicar las propiedades de varias clases a un mismo elemento?. Pues sí, lo único que habrá que hacer es separar los nombres de cada clase con un espacio en blanco ( ). Por ejemplo: 
¿Ha quedado clara la diferencia entre una regla y una clase en CSS?. Las reglas se aplican a todos los elementos para los que se ha definido mientras que las clases sólo se aplican a aquellos elementos que la quieran aplicar mediante la utilización del atributo class en su definición. Por ejemplo, supongamos que tenemos una CSS en la que se ha definido una regla para los párrafos y una clase también para este elemento. Cada vez que aparezca un párrafo en el documento fuente HTML se le aplicará el estilo definido en la regla, pero sólo se le aplicará el estilo definido en la clase para párrafos a aquellos párrafos que en su definición incluyan el atributo class=”nombre de la clase para párrafos o de la clase genérica”. -
Además de las clases en las CSS se pueden utilizar selectores ID que tienen una función similar a las clases pero con algunas matizaciones. La diferencia estriba en su definición, en el atributo para utilizarlos y en la cantidad de elementos a los que puede aplicarse. En cuanto a su definición, en lugar de utilizar como en las clases un punto (.) se utiliza el símbolo almohadilla (#). Para proceder a su aplicación se emplea el atributo id en lugar de class. La principal diferencia con una clase es que los selectores ID solo se pueden aplicar a un único elemento concreto, es decir, una vez que se ha utilizado para un elemento ya no se puede aplicar a otro aunque éste sea del mismo tipo. Por esta razón es aconsejable utilizar las clases en lugar de los selectores ID. Ejemplos de definición de dos selectores ID, el primero para un párrafo y el segundo genérico: p#grosormarco { border-width: 2px;}
*#colormarco {border-color: blue;}
Utilizando los selectores ID dentro del documento: <p id="colormarco"> … </p>
<p id ="grosormarco"> … </p>
-
Cómo se ha podido ver, se pueden crear distintos estilos para un mismo elemento mediante reglas, clases, selectores ID o el atributo style que, en determinados momentos pueden entrar “en conflicto”. Entonces ¿Qué definiciones de estilo prevalecen sobre el resto?. El orden de aplicación de las definiciones de estilo es desde la mas específica a la mas global, es decir, el orden de aplicación atendiendo a su importancia es: Tipos de hojas de estilo en cascada Existen 2 tipos de hojas de estilo en cascada: -
Las hojas de estilo externas son aquellas que están en un fichero aparte, distinto a los archivos que contienen las páginas web. Los archivos que contienen este tipo de hojas de estilo suelen tener la extensión .css. Para referirse a estos archivos dentro del documento se utiliza la etique link. Veamos un ejemplo sencillo del código de una página web que utiliza una hoja de estilo en cascada externa: <html> <head> <link rel="stylesheet"type="text/css" href="hoja_estilo.css" /> </head> <body> <H1>Encabezado H1 con estilo definido en una CSS</H1> <p>Parrafo con estilo definido en una CSS</p> </body> </html> donde hoja_estilo.css es el nombre del archivo que contiene las reglas de estilo y cuyo contenido podría ser el siguiente: 
En cambio, las hojas de estilo internas se definen en el propio documento al que se le quiere dar estilo, y como es lógico, sólo se aplican a dicho documento. Generalmente, se definen en la sección head, de esta forma, los estilo implementados se reconocen antes de que la página se cargue por completo y se irán aplicando a los elementos a medida que estos se van mostrando. La forma de crear un hoja de estilo interna es definiendo un bloque utilizando la etiqueta style (no confundir atributo style con etiqueta style). En el interior del bloque se deben implementar las reglas de estilo. Veamos un ejemplo de una página web que contiene una hoja de estilo en cascada interna: 
Qué hacer cuando no se quiere aplicar lo definido en las hojas de estilo La pregunta lógica que nos puede surgir si siempre se han desarrollado páginas web sin utilizar hojas de estilo es ¿y qué pasa si en un momento puntual no se quiere utilizar el estilo definido en una CSS para un elemento concreto?. Es decir, supongamos que hemos definido en <st1:PersonName ProductID="la CSS" w:st="on"> la CSS el estilo con el que queremos que aparezcan los párrafos en la página: su alineación, su sangría, el tamaño de la fuente. Ahora sabemos que cada vez que declaremos un párrafo se aplicará éste estilo. ¿y si queremos que esto sea así excepto para un párrafo concreto en el que queremos, por ejemplo, que el tamaño de la fuente sea mayor?. ¿No hay forma de conseguirlo?. La respuesta es sí. Simplemente al declarar ese párrafo concreto en la página debemos añadir los atributos que queremos cambiar. Esto se consigue con el atributo style, que ya se explicó en una sección anterior. Por ejemplo:  Utilizar CSS en el editor NVU 1.0 Ahora que ya ha quedado claro qué es una hoja de estilo en cascada y cómo crearla vamos a utilizarlas en un editor gratuito de páginas web: NVU 1.0. Para facilitar la tarea de crear CSS, NVU 1.0 dispone de un editor de hojas de estilo denominado CaScadeS<spanstyle='font-weight:normal;'>. Para acceder al editor se debe ir al menú Herramientas -> Editor CSS.  Acceso al editor CSS de NVU 1.0 Al elegir esta opción aparece la ventana principal del editor:  Ventana principal del editor CSS de NVU 1.0 El editor permite crear tanto hojas de estilo internas como externas e incluso utilizar hojas de estilo externas que ya estén creadas. Si queremos crear una hoja de estilo interna se debe pulsar el botón <style>  y si se quiere crear una hoja de estilo externa o utilizar una ya existente se pulsará el botón <link>  . Una vez creada la CSS interna o externa se deberán definir una a una las reglas que la describan con el botón Regla  Creación de una CSS interna Vamos a comenzar creando una hoja de estilo interna. Al pulsar el botón <style> a la derecha de la ventana del editor nos aparecen las opciones para crearla. Tanto el campo de Lista de medios como el del Título son opcionales.  Creación de una hoja de estilo en cascada interna con el editor CSS de NVU 1.0 Al pulsar el botón Crear hoja de estilo aparece en la ventana del editor la nueva hoja de estilo interna.  Información de una hoja de estilo en cascada interna creada con el editor CSS de NVU 1.0 Dentro de la página HTML en la sección HEAD se añade la sección style que contiene la hoja interna creada. El código generado es el siguiente: <style title="CSS interna de ejemplo" type="text/css"></style> Creación o utilización de una CSS externa Para crear una hoja de estilos externa o utilizar una ya existente se debe pulsar el botón <link> . Si se quiere importar una hoja de estilos externas ya existente se debe introducir en el campo URL la dirección al archivo .css que contiene dicha hoja. Con el botón Elegir archivo se podrá buscar su ubicación mas fácilmente. Los campos Lista de medios y Título son opcionales.  Importación de una hoja de estilo en cascada externa existente con el editor CSS de NVU 1.0 Al pulsar el botón Crear hoja de estilo ya tendremos disponibles las reglas que contiene esta hoja de estilos.  Detalles de una hoja de estilo en cascada externa existente El código que se añade a la página HTML en la sección HEAD es el siguiente: <link title="CSS externa existente de ejemplo" rel="stylesheet" href="file:///C:/ARTICULO_CSS_NVU/ejemplos/tipos_CSS/hoja_estilo.css" type="text/css"> Si lo que se quiere es crear una hoja de estilos externa partiendo de cero, es decir, que no existe, en el campo URL se debe introducir el nombre del archivo con extensión .css. De esta forma se creará un nuevo fichero con ese nombre en el sistema de archivos local. Los campos Lista de medios y Título son opcionales.  Creación de una hoja de estilo en cascada externa con el editor CSS de NVU 1.0 Al pulsar el botón Crear hoja de estilo ya tenemos disponible la nueva hoja de estilo externa en el editor CSS de NVU 1.0.  Detalles de una hoja de estilo en cascada externa nueva El código HTML generado en el documento al crear esta hoja de estilo externa nueva es: <link title="CSS externa nueva de ejemplo" rel="stylesheet" href="hoja_estilo_2.css" type="text/css"> Creación de reglas de estilo Ahora ya se pueden empezar a crear reglas que den estilo al documento. Lo primero es seleccionar en la parte izquierda de la ventana del editor CSS la hoja de estilo a la que se quiere añadir una nueva regla. Se pueden añadir reglas tanto a hojas de estilo internas como a hojas de estilo externas creadas desde cero o a las ya existentes. La forma de añadir una regla nueva es la misma independientemente del tipo de hoja seleccionada y se deben añadir de una en una. Como estamos empezando a utilizar el editor de NVU vamos a ver sólo las opciones para principiantes del editor. Para ello debemos deseleccionar la opción Modo avanzado. Después se debe pulsar el botón Regla y así aparecen las dos opciones que el editor CSS nos ofrece en este caso: 
Opciones para crear reglas de estilo con el editor CSS de NVU 1.0 La primera opción, estilo con nombre (introduzca abajo el nombre de la clase) nos permite crear una clase global o genérica, es decir, una clase que se puede utilizar para cualquier elemento del documento. Recordemos que posteriormente para utilizar el estilo de la clase creada se debe utilizar el atributo class en el elemento al que se desea aplicar. Para crear la clase se debe introducir el nombre de la clase y pulsar el botón Crear regla de estilo. La opción estilo aplicado a todos los elementos del tipo (introduzca el tipo abajo) permite crear una regla para un elemento del documento. Para crear la regla se debe introducir el nombre de un elemento que sirva de enlace con el documento (p, h1, h6) y pulsar el botón Crear regla de estilo. En ambos casos el proceso de definición de las propiedades es el mismo. Se deben ir seleccionando en las pestañas disponibles en la parte derecha de la ventana del editor (Texto, Fondo, Bordes, Caja, Listas y Aural) las opciones deseadas.  Pestañas para definir las propiedades de estilo de una regla o clase A modo de ejemplo vamos a crear una regla de estilo que se aplique al elemento párrafo (p). Para ello utilizamos la segunda opción, estilo aplicado a todos los elementos del tipo (introduzca el tipo abajo), e introducimos en el campo el tipo de elemento párrafo, es decir, p. Por último pulsamos el botón Crear regla de estilo. Una vez creada la regla seleccionamos la pestaña Texto y elegimos las opciones siguientes:  Ejemplo de regla de estilo Así se habrá añadido automáticamente la siguiente regla de estilo:  Código HTML de la regla de estilo creada Hay que tener en cuenta que si se utilizan hojas de estilo en cascada que provengan de distintas procedencias es posible que algunas se solapen y por tanto es posible que no se obtenga el efecto deseado por este motivo. Hay que tener cuidado con este aspecto. Enlaces:
Dificultad:  | 
Bienvenido Invitado
Login:
