Untitled

¿Qué es CSS?

• Se trata de una tecnología utilizada para dotar de cualidades visuales y estéticas a una página web.
• Las siglas CSS (Cascading Style Sheets) significan «Hojas de estilo en cascada» y parten de un concepto simple pero muy potente: aplicar estilos (colores, formas, márgenes, etc...) a uno o varios documentos (generalmente documentos HTML, páginas webs) de forma masiva.
• Se le denomina estilos en cascada porque se aplican de arriba a abajo (siguiendo un patrón denominado herencia que trataremos más adelante) y en el caso de existir ambigüedad, se siguen una serie de normas para resolverla.
• 
• Caption: Ejemplo de código CSS.

Sintaxis.

• El código CSS es un código escrito con texto, pero también tiene unas normas de escritura (sintaxis), por otra parte bastante lógicas.
• En primer lugar, si lo que pretendemos mediante CSS es modificar el estilo de una o varias etiquetas HTML en una página web, deberemos indicar a qué etiqueta o etiquetas afecta la modificación. Esta parte del código se llama Selector. Para indicar el selector, salvo casos especiales, escribiremos el nombre de la etiqueta o una referencia a ella. por ejemplo, si en esta parte escribimos h1, el estilo que apliquemos afectará a todas las etiquetas h1 que haya en la página.
• Despúes tendremos que escribir qué es lo que queremos cambiar de esa etiqueta y cómo. Todo ello formará un bloque, que llamaremos declaración. En CSS se emplean los signos { y } para delimitar este bloque;( fíjate bien que son llaves); estos signos en un teclado normal los encontrarás a la derecha de la letra Ñ, y se escriben pulsando la tecla Alt Gr a la vez que su tecla correspondiente. De momento tenemos lo siguiente:
• Ejemplo: h1 { }
• 

Slide 3

• Dentro de las llaves escribirémos qué es lo que queremos cambiar y el nuevo valor que le daremos. A lo que queremos cambiar le llamamos propiedad, y lo indicamos mediante una palabra clave. Cada propiedad tiene un valor (o varios). El valor indica la variación de la propiedad, es decir, en cuanto o en qué ha cambiado la propiedad.
• Por ejemplo, si queremos cambiar el tamaño de los títulos con etiqueta h1 utilizaremos el siguiente código:
• h1 { font-size : 12px }
• En este ejemplo h1 indica las etiquetas a las que debemos aplicar este estilo; font-size indica la propiedad (el tamaño de letra), mientras que 12px es el valor, es decir la variación de la propiedad (el cambio de tamaño).
• Como puede observarse la propiedad y e valor están separados por el signo de dos puntos.
• Dentro de una misma declaracion (signos de llaves) puede haber más de una propiedad con su valor, éstas deben ir separadas por el signo de punto y coma.
• Ejemplo: h1 { font-size : 12px; color : blue; }

Slide 4

• En este ejemplo las etiquetas h1 reciben dos propiedades, con la primera cambiamos el tamaño de letra, y con la segunda cambiamos el color de letra.
• El signo de punto y coma, se puede poner al final de la última propiedad, aunque no es obligatorio resulta conveniente, por si queremos añadir alguna propiedad más.
• El lenguaje CSS se basa en este tipo de estructura, que podemos resumir de la siguiente forma:
• selector { propiedad : valor; propiedad : valor; }
• El conjunto completo de selector con su declaración (encerrada entre llaves) y las propiedades se llama regla CSS o simplemente regla. El siguiente esquema muestra cada una de las partes que componen una instrucción o regla en CSS.

Normas de Escritura.

• El tratamiento de los espacios en blanco y de los saltos de línea en el editor de textos para los archivos CSS es similar al de los archivos HTML, es decir, al escribir el código:
• Sólo se tiene en cuenta un sólo espacio en blanco, ignorando los demás, es indiferente por tanto si escribimos uno o varios espacios en blanco en el texto.
• Los saltos de línea son indiferentes a la escritura, considerándose éstos como un espacio en blanco.
• También son indiferentes las tabulaciones, considerando todo el espacio que dejan como un único espacio.
• Podemos organizar el contenido de nuestro archivo de forma que nos quede más claro, usando espacios en blanco, tabulaciones, y saltos de línea.
• Cuando hay varios selectores, tenemos unas normas que indican la relación entre ellos, (si se aplica a todos, o si estan anidados, etc.) en este caso los espacios en blanco tienen también un significado, y las propias normas (que veremos en el tema "Selectores") indican si debe haber espacio o no entre ellos. En todo caso siempre es indiferente que haya un espacio o varios, pues siempre se considera como un único espacio.
• 

Slide 6

• COMENTARIOS:
• El lenguaje CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran por completo cualquier comentario de los archivos CSS, por lo que es normal utilizarlos para estructurar de forma clara los archivos CSS complejos.
• El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */ , tal y como vemos en el siguiente ejemplo:
• /* Este es un comentario en CSS */
• Al igual que en los comentarios de HTML debemos abstenernos de poner datos privados o que no queremos que se sepan, ya que cualquiera puede acceder a ellos a traves del "codigo fuente" de la página.
• 
• Caption: Sintaxis de un comentario en CSS.

