Introducción a CSS
CSS (Hojas de Estilo en Cascada) es un lenguaje estandarizado que se utiliza para definir la apariencia visual de documentos HTML. Facilita la separación entre contenido y presentación, permitiendo controlar elementos como colores, tipografía y distribución sin alterar la estructura del marcado.
Sintaxis Básica
selector {
propiedad: valor;
propiedad: valor;
}
Comentarios en CSS
/* Esto es un comentario en CSS */
Métodos para Incluir CSS
Estilos Internos con la Etiqueta <style>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Demostración Interna</title>
<style>
parrafo {
color: rojo;
}
</style>
</head>
<body>
<p>Ejemplo de texto estilizado</p>
</body>
</html>
Vinculación de Archivos CSS Externos
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Enlace Externo</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>Contenido con estilo externo</p>
</body>
</html>
Estilos en Línea (No Recomendado)
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Estilo en Línea</title>
</head>
<body>
<p style="color: verde">Texto con estilo aplicado directamente</p>
</body>
</html>
Selectores Básicos
Selector de Etiqueta (Búsqueda Amplia)
Selecciona elementos basados en su nombre de etiqueta.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector de Etiqueta</title>
<style>
h2 {
color: naranja;
}
</style>
</head>
<body>
<h2>Primer encabezado</h2>
<h2>Segundo encabezado</h2>
<h2>Tercer encabezado</h2>
</body>
</html>
Selector de Clase (Búsqueda por Atributo)
Utiliza el atributo class con el prefijo punto.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector de Clase</title>
<style>
.resaltado {
color: morado;
}
</style>
</head>
<body>
<h2 class="resaltado">Texto destacado</h2>
<h2 class="normal">Texto regular</h2>
<h2 class="resaltado">Otro texto destacado</h2>
</body>
</html>
Selector de ID (Búsqueda Precisa)
Emplea el atributo id con el prefijo numeral.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector de ID</title>
<style>
#unico {
color: cian;
}
</style>
</head>
<body>
<h2 class="resaltado" id="unico">Elemento único</h2>
<h2 class="resaltado">Elemento común</h2>
<h2 class="normal">Otro elemento común</h2>
</body>
</html>
Selectores de Relación
Tipos Principales
Incluyen selectores de descendientes, hijos, hermanos adyacentes y hermanos generales.
Ejemplo de Estructura HTML
<div id="contenedor">
<div>Sección A
<p>Párrafo interno</p>
</div>
<p>Párrafo directo
<span>Span interno</span>
</p>
<span>Span externo</span>
</div>
Código de Selectores
Selector de Hijos (Símbolo >)
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector de Hijos</title>
<style>
#contenedor > span {
color: violeta;
}
</style>
</head>
<body>
<div id="contenedor">Contenedor
<div>Subdivisión
<p>Párrafo</p>
</div>
<p>Otro párrafo
<span>Span anidado</span>
</p>
<span>Span directo</span>
<span>Span adicional</span>
</div>
</body>
</html>
Selector de Descendientes (Símbolo Espacio)
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector de Descendientes</title>
<style>
#contenedor span {
color: violeta;
}
</style>
</head>
<body>
<div id="contenedor">Contenedor
<div>Subdivisión
<p>Párrafo</p>
</div>
<p>Otro párrafo
<span>Span anidado</span>
</p>
<span>Span directo</span>
<span>Span adicional</span>
</div>
</body>
</html>
Selector de Hermano Adyacente (Símbolo +)
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Hermano Adyacente</title>
<style>
#referencia + span {
color: violeta;
}
</style>
</head>
<body>
<div id="contenedor">Contenedor
<div>Subdivisión
<p>Párrafo</p>
</div>
<p id="referencia">Párrafo clave
<span>Span interno</span>
</p>
<span>Span siguiente</span>
<span>Span posterior</span>
</div>
</body>
</html>
Selector de Hermano General (Símbolo ~)
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Hermano General</title>
<style>
#referencia ~ h2{
color: violeta;
}
</style>
</head>
<body>
<div>Contenedor
<h2>Encabezado 1</h2>
<div id="referencia">Sección
<p>Párrafo</p>
</div>
<p id="otro">Párrafo 2
<span>Span</span>
</p>
<span>Span externo</span>
<h2>Encabezado 2</h2>
<h2>Encabezado 3</h2>
</div>
</body>
</html>
Selectores de Atributos
Basados en nombres y valores de atributos, usando corchetes.
Por Nombre de Atributo
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Atributo por Nombre</title>
<style>
[class] {
background: azul;
}
</style>
</head>
<body>
<input type="text" name="campo1" class="activo">
<input type="text" name="campo2">
<p class="ejemplo">Texto con clase</p>
<p id="unico">Texto sin clase</p>
</body>
</html>
Por Nombre y Valor Exacto
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Atributo con Valor</title>
<style>
[class="activo"] {
background: azul;
}
</style>
</head>
<body>
<input type="text" name="campo1" class="activo">
<input type="text" name="campo2" class="inactivo">
<p class="ejemplo">Texto ejemplo</p>
</body>
</html>
Por Etiqueta, Nombre y Valor
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Combinación de Atributos</title>
<style>
p[class="especial"] {
background: azul;
}
</style>
</head>
<body>
<input type="text" name="campo1" class="especial">
<input type="text" name="campo2" class="normal">
<p class="especial">Párrafo especial</p>
<p class="normal">Párrafo normal</p>
</body>
</html>
Agrupación y Anidamiento
Agrupación con Comas
/* Selecciona etiquetas div, p y span */
div, p, span {
color: rojo;
}
Optimización con Agrupación
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Agrupación Optimizada</title>
<style>
/* La coma indica relación paralela */
div, span, p {
color: rojo;
}
</style>
</head>
<body>
<div>Elemento div</div>
<p>Elemento p</p>
<span>Elemento span</span>
</body>
</html>
Anidamiento de Selectores
#id1, .clase1, span {
color: rojo;
}
Uso Combinado
div#unico /* Busca div con id único */
div.clase1 /* Busca div con clase clase1 */
div #unico /* Busca descendiente con id único dentro de div */
#unico > .clase1 /* Busca hijo con clase clase1 dentro de id único */
Selectores de Pseudo-clases
Pseudo-clase :hover
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Efecto Hover</title>
<style>
p {
color: gris;
}
p:hover {
color: azul claro;
}
</style>
</head>
<body>
<p>Pase el ratón sobre este texto</p>
</body>
</html>
Pseudo-clase :focus
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Efecto Focus</title>
<style>
input:focus {
background-color: azul claro;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
Selectores de Pseudo-elementos
Permiten manipular contenido textual meidante CSS.
Estilizar la Primera Letra
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Primera Letra</title>
<style>
p:first-letter {
color: azul claro;
font-size: 24px;
}
</style>
</head>
<body>
<p>Texto con primera letra estilizada</p>
</body>
</html>
Insertar Contenido Antes
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Contenido Antes</title>
<style>
p:before {
content: 'Prefijo: ';
color: azul;
}
</style>
</head>
<body>
<p>Texto principal</p>
</body>
</html>
Insertar Contenido Después
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Contenido Después</title>
<style>
p:after {
content: ' - Sufijo';
color: azul claro;
}
</style>
</head>
<body>
<p>Texto principal</p>
</body>
</html>
Aplicaciones comunes incluyen la lmipieza de flujos y la prevención de copia de contenido en sitios web.