CSS: Cascading Style Sheets
Escuela Técnica Superior de Ingenierı́a de Telecomunicación
Universidad Rey Juan Carlos
gsyc-profes (arroba) [Link]
Febrero de 2022
GSyC - 2022 CSS 1
Las transparencias del tema “CSS - Hojas de estilo”
están basadas en el libro de [Link]
disponible en [Link]
Se ha pedido explı́citamente autorización al autor original
para realizar esta obra derivada con fines educativos.
©Javier Eguiluz - [Link]
Derivado a partir de material de
Jesús M. González-Barahona y Gregorio Robles.
El original está disponible en
[Link]
Algunos derechos reservados.
Este trabajo se distribuye bajo la licencia
Creative Commons Attribution Share-Alike 4.0
GSyC - 2022 CSS 2
Hojas de estilo CSS
¿Qué es 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 adaptar el documento a dispositivos distintos,
manteniendo el código HTML
GSyC - 2022 CSS 3
Hojas de estilo CSS
Antes del CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<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 - 2022 CSS 4
Hojas de estilo CSS
Con CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo de estilos con CSS</title>
<style>
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>
GSyC - 2022 CSS 5
Hojas de estilo CSS
CSS en un documento HTML
Se pueden integrar instrucciones CSS de varias maneras en un
documento HTML:
1 Hoja de estilos externa
Con un elemento link en la cabecera, que apunte a un fichero
.css que contenga las reglas
Recomendable para la mayorı́a de los casos
2 Hoja de estilos interna
Escribir las reglas CSS dentro de un elemento style, en la
cabecera del documento HTML
Adecuado para ejemplos sencillos
3 Reglas CSS insertadas directamente en los elementos HTML
Un atributo style directamente en cada elemento, cuyo valor
sea la regla
No recomendable
[Link]
GSyC - 2022 CSS 6
Hojas de estilo CSS
Glosario Básico (I)
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 - 2022 CSS 7
Hojas de estilo CSS
Glosario Básico (y II)
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.
GSyC - 2022 CSS 8
Hojas de estilo CSS
Selectores
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
Naturalmente, si un elemento asigna valor a un atributo
heredado, prevalece el valor indicado explı́citamente, la
herencia queda sin efecto
GSyC - 2022 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
se usan en JavaScript
Resumen:
Significado
----------------------------------
(espacio) descendiente (hijo, nieto...)
. clase
, OR
(concatenación) AND
# id
GSyC - 2022 CSS 10
Hojas de estilo CSS
Selectores básicos
1 Selector universal
2 Selector de tipo o etiqueta
3 Selector descendiente
4 Selector de clase
5 Selector de identidad
GSyC - 2022 CSS 11
Hojas de estilo CSS
Selector Universal
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 - 2022 CSS 12
Hojas de estilo CSS
Selector de tipo o etiqueta
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. La coma significa or
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 - 2022 CSS 13
Hojas de estilo CSS
Selector descendiente
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 descendiente directo, es
descendiente y la regla se aplica.
GSyC - 2022 CSS 14
Hojas de estilo CSS
Ejercicio
¿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 - 2022 CSS 15
Hojas de estilo CSS
Selector de clase
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 - 2022 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:
[Link]
GSyC - 2022 CSS 17
Hojas de estilo CSS
Selector de clase más especı́fico
Combinando el selector de tipo y el selector de clase, se
obtiene un selector mucho más especı́fico.
[Link] { 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 - 2022 CSS 18
Hojas de estilo CSS
.a.b {...}
Esta regla se aplica a los elementos de clase a que además sean de
clase b
Es equivalente a decir los elementros de clase b que además
sean de clase a (las clases son atributos, y los atributos no
tienen orden)
Por supuesto, también se aplica a todos sus descendientes
[Link]
GSyC - 2022 CSS 19
Hojas de estilo CSS
Ejercicio
¿Qué elementos se seleccionarı́an con estos tipos de selectores?
[Link] { ... }
p .aviso { ... }
p, .aviso { ... }
*.aviso { ... }
GSyC - 2022 CSS 20
Hojas de estilo CSS
Selectores de identificador
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 - 2022 CSS 21
Hojas de estilo CSS
Ejercicio
¿Qué elementos se seleccionarı́an con estos tipos de selectores?
p#aviso { ... }
p #aviso { ... }
p, #aviso { ... }
*#aviso { ... }
GSyC - 2022 CSS 22
Hojas de estilo CSS
Ejercicio: Combinación de selectores
¿Qué elementos se seleccionarı́an con estos tipos de selectores?
.aviso .especial { ... }
[Link] [Link] { ... }
ul#menuPrincipal [Link] a#inicio { ... }
GSyC - 2022 CSS 23
Hojas de estilo CSS
Colisión de estilos (simplificado)
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 - 2022 CSS 24
Hojas de estilo CSS
Unidades de medida
Unidades absolutas
in, cm, mm, pt, pc
Unidades relativas
em, ex, px
Porcentajes
En general, se recomienda el uso de unidades relativas siempre que
sea posible
Normalmente se utilizan
Pixel y porcentajes
Para definir el layout (la distribución) del documento. Esto es,
la anchura de las columnas y de los elementos de las páginas
em y porcentajes
Para definir el tamaño de letra de los textos
GSyC - 2022 CSS 25
Hojas de estilo CSS
Especificación del color
Hay dos formas principales de indicar el color
Mediante su nombre
Los 18 principales son:
red, cyan, blue, darkblue, lightblue, purple, yellow, lime,
magenta, white, silver, gray/grey, black, orange, brown,
maroon, green, olive
Pero hay otros 140 nombres
[Link]
GSyC - 2022 CSS 26
Hojas de estilo CSS
Mediante su código hexadecimal
Se representa por con una almohadilla y 6 dı́gitos
hexadecimales (dos dı́gitos para el rojo, dos dı́gitos para el
verde y dos dı́gitos para el azul). De esta forma se pueden
especificar los 16 777 216 colores del espacio sRGB
Ejemplos:
Código Nombre Pantone
-----------------------
#ff0000 red
#ff2800 ferrari red
#f5e050 minion yellow
Cuidado: los nombres de color del estandar industrial Pantone no
coinciden con los nombres de color CSS
GSyC - 2022 CSS 27
Hojas de estilo CSS
Hay muchas herramientas online que facilitan la elección de colores.
Para elegir un color individual, buscaremos un html color
picker
Para elegir una paleta de colores, buscaremos un color palette
generator. Como p.e. [Link]
Los principales atributos relacionados con el color son
color
backgroud-color
border-color
GSyC - 2022 CSS 28
Hojas de estilo CSS
Atributos relacionados con el texto
Alineación
text-align: left | right | center | justify | initial | inherit;
Subrayado
text-decoration: none | underline | overline | line-through |
initial | inherit;
Tamaño
font-size: medium | xx-small | x-small | small | large |
x-large | xx-large | smaller | larger | (length) |
initial | inherit;
Estilo
font-style: normal | italic | oblique | initial | inherit;
GSyC - 2022 CSS 29
Hojas de estilo CSS
Atributos relacionados con los bordes
Los atributos del borde de una caja se especifican con:
border-width
border-style
border-color
Puede abreviarse como simplemente border
Ancho del borde
border-width: medium | thin | thick | (length) |
initial | inherit;
Estilo del borde
border-style: none | hidden | dotted | dashed | solid | double |
groove | ridge | inset | outset | initial | inherit;
[Link]
GSyC - 2022 CSS 30
Hojas de estilo CSS
Tipos de elementos (I)
El estándar HTML clasifica a todos sus elementos en dos grandes
grupos:
Elementos de lı́nea:
Los elementos en lı́nea (“inline elements” en inglés) no
empiezan necesariamente en nueva lı́nea y sólo ocupan el
espacio necesario para mostrar sus contenidos.
GSyC - 2022 CSS 31
Hojas de estilo CSS
Tipos de elementos (II)
Elementos de bloque:
Los elementos de bloque (“block elements” en inglés) siempre
empiezan en una nueva lı́nea y ocupan todo el espacio
disponible hasta el final de la lı́nea
GSyC - 2022 CSS 32
Hojas de estilo CSS
El modelo de cajas
Es el comportamiento de CSS que hace que todos los
elementos de las páginas se representen mediante cajas
rectangulares
Cada vez que se inserta una etiqueta HTML, se crea una
nueva caja rectangular que encierra los contenidos de ese
elemento
GSyC - 2022 CSS 33
Hojas de estilo CSS
El modelo de cajas (II)
No son visibles a simple vista porque inicialmente no muestran
ningún color de fondo ni ningún borde
Ejemplo de [Link] después de forzar a que todas las cajas
muestren su borde
GSyC - 2022 CSS 34
Hojas de estilo CSS
El modelo de cajas (III)
Los navegadores crean y colocan las cajas de forma
automática, pero CSS permite modificar todas sus
caracterı́sticas. Cada una de las cajas está formada por seis
partes, tal y como muestra la siguiente imagen:
(Esquema utilizado con permiso de [Link]
GSyC - 2022 CSS 35
Hojas de estilo CSS
Partes que componen cada caja
Contenido (content): se trata del contenido HTML del
elemento (las palabras de un párrafo, una imagen, el texto de
una lista de elementos, etc.)
Relleno (padding): espacio libre opcional existente entre el
contenido y el borde.
Borde (border): lı́nea que encierra completamente el
contenido y su relleno.
Imagen de fondo (background image): imagen que se
muestra por detrás del contenido y el espacio de relleno.
Color de fondo (background color): color que se muestra por
detrás del contenido y el espacio de relleno.
Margen (margin): separación opcional existente entre la caja
y el resto de cajas adyacentes.
GSyC - 2022 CSS 36
Hojas de estilo CSS
Margen, relleno, bordes y modelo de cajas (I)
El margen, el relleno y los bordes establecidos a un elemento
determinan la anchura y altura final del elemento
div {
width: 300px;
padding-left: 50px;
padding-right: 50px;
margin-left: 30px;
margin-right: 30px;
border: 10px solid black;
}
Ejemplos:
[Link]
GSyC - 2022 CSS 37
Hojas de estilo CSS
Si indicamos 4 valores, se refieren a arriba, derecha, abajo,
izquierda
margin: 8px 10px 8px 8px
Si indicamos 3 valores, se refieren a arriba, ambos lados, abajo
margin: 8px 10px 8px
Si indicamos 2 valores, se refieren a márgenes verticales,
márgenes horizontales
margin: 8px 10px
Si indicamos 1 valor, se aplica a los 4 márgenes (arriba,
derecha, abajo, izquierda, todos iguales)
margin: 8px
GSyC - 2022 CSS 38
Hojas de estilo CSS
Margen, relleno, bordes y modelo de cajas (y II)
De esta forma, la anchura del elemento en pantalla serı́a igual a la
suma de la anchura original, los márgenes, los bordes y los rellenos:
30px + 10px + 50px + 300px + 50px + 10px + 30px = 480 pı́xel
GSyC - 2022 CSS 39
Hojas de estilo CSS
Visualización
CSS define otros cuatro atributos para controlar su
visualización: display, visibility, overflow y z-index.
El atributo display permite ocultar completamente un
elemento haciendo que desaparezca de la página. Como el
elemento oculto no se muestra, el resto de elementos de la
página se mueven para ocupar su lugar.
El atributo display también permite modificar el
comportamiento de un elemento a bloque (block) o en lı́nea
(inline).
El atributo visibility permite hacer invisible un elemento, lo
que significa que el navegador crea la caja del elemento pero
no la muestra. En este caso, el resto de elementos de la
página no modifican su posición, ya que aunque la caja no se
ve, sigue ocupando sitio.
GSyC - 2022 CSS 40
Hojas de estilo CSS
Diferencias entre display y visibility
GSyC - 2022 CSS 41
Hojas de estilo CSS
Otros atributos
CSS tiene muchos otros atributos que no veremos aquı́
Normalmente los programadores no sabemos hacer buenos
diseños gráficos, no es recomendable empeñarse en configurar
el CSS a bajo nivel
Si realmente quieres usar otros atributos, recuerda que Google
es tu amigo
Ejemplo: centrar una imagen
[Link]
GSyC - 2022 CSS 42