Slide 7

• Si el valor se indica como una o varias palabras sin ningún carácter que las separe (paréntesis, comas, barras, etc.) el valor de la propiedad se debe indicar tal y como se muestra y con esas palabras en el mismo orden. Ejemplo: valor: left | right . (indica que podemos escoger entre los valores indicados)
• Si el valor se indica como una o varias palabras encerradas entre los signos < .. > el valor de la propiedad no es esa palabra, sino lo que ella indica. Ejemplo: valor: <porcentaje> | <medida> . (indica que debemos escribir una medida o porcentaje y no las palabras "medida" o "porcentaje")
• Si los valores se indican separados por una barra simple (carácter | ) sólo se puede tomar uno de los valores indicados. Por ejemplo, la notación <porcentaje> | <medida> | inherit indica que la propiedad solamente puede tomar como valor la palabra reservada inherit o un porcentaje o una medida.

Slide 8

• Si los valores se indican separados por una barra doble (símbolo || ) el valor de la propiedad puede tomar uno o más valores de los indicados y en cualquier orden. Por ejemplo, la notación <color> || <estilo> || <medida> indica que la propiedad puede tomar como valor cualquier combinación de los valores indicados y en cualquier orden.
• En cada valor o agrupación de valores se puede indicar el tipo de valor: opcional, obligatorio, múltiple o restringido.
• El carácter * indica que el valor ocurre cero o más veces; Ejemplo: el valor [<family-name> , ]* indica que el valor de tipo <family-name> seguido por una coma se puede incluir cero o más veces
• El carácter + indica que el valor ocurre una o más veces;
• El carácter ? indica que el valor es opcional: ejemplo: El valor <url>? <color> significa que la URL es opcional y el color obligatorio y en el orden indicado.

Slide 9

• El carácter {número_1, número_2} indica que el valor ocurre al menos tantas veces como el valor indicado en número_1 y como máximo tantas veces como el valor indicado en número_2; ejemplo: el valor [<medida> | thick | thin] {1,4} indica que se pueden escribir entre 1 y 4 veces un valor que sea o una medida o la palabra thick o la palabra thin.
• Como esto en principio puede parecer un poco complicado, la mejor forma de entender este tipo de notación para las propiedades de CSS es observar la definición de cada propiedad.

Modelo de cajas.

• Característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.
• Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.
• 
• Caption: Modelado de caja de Google.

Partes de la caja.

• Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
• Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
• Borde (border): línea que encierra completamente el contenido y su relleno.
• Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
• Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
• Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.
• 

Slide 12

• El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos).
• Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando imagenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes.

CSS en un Sitio web.

• Las instrucciones de estilo se pueden vincular de varias maneras al código HTML. Una de ellas es escribirlas directamente en la etiqueta HTML (inline), una serie de instrucciones en el área de cabecera del documento (embedded) o bien colocarlas externamente en un archivo aparte (extern).
• Respecto a la separación entre estructura y representación que indicamos al principio, lo mejor es realizarlo a la variante externa. Puesto que los estilos inline se escriben directamente en el código fuente, sólo resultan apropiados, en el mejor de los casos, para la fase de desarrollo o para la comprobación de determinados valores. Además, su sintaxis varía muy poco de la sintaxis propia de las instrucciones de estilo. Los estilos embedded no se pueden utilizar con efecto en todo el archivo, sino que se han de escribir hoja por hoja, lo que complica considerablemente su mantenimiento. Con ello se ve muy limitada la flexibilidad que se gana utilizando estilos externos.
• 

Slide 14

• Para incorporar instrucciones de estilo en el área de cabecera <head> del documento HTML se necesita, en primer lugar, el elemento <style> con el atributo type=”text/css”. En este elemento se escriben todas las instrucciones en la sintaxis que ya hemos descrito.
• <head>
• <!-- demás elementos-->
• <style type=”text/css”>
• h1 {color:#000033;}
• h2 {color:#003300:}
• <style>
• </head>
• Además del título azul <h1>, aquí también se especifica que los títulos <h2> han de ir en color verde. Observe que estas instrucciones son válidas para todas las instancias de <h1> y <h2> que aparecen en el documento. No olvide cerrar el bloque con la etiqueta final </style>.
• El bloque <style>…</style> se ha de introducir completo en el área de cabecera <head> de cada archivo.

Slide 15

• Escriba en él todas las instrucciones CSS que desee, utilizando exclusivamente la sintaxis descrita en el apartado anterior, por ejemplo:
• h1 {
• background-color: #c0c0c0;
• color: #000033;
• }
• La referencia del archive CSS en un document HTML se escribiría así:
• <head>
• <!-- demás elementos -->
• <link rel=”stylesheet” type=”text/css” href=”css/miestilo.css”>
• </head>
• Ha valido la pena escribir el(los) archive(s) CSS en un subdirectorio propio. Su ruta de acceso se puede indicar de manera relativa o absoluta.