CSS
Cascading Style Sheets
HTML y CSS
2
3
Hojas de Estilo en Cascada
● Permite controlar la apariencia de un sitio web.
● Permite definir un estilo visual para cada uno
de los elementos de HTML.
● Separa los contenidos de su presentación:
○ Desarrollo paralelo.
○ Flexibilidad de apariencia.
4
Evolución
● Cada nivel de CSS se construye sobre el
anterior, generalmente añadiendo funciones al
previo.
● CSS 1.0: Publicada en diciembre 1996. Fuentes,
colores, textos, propiedades de caja, id, listas.
● CSS 2.0 Mayo 1998. Posicionamiento
absoluto/relativo, z-index, media types, nuevos
selectores.
● CSS 3.0 Está dividido en documentos llamados
“módulos”. Cada módulo añade nuevas
funcionalidades. Nuevas propiedades para
bordes, opacidad, sombras, etc.
5
6
Ventajas
● Reutilización: se define la estética visual de los
elementos una sola vez y se aplica a todas las
páginas del sitio.
● Diseño unificado: todas las páginas del sitio web
hacen referencia a un único estilo visual.
● Optimización de los tiempos de carga y de
tráfico en el servidor: al dividir contenido y
apariencia obtenemos archivos más ligeros, y
esto reporta menores tiempos de carga y
volumen de tráfico del servidor.
7
Sintaxis
● Cada conjunto de reglas CSS consta de dos
partes: el selector y un bloque de declaraciones.
● El selector apunta al elemento HTML al que
desea aplicar estilo.
● El bloque de declaración contiene una o más
declaraciones separadas por punto y coma.
● Cada declaración incluye un nombre de
propiedad CSS y un valor, separados por dos
puntos.
8
Agregar CSS a un documento
● Cuando un navegador lee una hoja de estilo,
dará formato al documento HTML de acuerdo
con la información de la hoja de estilo cargada.
● Existen tres (3) formas de incluir una hoja de
estilo dentro de un documento HTML:
○ En línea (inline)
○ Interno
○ Externo
9
CSS en línea
DEMO
● Se puede usar un estilo en línea para aplicar un
estilo único a un solo elemento.
● Para usar estilos en línea, se agrega el atributo
de style (estilo) al elemento relevante.
● El atributo de estilo puede contener cualquier
propiedad CSS.
<h1 style=" color:blue;text-align:center;">Titulo</h1>
<p style=" color:red;">Texto del parrafo</p>
10
CSS Interno
DEMO
● Se puede utilizar una hoja de estilo interna si
una sola página HTML tiene un estilo único.
● El estilo interno se define dentro de la etiqueta
<style>, dentro de la sección de cabecera
<head>.
<head>
<style>
body { background-color: linen; }
h1 { color: maroon; margin-left: 40px; }
</style>
</head>
11
CSS Externo
DEMO
● Con una hoja de estilo externa, puede cambiar
el aspecto de un sitio web completo cambiando
solo un archivo.
● Cada página HTML debe incluir una referencia al
archivo de hoja de estilo externo dentro de la
etiqueta <link>, dentro de la sección del
encabezado.
● El archivo externo no debe contener etiquetas
HTML. Y debe guardarse con la extensión .css
<link rel="stylesheet" type="text/css" href="[Link]">
12
Atributos id y class
id
● El atributo id se usa para especificar una
identificación única para un elemento HTML. class
● Su valor debe ser único dentro del documento.
Pseudo clases
● El atributo class se utiliza para especificar una
clase para un elemento HTML. Pseudo elementos
● Múltiples elementos HTML pueden compartir la Atributos
misma clase.
<p id=”miParrafo” class=”centrado cursiva”>...</p>
13
Selectores
Juego (CSS Dinner)
● Los selectores CSS se utilizan para "buscar" (o
seleccionar) los elementos HTML a los que se
desea aplicar estilo.
● Podemos dividir los selectores de CSS en cinco
categorías:
○ Simples (elemento, id y class)
○ Combinación (basados en relaciones)
○ Pseudo-clase (por estado)
○ Pseudo-elementos (parte de un elemento)
○ Por atributos (basados en un atributo o
valor de atributo)
14
Selectores
Selectores
● Elemento ● Agrupamiento (,)
Combinaciones
p { h1, h2, h3 {
color: red; text-decoration: underline;
} }
Pseudo clases
● Id (#) ● Pseudo-elementos (::)
#parrafo1 {
text-align: center;
p::first-line {
color: #ff0000;
Pseudo elementos
color: blue; font-variant: small-caps;
} } Atributos
● Clase (.) ● Pseudo-clases (:)
.centrado { p:hover {
text-align: center; color: red;
} }
● Universal (*) ● Combinaciones
* { [Link] {
margin: 0; color: darkblue;
} }
15
Selectores combinados
Selectores
● Descendente ( ). e f. Selecciona todos los
elementos de tipo f que están dentro de e sin Combinaciones
importar la profundidad. No confundir con el
DEMO
agrupamiento (,).
p a {
color: red;
}
<body>
<p>
Ingrese a <a href=”...”>enlace</a>. O también a
<strong><a href=”...”>otro enlace</a></strong>
</p> …
</body>
/* Todos los elementos de tipo /* Todos los elementos con atributo
"p" con atributo class="aviso" */ class="aviso" que estén dentro de
cualquier elemento de tipo "p" */
[Link] { ... }
p .aviso { ... }
<p class=”aviso”>SI</p>
<p class=”otra”>NO</p> <p>
<span class=”aviso”>
/* Todos los elementos "p" y todos los elementos SI
con atributo class="aviso" de la página */ </span>
</p>
p, .aviso { ... } <p>
NO
<h1 class=”aviso”>SI</h1> <span class=”otra”>
<h2>NO</h2> NO
<p><b class=”aviso”>SI</b></p> </span>
<p>SI</p> </p>
¡Cuidado con las similitudes!
16
17
Selectores combinados
Selectores
● Hijo (>). e > f. Selecciona todos los elementos de
tipo f que son hijos directos de e. Combinaciones
DEMO
p > a {
color: red;
}
<body>
<p>
Ingrese a <a href=”...”>enlace</a>. O también a
<strong><a href=”...”>otro enlace</a></strong>
</p> …
</body>
18
Selectores combinados
Selectores
● Adyacente (+). e + f. Selecciona todos los
elementos de tipo f que cumplan las dos Combinaciones
siguientes condiciones:
DEMO
○ e y f deben ser hermanos
○ f debe aparecer inmediatamente después
de e en el código HTML
h1 + h2 {
color: red;
text-decoration: underline;
}
<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2> …
<h2>Otro subtítulo</h2> …
</body>
19
Selectores combinados
Selectores
● Hermano general (~). e ~ f. Selecciona todos los
elementos de tipo f que cumplan las dos Combinaciones
siguientes condiciones:
DEMO
○ e y f deben ser hermanos
○ f debe aparecer inmediatamente después
de e en el código HTML
h1 ~ h2 {
color: red;
text-decoration: underline;
}
<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2> …
<h2>Otro subtítulo</h2> …
</body>
20
Conflictos de reglas
● Cuando más de una regla se puede aplicar a un
elemento hay un conflicto a resolver.
● Cascada: cuando dos reglas tienen la misma
especificidad, se aplica la última.
● Especificidad: se aplica la que tenga el selector
más específico.
● Herencia: algunos valores de propiedades se
heredan del elemento padre. Otros no.
● Origen: es posible que el usuario configure un
CSS para anular el estilo del desarrollador.
Aunque esto está en desuso.
21
Herencia
inherit
● Existen 4 valores universales de propiedades
para el control de la herencia. Todas las initial
propiedades CSS aceptan estos valores.
unset
● inherit: hereda el valor del padre.
● initial: en propiedades no heredadas, este valor revert
refuerza el comportamiento por defecto y es all
necesario sólo para sobrescribir otra regla.
● unset: es inherit para propiedades heredadas e
initial para no heredadas. Uso especial con “all:”.
● revert: revierte el valor al que habría tenido si
no se hubiesen hecho cambios.
22
Especificidad
● Mide cuán específico es un selector. Más
específico, más prioridad.
● Se calcula de la siguiente manera:
○ a: 1 si la declaración de estilo es inline si
no, 0
○ b: cantidad de atributos ID en el selector
○ c: cantidad de clases, pseudo-clases y
otros atributos en el selector
○ d: cantidad de elementos y
pseudo-elementos en el selector
● Luego se ordena un número con la forma:
a,b,c,d.
Cálculo de especificidades
23
24
Modificador !important
● Podemos declarar reglas de estilos como
!important para que tomen precedencia sobre
otras reglas de estilos.
● No usar a menos que sea absolutamente
necesario ya que cambia el orden de aplicación
de los estilos.
body{
font-family: verdana, arial !important ;
}
25
Aplicación del CSS
● CSS del navegador.
● CSS del usuario.
● CSS del autor.
● Declaraciones !important en CSS del autor.
● Declaraciones !important en CSS del usuario.
● Si hay conflicto se resuelve por especificidad.
● Si persiste el conflicto, la última regla gana.
26
Fuente
Fuente
● Hay 5 familias genéricas: serif, sans-serif,
monospace, cursive y fantasy. Style - Weight - Variant
● font-family se usa para establecer una lista
Size
ordenada de fuentes que se usarán para
mostrar un elemento. Usar al final una genérica font
como respaldo. Google Fonts
● font-style usado para hacer cursiva.
● font-weight indica la intensidad (negrita).
● font-variant permite pequeñas mayúsculas.
● font-size define el tamaño de la fuente.
● font es la propiedad abreviada para setear
style, variant, weight, size y family.
Familia Genérica Ejemplo Concreto
Serif Times New Roman
Georgia
Droid Serif
Sans-serif Arial
Verdana
Droid Sans
Monospace Courier New
Consolas
Roboto Mono
Cursive Caveat
Pacifico
Fantasy Special Elite
Press Start 2P
Ejemplos de Fuentes
27
28
Texto
text-align
● text-align para alineación horizontal.
● text-decoration permite decorar el texto text-decoration
(enlaces).
text-transformation
● text-transformation transforma el texto a
mayúsculas, minúsculas y “capitalize”. Espaciado
● text-indent regula la sangría de la 1ª línea.
text-shadow
● letter-spacing y word-spacing definen el
espacio entre letras y palabras respectivamente.
● line-height define la altura del renglón.
● white-space dice como tratar los espacios.
● text-shadow establece el efecto de sombra.
29
Colores
Colores
● Los colores pueden especificarse por nombre o
su valor RGB, HEX, HSL, RGBA, HSLA. Listado de Colores
● Algunos nombres de colores son red, green,
blue, gold.
● RGB utiliza 3 valores para armar el color: red,
green y blue. Con HEX se usa su valor
hexadecimal. HSL permite establecer tono,
saturación y luz. Todos son equivalentes.
● color es usado para colorear el texto de un
elemento.
● background-color permite establecer el color
de fondo de un elemento.
30
Fondo
background
● Además del color, se puede establecer una
imagen o un degradado como fondo. background-image
● opacity establece la opacidad. El canal alfa del
background-repeat
color puede lograr efectos similares pero no es
lo mismo. background-attachment
● background-image permite establecer una
background (Shorthand)
imagen como fondo.
● background-repeat dice como se repite esa
imagen.
● background-position ubica la imagen.
● background-attachment dice si la imagen
queda fija o se mueve con el scroll.
31
Pseudo clases y elementos
Pseudo Clases
● Pueden usarse en CSS como selectores, pero no
existen en el código fuente HTML. Pseudo Elementos
● Son "insertados" bajo ciertas condiciones para
que el CSS pueda referenciarlos.
● Son abstracciones que permiten referirse a
elementos que de otro modo resulta imposible.
● Las pseudo clases (:) pueden asociarse a
estados, como “hover” y “visited”, entre otros.
● Los pseudo elementos (::) pueden ver como
partes de un elemento, como “first-letter” y
“first-line”.
32
Unidades de Medida
Unidades
● CSS divide las unidades de medidas en 2 grupos.
● Relativas: definen su longitud en relación con
otra medida (em, ex, px*, porcentaje).
● Absolutas: establecen de forma completa el * Los píxeles (px) son relativos al
valor de una medida (cm, mm, pt, in). dispositivo de visualización.
● Una medida se indica como un valor numérico Para dispositivos de bajo dpi,
seguido de una unidad de medida (10px, 5%). 1px es un píxel del dispositivo
(punto) de la pantalla . Para
● Unidades como cm o mm son útiles para impresoras y pantallas de alta
imprimir. resolución, 1px implica varios
píxeles de dispositivo.
Las medidas relativas
no se heredan tal cual
por los elementos
descendientes, sino
Unidades Relativas
que se propagan los
valores calculados.
33
34
Frameworks
Bootstrap
● Conjunto de librerías css que permiten facilitar
las tareas comunes que realizan los
desarrolladores css.
● Se componen de creación de grillas para facilitar * Los reseteadores o
la maquetación, conjunto de clases para normalizadores, proponen
tipografías, reseteadores de css, facilitan el resetear o normalizar estilos
diseño responsivo, etc. que varían entre navegadores.
¡Gracias!
¿Preguntas?
Plantilla de SlidesCarnival
Fotos de Startup Stock Photos
35