3.
Hoja de estilo CSS
CSS (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de
un documento HTML, permitiendo controlar aspectos como colores, fuentes, espaciado, y
disposición.
3.1. Sintaxis de CSS
La sintaxis de CSS se compone de selectores y declaraciones. Un selector apunta al
elemento HTML que quieres estilizar, y la declaración contiene una propiedad y su valor.
Estructura básica:
selector {
propiedad: valor;
}
Ejemplo:
Esto cambiará el color del texto de todos los elementos <h1> a azul y su tamaño de
fuente a 24px.
3.2. Selectores CSS
Los selectores en CSS se usan para seleccionar elementos HTML específicos que deseas
estilizar. Existen diferentes tipos de selectores.
3.2.1. Selector de id
El selector de id selecciona un elemento con un atributo id específico. Los id son únicos
por página.
Sintaxis:
Ejemplo:
3.2.2. Selector de clase
El selector de clase selecciona todos los elementos con una clase específica. Las clases
pueden aplicarse a múltiples elementos.
Sintaxis:
Ejemplo:
3.2.3. Selector universal
El selector universal (*) selecciona todos los elementos de la página.
Sintaxis:
Ejemplo:
Esto eliminará los márgenes y el padding de todos los elementos de la página.
3.2.4. Selector de agrupación
El selector de agrupación permite aplicar los mismos estilos a varios selectores.
Sintaxis:
Ejemplo:
Esto aplicará el color azul oscuro a todos los elementos <h1>, <h2> y <p>.
3.3. Atributos
Los atributos de CSS se refieren a las propiedades que controlan el estilo visual de los
elementos HTML. Ejemplos de atributos incluyen:
color: Cambia el color del texto.
background-color: Cambia el color de fondo.
font-size: Ajusta el tamaño de la fuente.
margin: Define el espacio exterior de un elemento.
padding: Define el espacio interior de un elemento.
4. Integración de CSS con HTML
CSS puede integrarse en HTML de tres maneras:
a) CSS Inline
El CSS se escribe directamente dentro de un elemento HTML usando el atributo style.
Ejemplo:
b) CSS Interno (en la cabecera)
El CSS se incluye dentro de una etiqueta <style> en la sección <head> del documento
HTML.
Ejemplo:
c) CSS Externo
El CSS se guarda en un archivo separado (.css) y se enlaza al documento HTML con la
etiqueta <link>.
Ejemplo:
Archivo styles.css:
5. Lista de atributos más comunes
Atributos de Texto
Atributo Función Posibles valores Ejemplo
color Define el color del texto. Nombre de color, código color: red;
hexadecimal, RGB, HSL
font-family Define la fuente del texto. Nombre de la fuente, lista font-family:
de fuentes alternativas Arial, sans-serif;
font-size Define el tamaño del texto. px, em, rem, %, vw font-size: 16px;
font- Define el grosor del texto. normal, bold, bolder, font-weight:
weight lighter, 100-900 bold;
font-style Define el estilo de la normal, italic, oblique font-style: italic;
fuente.
font- Define variantes de la normal, small-caps font-variant:
variant fuente (small-caps). small-caps;
line-height Ajusta la altura de la línea número, porcentaje, line-height: 1.5;
del texto. normal
letter- Ajusta el espacio entre número en px, em letter-spacing:
spacing letras. 2px;
text-align Alinea el texto. left, right, center, justify text-align:
center;
text- Controla la capitalización none, capitalize, text-transform:
transform del texto. uppercase, lowercase uppercase;
text- Aplica subrayado, tachado, none, underline, line- text-decoration:
decoration etc. through, overline underline;
text-indent Indenta la primera línea de número en px, em, % text-indent:
un párrafo. 50px;
white- Controla cómo se manejan normal, nowrap, pre, pre- white-space:
space los espacios en blanco. line, pre-wrap nowrap;
word- Ajusta el espacio entre número en px, em word-spacing:
spacing palabras. 5px;
2. Atributos de Fondo
Atributo Función Posibles valores Ejemplo
background- Define el color de Nombre de color, background-color:
color fondo del elemento. código hexadecimal, #f0f0f0;
RGB, HSL
background- Aplica una imagen de url(), none background-image:
image fondo. url('imagen.jpg');
background- Controla la repetición repeat, repeat-x, background-repeat:
repeat de la imagen de fondo. repeat-y, no-repeat no-repeat;
background- Establece la posición left, right, center, background-position:
position de la imagen de fondo. coordenadas en px o % center;
background- Ajusta el tamaño de la auto, cover, contain, background-size:
size imagen de fondo. valores en px o % cover;
background- Fija la imagen de scroll, fixed, local background-
attachment fondo o la permite attachment: fixed;
desplazarse.
background- Controla cómo se border-box, padding- background-clip:
clip pinta el fondo de un box, content-box padding-box;
elemento.
3. Atributos del Modelo de Caja (Box Model)
Atributo Función Posibles valores Ejemplo
margin Define el espacio exterior número en px, %, auto margin: 10px;
alrededor de un
elemento.
padding Define el espacio interior número en px, % padding: 20px;
entre el contenido y
borde.
border Define el borde del border-width border-style border: 1px solid
elemento. border-color black;
border- Redondea las esquinas número en px, % border-radius:
radius del borde. 5px;
border- Define el color del borde. Nombre de color, código border-color:
color hexadecimal, RGB, HSL blue;
border- Define el grosor del número en px, thin, border-width:
width borde. medium, thick 2px;
border- Define el estilo del borde none, solid, dashed, border-style:
style (solid, dashed, etc.). dotted, double dashed;
box- Aplica una sombra al none, h-shadow v-shadow box-shadow: 2px
shadow elemento. blur spread color 2px 5px gray;
width Define el ancho del número en px, %, auto width: 100px;
elemento.
height Define la altura del número en px, %, auto height: 200px;
elemento.
max-width Define el ancho máximo número en px, %, none max-width:
de un elemento. 500px;
max- Define la altura máxima número en px, %, none max-height:
height de un elemento. 400px;
min-width Define el ancho mínimo número en px, % min-width:
de un elemento. 300px;
min-height Define la altura mínima número en px, % min-height:
de un elemento. 150px;
4. Atributos de Posicionamiento
Atributo Función Posibles Ejemplo
valores
position Define el tipo de posicionamiento static, relative, position:
del elemento. absolute, fixed, relative;
sticky
top, right, Posiciona el elemento en relación número en px, %, top: 10px;
bottom, left a su contenedor. auto
z-index Controla la superposición de número, auto z-index: 10;
elementos.
float Flota un elemento hacia la left, right, none float: left;
izquierda o derecha.
clear Controla el comportamiento del none, left, right, clear: both;
siguiente elemento en relación a both
flotantes.
overflow Controla cómo manejar el visible, hidden, overflow: hidden;
contenido desbordante. scroll, auto
clip Recorta un elemento en función de rect(top, right, clip: rect(10px,
un rectángulo. bottom, left) 50px, 100px,
10px);
5. Atributos de Visualización y Flexbox
Atributo Función Posibles valores Ejemplo
display Define cómo se muestra block, inline, inline- display: block;
el elemento. block, none, flex, grid
flex Define cómo crecen o número flex: 1;
encogen los elementos
flexibles.
flex-direction Define la dirección de los row, column, row- flex-direction:
elementos en contenedor reverse, column-reverse row;
flex.
justify- Alinea los elementos flex-start, flex-end, justify-content:
content flexibles en el eje center, space-between, center;
principal. space-around
align-items Alinea los elementos flex-start, flex-end, align-items: flex-
flexibles en el eje center, baseline, stretch start;
transversal.
align-self Alinea un solo elemento auto, flex-start, flex-end, align-self: center;
flexible. center, baseline, stretch
order Cambia el orden de los número order: 2;
elementos flexibles.
gap Define el espacio entre número en px, em gap: 10px;
elementos flexibles o de
grid.
grid- Define el número de número en px, %, auto grid-template-
template- columnas en un columns: 100px
columns contenedor grid. 200px;
grid- Define el número de filas número en px, %, auto grid-template-
template- en un contenedor grid. rows: 100px
rows 150px;
6. Atributos de Visibilidad y Efectos
Atributo Función Posibles valores Ejemplo
visibility Controla la visibilidad del visible, hidden, collapse visibility:
elemento. hidden;
opacity Define la opacidad del número de 0 a 1 opacity: 0.5;
elemento.
cursor Cambia la apariencia del auto, pointer, text, cursor: pointer;
cursor cuando pasa sobre el move, default, none
elemento.
transform Aplica transformaciones como none, rotate(), scale(), transform:
rotación o escala. translate(), skew() rotate(45deg);
transition Define la transición de cambio property duration transition: all
de estilo. timing-function delay 0.5s ease;
animation Aplica una animación al name duration timing- animation: fade-
elemento. function delay iteration- in 2s;
count
filter Aplica efectos visuales como none, blur(), filter: blur(5px);
desenfoque o saturación. brightness(), contrast(),
grayscale()
backdrop- Aplica efectos visuales sobre blur(), brightness(), backdrop-filter:
filter los elementos detrás de un contrast(), grayscale() blur(10px);
fondo.
7. Atributos de Listas
Atributo Función Posibles valores Ejemplo
list-style Define el estilo de la none, disc, circle, square, list-style: square;
lista. decimal, lower-roman, upper-
roman, lower-alpha, upper-
alpha
list-style- Define el tipo de none, disc, circle, square, list-style-type: disc;
type marcador de la lista. decimal, etc.
list-style- Define la posición del inside, outside list-style-position:
position marcador de la lista. inside;
list-style- Define una imagen url(), none list-style-image:
image personalizada como url('marcador.png');
marcador.
8. Atributos de Tablas
Atributo Función Posibles Ejemplo
valores
border- Controla si los bordes de la tabla collapse, border-collapse:
collapse se colapsan. separate collapse;
border- Define el espacio entre bordes de número en px border-spacing:
spacing celdas. 10px;
caption-side Controla la posición del título de la top, bottom caption-side:
tabla. bottom;
empty-cells Controla si las celdas vacías se show, hide empty-cells: hide;
muestran.
9. Atributos de Columnas Múltiples
Atributo Función Posibles valores Ejemplo
column- Define el número de número column-count:
count columnas de un 3;
contenedor.
column- Define el espacio entre número en px, em, % column-gap:
gap columnas. 20px;
column- Define la regla (línea) column-rule-width column- column-rule:
rule entre columnas. rule-style column-rule-color 2px solid black;
