2. CSS son las siglas de Cascading Style Sheets - Hojas de
Estilo en Cascada - que es un lenguaje que describe la
presentación de los documentos estructurados en hojas
de estilo para diferentes métodos de interpretación, es
decir, describe como se va a mostrar un documento en
pantalla, por impresora, por voz (cuando la información
es pronunciada a través de un dispositivo de lectura) o
en dispositivos táctiles basados en Braille.
DEFINICIÓN DE CSS
3. CSS es una especificación desarrollada por el W3C (World Wide
Web Consortium) para permitir la separación de los contenidos
de los documentos escritos en HTML, XML, XHTML, SVG, o
XUL de la presentación del documento con las hojas de estilo,
incluyendo elementos tales como los colores, fondos, márgenes,
bordes, tipos de letra..., modificando as la apariencia de una
página web de una forma más sencilla, permitiendo a los
desarrolladores controlar el estilo y formato de sus documentos.
¿PARA QUE SIRVE?
4. El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los
elementos en los documentos estructurados, y que forman la sintaxis de las
hojas de estilo. Cada regla consiste en un selector y una declaración, esta
última va entre corchetes y consiste en una propiedad o atributo, y un valor
separados por dos puntos.
Selector
¿CÓMO FUNCIONA?
5. h2 {color: Green;}
h2 ---> es el selector
{color: Green;} ---> es la declaración
color ---> es la propiedad o atributo
Green ---> es el valor
EJEMPLO
6. El Selector especifica que elementos HTML van a estar afectados por esa
declaración, de manera que hace de enlace entre la estructura del documento y
la regla estilística en la hoja de estilo
SELECTOR
7. La Declaración que va entre corchetes es la información de estilo que indica
cómo se va a ver el selector. En caso de que haya más de una declaración se
usa punto y coma para separarlas.
DECLARACIÓN
8. Dentro de la declaración, la Propiedad o Atributo define la interpretación del
elemento asignándosele un cierto Valor, que puede ser color, alineación, tipo
de fuente, tamaño..., es decir, especifican qué aspecto del selector se va a
cambiar.
PROPIEDAD O ATRIBUTO Y VALOR
9. La información CSS se puede proporcionar por varias fuentes, ya sea adjunto
como un documento por separado o incorporado en el documento HTML, y
dentro de estas posibilidades destacan tres formas de dar estilo a un
documento web:
TIPOS DE ESTILOS
10. La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo
con el código HTML al cal estar vinculado a través del elemento link, que
debe ir situado en la sección head. Es la manera de programar ms eficiente, ya
que separa completamente las reglas de formato para la página HTML de la
estructura básica de la página
HOJA DE ESTILO EXTERNA
11. La Hoja de Estilo Interna esta incorporada a un documento HTML, a través
del elemento style dentro de la sección head, consiguiendo de esta manera
separar la información del estilo del código HTML.
HOJA DE ESTILO INTERNA
12. El Estilo en Línea sirve para insertar el lenguaje de estilo directamente dentro
de la sección body con el elemento style. Sin embargo, este tipo de estilo no se
recomienda pues se debe intentar siempre separar el contenido de la
presentación.
ESTILO EN LÍNEA
13. La principal ventaja de CSS sobre el lenguaje HTML o similar, es que el estilo se puede guardar
completamente por separado del contenido siendo posible, por ejemplo, almacenar todos los
estilos de presentación para una web de 10.000 páginas en un sólo archivo de CSS.
CSS permite un mejor control en la presentación de un sitio web que los elementos de HTML,
agilizando su actualización.
Aumento de la accesibilidad de los usuarios gracias a que pueden especificar su propia hoja de
estilo, permitiéndoles modificar el formato de un sitio web según sus necesidades, de manera que
por ejemplo, personas con deficiencias visuales puedan configurar su propia hoja de estilo para
aumentar el tamaño del texto.
El ahorro global en el ancho de banda es notable, ya que la hoja de estilo se almacena en cache
después de la primera solicitud y se puede volver a usar para cada página del sitio, no se tiene que
descargar con cada página web. Por otro lado, quitando todo lenguaje de marcado en la
presentación en favor del uso de CSS reduce su tamaño y ancho de banda hasta más del 50%,
esto beneficia al dueño del sitio web con menos ancho de banda y costes de almacenamiento, as
como a los visitantes para los cuales las páginas se van a cargar más rápido.
Una página puede tener diferentes hojas de estilo para mostrarse en diferentes dispositivos, como
pueden ser impresoras, lectores de voz, o móviles.
VENTAJAS DE CSS
14. Para definir el estilo de una etiqueta HTML en particular, sólo debe usarse el nombre de la etiqueta (sin los caracteres < y >).
Por ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
tag {properties}
-->
</STYLE>
</HEAD>
<BODY>
<tag> ... </tag>
...
</BODY>
</HTML>
SINTAXIS
15. También se puede aplicar un estilo a múltiples etiquetas al separar los nombres
de las mismas con una coma (,). La sintaxis de tal selector, denominado
selector múltiple, es:
type-selector1, type-selector2 { /* style */ }
SELECTORES MÚLTIPLES
16. El selector anidado se usa para crear una regla que se aplica solamente cuando
el elemento Y está anidado dentro del elemento X. Su sintaxis es:
selector_X selector_Y { /* style; */ }
Para el siguiente código HTML:
<p> <i>Nota</i>, esto es una <b>advertencia</b> </p>
<b> Leer detenidamente </b>
La siguiente regla sólo afecta a la palabra "advertencia" (la única rodeada por
etiquetas <B> que están a su vez anidadas dentro de un grupo de etiquetas
<P>):
P B { font-weight: bold; color: red; }
SELECTOR ANIDADO
17. Cuando se crean archivos CSS complejos con decenas o cientos de reglas, es
habitual que los estilos que se aplican a un mismo selector se definan en
diferentes reglas:
h1 { color: red; }
...
h1 { font-size: 2em; }
...
h1 { font-family: Verdana; }
AGRUPACIÓN DE REGLAS
18. Cuando el selector de dos o más reglas CSS es idéntico, se pueden agrupar las
declaraciones de las reglas para hacer las hojas de estilos más eficientes:
h1 {
color: red;
font-size: 2em;
font-family: Verdana;
}
…
19. El ejemplo anterior tiene el mismo efecto que las tres reglas anteriores, pero es
más eficiente y es más fácil de modificar y mantener por parte de los
diseñadores. Como CSS ignora los espacios en blanco y las nuevas
líneas, también se pueden agrupar las reglas de la siguiente forma:
h1 { color: red; font-size: 2em; font-family: Verdana; }
…
20. Una de las características principales de CSS es la herencia de los estilos
definidos para los elementos. Cuando se establece el valor de una propiedad
CSS en un elemento, sus elementos descendientes heredan de forma
automática el valor de esa propiedad. Si se considera el siguiente ejemplo:
HERENCIA
21. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv ="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
body { color: blue; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>
EJEMPLO
22. Aunque la herencia de estilos se aplica automáticamente, se puede anular su
efecto estableciendo de forma explícita otro valor para la propiedad que se
hereda, como se muestra en el siguiente ejemplo:
…
23. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
body { font-family: Arial; color: black; }
h1 { font-family: Verdana; }
p { color: red; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>
EJEMPLO
24. En las hojas de estilos complejas, es habitual que varias reglas CSS se apliquen
a un mismo elemento HTML. El problema de estas reglas múltiples es que se
pueden dar colisiones como la del siguiente ejemplo:
p { color: red; }
p { color: blue; }
<p>...</p>
COLISIONES DE ESTILOS
25. El método seguido por CSS para resolver las colisiones de estilos se muestra a
continuación:
Determinar todas las declaraciones que se aplican al elemento para el medio CSS
seleccionado.
Ordenar las declaraciones según su origen (CSS de navegador, de usuario o de
diseñador) y su prioridad (palabra clave !important).
Ordenar las declaraciones según lo específico que sea el selector. Cuanto más
genérico es un selector, menos importancia tienen sus declaraciones.
Si después de aplicar las normas anteriores existen dos o más reglas con la
misma prioridad, se aplica la que se indicó en último lugar.
COLISIÓN
26. En el siguiente ejemplo, la regla CSS que prevalece se decide por lo específico
que es cada selector:
p { color: red; }
p#especial { color: green; }
* { color: blue; }
<p id="especial">...</p>
EJEMPLO
27. Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y
márgenes de los elementos y para establecer el tamaño de letra del texto.
Todas las medidas se indican como un valor numérico entero o decimal
seguido de una unidad de medida (sin ningún espacio en blanco entre el
número y la unidad de medida).
UNIDADES DE MEDIDA
28. CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las
medidas relativas definen su valor en relación con otra medida, por lo que para
obtener su valor real, se debe realizar alguna operación con el valor indicado.
Las unidades absolutas establecen de forma completa el valor de una medida,
por lo que su valor real es directamente el valor indicado.
…
29. Si el valor es 0, la unidad de medida es opcional. Si el valor es
distinto a 0 y no se indica ninguna unidad, la medida se ignora
completamente, lo que suele ser uno de los errores más habituales
de los diseñadores que empiezan con CSS. Algunas propiedades
permiten indicar medidas negativas, aunque habitualmente sus
valores son positivos. Si el valor decimal de una medida es inferior
a 1, se puede omitir el 0 de la izquierda (0.5em es equivalente a
.5em).
…
