Identificación del lenguaje CSS

IDENTIFICACIÓN DEL
LENGUAJE CCS
- Definición de CSS y especificación oficial
- Funcionamiento básico y formas de conclusión de CSS en
XHTML
- Uso de comentarios y sintaxis de la definición de cada
propiedad
- Selectores, agrupación, reglas y herencia
- Colisiones de estilos, unidades medidas y colores

FUNCIONES DE CSS Y
ESPECIFICACIÓN OFICIAL
 Hojas de Estilo en Cascada (Cascading Style Sheets) es el
lenguaje de hojas de estilo utilizado para describir el aspecto y el
formato de un documento escrito en un lenguaje de marcas,
esto incluye varios lenguajes basados en XML como son XHTML o
SVG.
 Las especificaciones de CSS son mantenidos por el Consorcio
World Wide Web (W3C). Tipo de medio de Internet ( tipo MIME )
text/css está registrado para su uso con CSS por RFC 2318 (marzo
de 1998), y también opera un libre servicio de validación de CSS
.

CÓDIGO
selector [, selector2, ...] [:pseudo-class][::pseudo-element] {
propiedad: valor;
[propiedad2: valor2; ...]
}
/* comentarios */

FUNCIONAMIENTO BÁSICO Y FORMAS DE
CONCLUSIÓN DE CSS EN XHTML
 Una de las principales características de CSS es su flexibilidad y
las diferentes opciones que ofrece para realizar una misma
tarea. De hecho, existen tres opciones para incluir CSS en un
documento HTML.
 Los estilos se definen en una zona específica del propio
documento HTML. Se emplea la etiqueta <style> de HTML y
solamente se pueden incluir en la cabecera del documento
(sólo dentro de la sección <head>).

CÓDIGO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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 estilos CSS en el propio documento</title>
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>

USO DE COMENTARIOS Y SINTAXIS DE LA
DEFINICIÓN DE CADA PROPIEDAD
 CSS funciona a base de reglas.
Cada regla está compuesta por un selector y la declaración.
La declaración a su vez esta compuesta por una propiedad y su
valor.
La declaración debe estar definida entre llaves({...})

CÓDIGO
<head>
p.azul {color:blue}
p.rojo {color:red}
</style>
</head>
<body>
<p class="azul">Este texto es de color azul</p>
<p class="rojo">Este texto es de color rojo</p>
</body>

SELECTORES, AGRUPACIÓN DE REGLAS Y
HERENCIA
 Selector
Se utiliza para seleccionar todos los elementos de la página. El siguiente
ejemplo elimina el margen y el relleno de todos los elementos HTML.
 Agrupación de reglas
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:
 Herencia
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:

CÓDIGO SELECTORES
h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
}
h3 {
color: #8A8E27;
}

CÓDIGO AGRUPACIÓN DE REGLAS
h1 { color: red; }
...
h1 { font-size: 2em; }
...
h1 { font-family: Verdana; }
h1 {
color: red;
font-size: 2em;
font-family: Verdana;
}

CÓDIGO HERENCIA
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>
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>

COLISIONES DE ESTILOS, UNIDADES
MEDIDAS Y COLORES
 Colisiones de estilos
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:
 Unidades de medida y colores
Además, CSS es tan flexible que permite indicar las medidas y
colores de muchas formas diferentes.

CÓDIGO
p { color: red; }
p { color: blue; }
<p>...</p>
p { color: red; }
p#especial { color: green; }
* { color: blue; }
<p id="especial">...</p>

Identificación del lenguaje CSS

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (20)

Similar to Identificación del lenguaje CSS

Similar to Identificación del lenguaje CSS (20)

Recently uploaded

Recently uploaded (20)

Identificación del lenguaje CSS