CSS: Cascading Style Sheets
Escuela Técnica Superior de Ingeniería de Telecomunicación
Universidad Rey Juan Carlos
gsyc-profes (arroba) gsyc.urjc.es
Febrero de 2018
GSyC - 2018
CSS
1
Las transparencias del tema “CSS - Hojas de estilo”
están basadas en el libro de librosweb.es
disponible en http://www.librosweb.es/css/
Se ha pedido explícitamente autorización al autor original
para realizar esta obra derivada con fines educativos.
©Javier Eguiluz - Librosweb.es
Derivado a partir de material de
Jesús M. González-Barahona y Gregorio Robles.
El original está disponible en
http://cursosweb.github.io
Algunos derechos reservados.
Este trabajo se distribuye bajo la licencia
Creative Commons Attribution Share-Alike 4.0
GSyC - 2018
CSS
2
¿Qué es CSS?
Hojas de estilo CSS
CSS, Cascading Style Sheets es un lenguaje de hojas de estilos
creado para controlar el aspecto o presentación de los
documentos electrónicos definidos con HTML
Es la mejor forma de separar los contenidos y su
presentación y es imprescindible para crear páginas web
complejas
Obliga a crear documentos HTML bien definidos y con
significado completo (también llamados documentos
semánticos)
Mejora la accesibilidad del documento
Reduce la complejidad de su mantenimiento
Permite visualizar el mismo documento en infinidad de
dispositivos diferentes
GSyC - 2018
CSS
3
Antes del CSS
Hojas de estilo CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">
Titular de la página
</font></h1>
<p><font color="gray" face="Verdana" size="2">
Un párrafo de texto no muy largo.
</font></p>
</body>
</html>
GSyC - 2018
CSS
4
Con CSS
Hojas de estilo CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo de estilos con CSS</title>
<style>
h1 { color: red;
p
}
{ color: gray; font-family: Verdana; font-size: medium; }
font-family: Arial;
font-size: large;
</style>
</head>
<body>
</body>
</html>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
GSyC - 2018
CSS
5
CSS en un documento HTML
Hojas de estilo CSS
Se pueden integrar instrucciones CSS de varias maneras en un
documento HTML:
Incluir CSS en el mismo documento HTML
1
2 Definir CSS en un archivo externo
3
Incluir CSS en los elementos HTML
GSyC - 2018
CSS
6
Glosario Básico (I)
Hojas de estilo CSS
Regla: cada uno de los estilos que componen una hoja de
estilos CSS. Cada regla está compuesta de una parte de
“selectores”, un símbolo de “llave de apertura” ({), otra parte
denominada “declaración” y por último, un símbolo de “llave
de cierre” (}).
Selector: indica el elemento o elementos HTML a los que se
aplica la regla CSS.
GSyC - 2018
CSS
7
Glosario Básico (y II)
Hojas de estilo CSS
Declaración: especifica los estilos que se aplican a los
elementos. Está compuesta por una o más atributos CSS.
Atributo: característica que se modifica en el elemento
seleccionado, como por ejemplo su tamaño de letra, su color
de fondo, etc.
Valor: establece el nuevo valor de la característica modificada
en el elemento.
CSS 2.1 define 115 atributos, mientras que CSS 3 define 239
atributos.
CSS
GSyC - 2018
8
Selectores
Hojas de estilo CSS
A un mismo elemento HTML se le pueden aplicar varias reglas
Cada regla puede aplicarse a un número ilimitado de
elementos
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
Cuando se establece el valor de un atributo CSS en un
elemento, sus elementos descendientes heredan de forma
automática el valor de ese atributo
GSyC - 2018
CSS
9
Hojas de estilo CSS
CSS 2.1 incluye una docena de tipos diferentes de selectores,
que permiten seleccionar de forma muy precisa elementos
individuales o conjuntos de elementos dentro de una página
web.
Los selectores de CSS tienen mucha utilidad porque también
son usados en JQuery
GSyC - 2018
CSS
10
Selectores básicos
Hojas de estilo CSS
1 Selector universal
2 Selector de tipo o etiqueta
3 Selector descendente
4 Selector de clase
5 Selector de identidad
GSyC - 2018
CSS
11
Selector Universal
Hojas de estilo CSS
No se utiliza habitualmente
Generalmente es equivalente para poner estilo a < body >
Se suele combinar con otros selectores y además, forma parte
de algunos hacks muy utilizados
* {
}
margin: 0;
padding: 0;
GSyC - 2018
CSS
12
Selector de tipo o etiqueta
Hojas de estilo CSS
Selecciona todos los elementos de la página cuya etiqueta
HTML coincide con el valor del selector
Se pueden agrupar todas las reglas individuales en una sola
regla con un selector múltiple.
Buena práctica: agrupar los atributos comunes de varios
elementos en una única regla CSS y posteriormente definir los
atributos específicos de esos mismos elementos
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
GSyC - 2018
CSS
13
Selector descendente
Hojas de estilo CSS
Selecciona los elementos contenidos dentro de otros
elementos.
Ejemplo: elementos span contenidos dentro de elementos p
p span { color: red; }
[...]
<p>
...
<span>Texto1</span>
<a href="">...<span>Texto2</span></a>
...
</p>
Texto 1 evidentemente cumple la regla.
Texto 2 es un elemento span contenido dentro de un enlace
contenido dentro de un elemento p. Por tanto, Texto 2 están
contenido dentro de un p. Aunque no sea descendente directo, es
descendente y la regla se aplica.
GSyC - 2018
CSS
14
Ejercicio
Hojas de estilo CSS
¿Qué elementos se seleccionarían con estos tipos de selectores?
p a span em { text-decoration: underline; }
p, a, span, em { text-decoration: underline; }
p a { color: red; }
p * a { color: red; }
GSyC - 2018
CSS
15
Selector de clase
Hojas de estilo CSS
Se utiliza el atributo class de HTML sobre ese elemento para
indicar directamente la regla CSS que se le debe aplicar
Se crea en el archivo CSS una nueva regla llamada destacado
con todos los estilos que se van a aplicar al elemento
Se prefija el valor del atributo class con un punto (.)
.destacado { color: red; }
[...]
<p class="destacado">
Lorem ipsum dolor sit amet...
</p>
<p>Nunc sed lacus et
<a href="#" class="destacado">est adipiscing</a>
</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em>
</p>
Esta regla se aplica a cualquier elemento de clase destacado
GSyC - 2018
CSS
16
Hojas de estilo CSS
El atributo clase puede tener varios valores, separados por espacios
<style>
.comentario {color : blue;}
.noticia {color : red;}
.obsoleto {text-decoration : line-through;}
</style>
[...]
<body>
<p class="comentario"> Lorem ipsum dolor sit amet<p>
<p class="comentario obsoleto"> consectetur adipisicing elit, </p>
<p class="noticia "> sed do eiusmod tempor incididunt </p>
<p class="noticia obsoleto"> ut labore et dolore magna aliqua.</p>
</body>
Ejemplo:
http://ortuno.es/ej000_clases.html
GSyC - 2018
CSS
17
Selector de clase más específico
Hojas de estilo CSS
Combinando el selector de tipo y el selector de clase, se
obtiene un selector mucho más específico.
p.destacado { color: red }
[...]
<p class="destacado">
Lorem ipsum dolor sit amet...
</p>
<p>Nunc sed lacus et
<a href="#" class="destacado">est adipiscing</a>
</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em>
</p>
Esta regla se aplica a los elementos de tipo párrafo, que además
sean de clase destacado. (En este ejemplo, solo una vez)
GSyC - 2018
CSS
18
Ejercicio
Hojas de estilo CSS
¿Qué elementos se seleccionarían con estos tipos de selectores?
p.aviso { ... }
p .aviso { ... }
p, .aviso { ... }
*.aviso { ... }
GSyC - 2018
CSS
19
Selectores de identificador
Hojas de estilo CSS
Aplica estilos CSS a un único elemento de la página
El valor del atributo id no se puede repetir en dos elementos
diferentes de una misma página
#destacado { color: red; }
<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>
GSyC - 2018
CSS
20
Ejercicio
Hojas de estilo CSS
¿Qué elementos se seleccionarían con estos tipos de selectores?
p#aviso { ... }
p #aviso { ... }
p, #aviso { ... }
*#aviso { ... }
GSyC - 2018
CSS
21
Ejercicio: Combinación de selectores
Hojas de estilo CSS
¿Qué elementos se seleccionarían con estos tipos de selectores?
.aviso .especial { ... }
div.aviso span.especial { ... }
ul#menuPrincipal li.destacado a#inicio { ... }
GSyC - 2018
CSS
22
Colisión de estilos (simplificado)
Hojas de estilo CSS
1 Cuanto más específico sea un selector, más importancia tiene
su regla asociada.
2 A igual especificidad, se considera la última regla indicada.
GSyC - 2018
CSS
23
Otros selectores
Hojas de estilo CSS
Concatenación de clases
.clase1.clase2 {atributo:valor;}
La regla se aplica a los elementos cuyo atributo class
contengan tanto clase1 como clase2
Selector hijo directo
p > span {atributo:valor;}
Elementos span directamente contendidos dentro de un
elemento p
Selector adayacente
h2 + h3 {atributo:valor;}
Elemento h3 inmediatamente después de un elemento h2
GSyC - 2018
CSS
24
Selector de atributos
Hojas de estilo CSS
div[class] { atributo: valor;}
Elementos div que tengan establecido un atributo con nombre
class
div[class="nacional"] { atributo: valor;}
Elementos div que tengan establecido un atributo con nombre
class y valor nacional
div[class˜="nacional"] { atributo: valor;}
Elementos div que tengan establecido un atributo con nombre
class y al menos uno de sus valores sea nacional
GSyC - 2018
CSS
25
Unidades de medida
Hojas de estilo CSS
Unidades absolutas
in, cm, mm, pt, pc
Unidades relativas
em, ex, px
Porcentajes
En general, se
Crear cuenta
Comentarios de: CSS: Cascading Style Sheets (0)
No hay comentarios