La filosofía de CSS (Cascading Style Sheet) es la siguiente : En el body del documento HTML se define el contenido que se muestra en el sitio y luego en otro archivo (o en el head) se define la apariencia de la página usando CSS.Esto permite que se pueda modificar el contenido del body sin cambiar su apariencia y también modificar su apariencia sin modificar el contenido.
Para asociar código HTML con estilo CSS podemos :
<p style=”background: blue;” > El fondo de este párrafo es azul </p>
Presenta alta prioridad frente a otras reglas. Dificulta el mantenimiento. Volver a escribir los atributos para otro elemento igual.
<head> <style type=”text/css” media=”screen, tv” > ----- </style> </head>
media indica sobre que dispositivo se aplica la regla. Algunos valores : print (para impresoras) , screen (para pantallas), tv (televisores), all (para todos). Si son varios van separados por comas.
<link href="style.css" rel="stylesheet">
<link href="default.css" rel="stylesheet" title="Estilo por defecto"> <link href="lujo.css" rel="alternate stylesheet" title="Lujoso"> <link href="basic9.css" rel="alternate stylesheet" title="Basico">
Podemos controlar si la hoja de estilos se cargó correctamente o se produjo algún error (Esta parte requiere conocimientos de javascript que se ven en otro módulo). Ejemplo:
<script>
function sheetLoaded() {
// Hacer algo interesante; la hoja de estilos ha sido cargada
}
function sheetError() {
alert("¡Ocurrió un error al cargar la hoja de estilos!");
}
</script>
<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">
De forma general utilizaremos el modo 3 aunque en algunos ejemplos y por motivos pedagógicos utilizaremos los métodos 1 y 2.
El selector es la parte de la regla CSS que indican a qué elemento o parte de una página se aplica un determinado estilo.
Selector { atributo : valor }
<head>
<title> Ejemplo </title>
<style>
h1, h2 { color : red; background-color: blue } ==> Con la “,” agrupamos dos etiquetas
p { color: green }
</style>
</head>
<body> <h1 class=”alerta”> Texto de h1 </h1> <h2 class=”alerta”> Texto de h1 >/h1> <p class=”alerta parrafo” > Texto de p con dos clases </p> <body>
En CSS:
.alerta { color: red; }
h1.alerta { color: red; } ==> Hace referencia a los H1 de clase “alerta”.
<div id="unico">
#unico {color:blue} ===> Nos referimos a la etiqueta con id="unico"
p a span { color: red; } ==> Se aplica a los elementos span que tienen un ancestro a y que está
dentro de un p. Observa que hay espacios en blanco entre las etiquetas.
P > span { color : red ; } ==> Se podría leer como los span que son hijos directos de p .
Adyacente. Sintaxis : Elemento1 + Elemento2 { color: red; } ==> Observa signo mas.
Selecciona los que cumplan las siguientes condiciones :
- Elemento1 y elemento2 deben ser hermanos, es decir, hijos del mismo padre
- Elemento2 debe aparecer inmediatamente despues de elemento1 en la hoja html.
p ∼ span ==> Los span que son hermanos de p y que están a continuación de p
Los cuatro tipos de selectores de atributos son:
li:nth-child(2n+1) ==> Selecciona los li impares p:nth-child(2n) ==> Selecciona los p pares p:nth-child(4n+1) ==> Alternan 4 estilos diferentes para los párrafos. p:nth-child(4n+2) ==> El primero es el 2 y luego de 2 en 2. p:nth-child(4n+3) ==> El primero es el 3 y luego de 4 en 4. p:nth-child(4n+4) ==> El primero es el 4 y luego de 4 en 4.
p::before {content:'Contenido a añadir';color:red}
<h1>Hola</h1>
h1::before {
content: url(smiley.gif);
}
Se ve una carita antes del texto “Hola”
p::after {content:'Contenido a añadir';color:red}
Se usan para definir la altura, anchura, márgenes, tamaño de letra, etc.. Los valores se expresan como números enteros o con decimales.
Ej: Si el font-size es de 12pt, 1em = 12pt.
p {
font-size: 150%; ==> 150% del valor del padre.
padding: 50%; ==> 50% del width del padre.
}
Diseño de Interfaces Web. Instituto Chan do Monte, Marín.
Volver arriba ▲