Introducción a CSS
> Intro a CSS | Video
1 Qué es CSS
ÍNDICE
2 Vinculación con HTML
3 Estructura
4 Selectores
5 Propiedades
6 Cascada, Especificidad y
Jerarquía
Cascading
Style Sheets
(CSS)
> Cascading Style Sheets (CSS)
● Lenguaje de diseño gráfico para definir estilo y presentación de un lenguaje de
marcado (HTML, XML).
● Establece un sistema de cascada para determinar la prioridad de una regla de estilo
en caso de conflicto.
● CSS se ideó para aplicar el formato en las páginas, de una manera mucho más
detallada, con nuevas posibilidades que no estaban al alcance de HTML
● Será el responsable de toda la personalización sobre la web y su aspecto
Vinculación
con HTML
> Vinculación con HTML
Existen 3 formas de vinculación con HTML
1- Con el atributo style en una 3- Mediante un archivo externo con la etiqueta link:
etiqueta
<head>
<p style="color: blue; font-size: <link rel="stylesheet" href="styles/[Link]">
2rem"> .... </p> </head>
2- Mediante la etiqueta style en el head del HTML:
<head>
<title>Mi página Web</title>
<style>
p{
color: blue;
font-size: 2rem;
}
</style>
Estructura
Estructura
selector {
propiedad: valor;
propiedad: valor;
}
selector {
propiedad: valor;
propiedad: valor;
propiedad: valor;
}
Selectores
> Selectores
● * : selector general ● div p : selector de descendencia
● p : selector de etiqueta ● h1,h2,h3 : selector múltiple
● .class-name : selector de clase ● [Link]-name : selector de clase específico
● #id : selector de id ● a[href="#"] : selector de atributo
● div>p : selector de hijo directo
Propiedades
> Propiedades
Cada elemento del HTML tiene un listado de propiedades
posibles con valores predeterminados por el navegador.
Mediante CSS, podemos acceder a estas propiedades y
modificarlas.
● color : blue | #000FF | rgb(0, 0, 255) | rgba (0, 0 ,255,1) ; ● font-size : xx-small | 2rem | 20%;
[Permite cambiar el color de algunos elementos, por [Especifica el tamaño de la letra (Es aconsejable
ejemplo un texto] evitar el uso de valores que no sean relativos)]
● font-family : "Gill Sans Extrabold";
● background : violet | ./image/[Link]; [Define una lista de fuentes o familias de fuentes,
[Se utiliza para establecer un fondo ya sea en colores con un orden de prioridad]
o imagen]
● width : 5rem | 75% | 20px | 5vw; ● object-fit : cover | contain | fill;
[Establece el ancho de un elemento] [Ayuda a ajustar una imagen o video a un
contenedor]
● height : 5rem | 75% | 20px | 5vh;
[Establece el alto de un elemento]
Cascada,
Especificidad
y Jerarquía
> Sistema de Cascada
El sistema de cascada especifica qué hacer si dos o más
reglas de estilo para un mismo o varios elementos entran
en conflicto. La prioridad se establece para la última regla.
Por ejemplo:
p{
color: yellow;
margin-left: 2rem;
}
Si ponemos una misma
propiedad para una misma
p{ etiqueta pero con diferente
color: blue; valor, se tomará el último
} valor colocado. La
excepción a esta regla es la
Jerarquía
> Especificidad y Jerarquía
Especificidad: Jerarquía básica:
Es la manera en la cual priorizamos la relevancia de la Iremos de mayor jerarquía a menor
propiedad, esto dependerá de qué tipo de selector utilicemos. jerarquía,
Aquí entra el orden de Jerarquía de selectores. 1. Selector de ID [ #id ]
Es decir, si tenemos una etiqueta p que tiene una clase llamada
“resumen-inicial” 2. Selector de Clase [ .clase ]
.resumen-inicial { 3. Selector de Etiqueta [ p ]
color: violet
}
p{
color: blue;
}
Por más que pongamos el selector de etiqueta debajo, la
Jerarquía indica que tiene más prioridad la clase, por ende se
aplicaría el color “violet” y no el “blue”