¿Qué son?
CSS Hojas de Estilo en Cascada
Cascading Style Sheets
Introducción a la IPO
¿Para qué sirven?
Controlar apariencia de un documento
Requisito, regla o recomendación basada en principios
probados y en la práctica.
Presentación Comportamiento Presentación Comportamiento
CSS1 ECMAScript
CSS2 DOM
CSS3
WEB WEB
Es Es
Estructura
Estructura HTML
XHTML
HTML5
Alberto Pedrero Esteban Alberto Pedrero Esteban
1
¿Me pones un ejemplo? ¿Me explicas el ejemplo?
body { body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans"; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans";
color: #51463d; color: #51463d;
font-size: 62.5%; font-size: 62.5%;
background: #f3f2e8; background: #f3f2e8;
} }
Selector Propiedad Valor
Declaración
Tipos Tipos
– Estilos en línea
– Hojas de estilo internas
– Hojas de estilo externas
Estilos en línea Hojas de estilo internas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<head>
<html>
<head>
<title>Hoja de estilo interna</title>
<title>Estilo en línea</title> <style type="text/css">
</head> body {
<body> padding-left: 11em;
<div style="font-size:18px; font-family:arial; color:red"> Este texto tiene color azul </div> font-family: Georgia, "Times New Roman", serif;
</body>
color: red;
</html>
background-color: #d8da3d;
}
h1 {
font-family: Helvetica, Geneva, Arial, sans-serif;
}
</style>
</head>
<body> <h1>Aquí se aplicará el estilo de letra para el Título</h1> </body>
</html>
Alberto Pedrero Esteban Alberto Pedrero Esteban
2
Hojas de estilo externas Directiva @import
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"> @import url("reset.css");
<html> @import url("principal.css");
<head> @import url("enriquecido.css");
<title>Hoja de estilo externa</title>
<link rel="stylesheet" type="text/css" href=“./css/estilos.css" />
</head>
<body>
....
</body>
</html>
Alberto Pedrero Esteban Alberto Pedrero Esteban
Hojas de estilo alternativas y dispositivos
Selección contextual
<link rel="stylesheet" type="text/css" href=“./css/estilos.css" />
<link rel="alternate stylesheet" type="text/css" href=“./css/alt_estilos.css" /> Selección no contextual
em {
<link rel="stylesheet" type="text/css“ media=“printer” href=“./css/estilos.css" /> color: #51463d;
}
Selección contextual
p em {
color: #51463d;
}
Selección contextual
p > em {
color: #51463d;
}
Alberto Pedrero Esteban
p em { p > em {
color: #51463d; color: #51463d;
} }
<p>Esto es un párrafo con un texto <p>Esto es un párrafo con un texto
<em>enfatizado</em></p> <em>enfatizado</em></p>
<p>Esto es un párrafo <span>con un texto <p>Esto es un párrafo <span>con un texto
diferente <em>enfatizado</em></span> y se diferente <em>enfatizado</em></span> y se
acabó</p> acabó</p>
Alberto Pedrero Esteban Alberto Pedrero Esteban
3
Selecctores Modelo de cuadro
Selectores de clase
<p class=“aviso”>Cuidado con el perro!</p>
.aviso {
color: #51463d;
}
Selectores de ID
<div id=“aviso”>Cuidado con el perro!</p>
#aviso {
color: #51463d;
}
Modelo de cuadro (II) Modelo de cuadro (III)
