Identificación del lenguaje css

Mariana diveni cárdenas Hernández

grupo: 608

informática

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

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?

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?

h2 {color: Green;}

h2 ---> es el selector

{color: Green;} ---> es la declaración

color ---> es la propiedad o atributo

Green ---> es el valor

EJEMPLO

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

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

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

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

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

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

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

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

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

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

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

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

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;

}

…

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; }

…

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

<!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

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:

…

<!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

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

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

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

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

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.

…

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).

…