Estilos en Cascada, a partir de ahora, css

Lo primero es tener una idea, aunque sea vagamente de que son los Estilos y para que nos van a servir en el diseño de Páginas Web. Os copio parte de un articulo que ligeramente nos dará una idea, el autor de dicho articulo es el director de la página desarroWeb.com

Entramos en materia con los antecedentes de esta tecnología, las razones por las que se han desarrollado las hojas de estilo en cascada, y los objetivos que trata de cumplir. El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fué concebido para otros usos (científicos sobretodo), distinto a los actuales, mucho más amplios. Para solucionar estos problemas los diseñadores han utilizado técnicas tales como la utilización de tablas imágenes transparentes para ajustarlas, utilización de etiquetas que no son estándares del HTML y otras. Estas “trampas” han causado a menudo problemas en las páginas a la hora de su visualización en distintas plataformas. Además, los diseñadores se han visto frustrados por la dificultad con la que, aun utilizando estos trucos, se encontraban a la hora de maquetar las páginas, ya que muchos de ellos venían maquetando páginas sobre el papel, donde el control sobre la forma del documento es absoluto. Finalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnología consiste en que las páginas web tienen mezclado en su código HTML el contenido del documento con las etiquetas necesarias para darle forma. Esto tiene sus inconvenientes ya que la lectura del código HTML se hece pesada y difícil a la hora de buscar errores o depurar las páginas. Aunque, desde el punto de vista de la riqueza de la información y la utilidad de las páginas a la hora de almacenar su contenido, es un gran problema que estos textos están mezclados con etiquetas incrustadas para dar forma a estos: se degrada su utilidad. Informe de Miguel Ángel Álvarez Director de DesarrolloWeb.com

Hay varias formas de usar los estilos y aunque quizás no lo sepamos, ya hemos estado

usándolos desde hace tiempo, incluso aquí, vimos no hace mucho, al querer poner un

scroll con colores determinados, un ejemplo de como usarlos. Y también suele verse en

la vista del código fuente en los mail del OE.

Es un código que aparece en el Head de los documentos y que tiene este aspecto:

La etiqueta <style> con el parametro type=”text/css” >

P

{

font-family: “Times New Roman”, Times, serif;

font-size: 12px;

font-style: italic;

font-weight: bold;

text-transform: capitalize;

color: #CC3300;

}

Cerrando la etiqueta de la forma que ya conocemos:

</style>

P = a parrafo

Entre claves { }

las instrucciones para que se aplicaran a la etiqueta <p>

Esto quiere decir que insertaremos un texto cualquiera en un documento Nuevo:

Este es un ejemplo de estilo, Este es un ejemplo de estilo,

Este es un ejemplo de estilo, Este es un ejemplo de estilo,

Este es un ejemplo de estilo, Este es un ejemplo de estilo,

Este es un ejemplo de estilo, Este es un ejemplo de estilo,

Seleccionando el texto, vamos al Inspector de Propiedades y en Formato:

convertimos todo el texto en un párrafo. Automáticamente, el estilo sera aplicado al texto quedando así:

Para ir viendo su funcionamiento, lo mejor es que abráis un documento totalmente nuevo, sin plantilla ni nada, una hoja en blanco total. Mejor ni siquiera centrar… e introducir el texto. Copiar el estilo que os puse mas arriba y pegar en el código fuente:

Ampliar

y convertir vuestro texto en un párrafo. Veréis el resultado tal como os indico en la captura. Podéis, para comprobar ir cambiando el código de colores, el tamaño de la fuente:

el color ahora es #00A000 y el tamaño 20px (siempre poner px, o pt, px= píxeles, pt= puntos)

Así crearíamos diferentes estilos y los iríamos aplicando de forma manual. Pero con el Dream hay una forma mas cómoda de hacerlo.

Abrimos un nuevo documento totalmente en blanco ( o el mismo una vez limpio de lo anterior) y procurando no insertar ninguna etiqueta, (recordar, <div> <span> etc.. ) insertamos un texto cualquiera:

En el menú principal, vamos a Ventana/Estilo CSS:

En la columna de la derecha, se abre una nueva ventana, que si trabajamos sobre un documento que aun no tiene vinculada una hoja de estilos, aparecerá así:

Clic en el icono de Nuevo estilo para crea uno:

Y se abre una nueva ventana, que inicialmente, es posible ya lleve por defecto otras selecciones marcadas y que nosotros vamos a cambiar así:

Crearemos el mismo estilo que vimos antes:

Y aceptamos. Si como ya dije, tenemos el texto dentro de una etiqueta párrafo, automáticamente se aplicaría y podemos comprobar en el código fuente que esta exactamente igual que el que habíamos puesto manualmente.

Así podríamos crear estilos para todas las etiquetas, pero todas quedaría igual, es decir, todos los párrafos serian igual, si lo aplicásemos a <td> todas las celdas tendrían el mismo color de fondo, si lo habíamos puesto, mismo color de texto…etc, etc. Estaríamos condenando las etiquetas.

También, de este modo, solo los aplicaremos a el documento que estemos creando en ese momento, por lo que en el próximo, habremos de crear otros estilos, que quizás si queramos hacerlo, pero si es para una misma pagina, seguro que habrá muchos que serán básicos y ya los tendríamos en el primero y no habría necesidad de volver a crearlos.

Por lo que si bien, se aplica automáticamente, y nos ahorrara un gran trabajo, al final, no nos sera muy rentable

Por lo tanto, continuaremos en el próximo tutorial ya de una forma definitiva que iremos viendo para aplicar a toda una plantilla de una pagina Web o a cualquier otro documento que vayamos a necesitar.