Identificación del lenguaje ccs
13
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
-
Upload
oscar-josue-beas-alvarez -
Category
Education
-
view
163 -
download
1
description
Transcript of Identificación del lenguaje ccs
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>
<style type="text/css">
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;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
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>
<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>
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>
