El lenguaje de programcion Css
CSS (Cascading Style Sheets) es el lenguaje utilizado para diseñar y estilizar elementos en una página web. Permite modificar colores, fuentes, tamaños, espaciado y la disposición de los elementos,
mejorando la apariencia y experiencia del usuario.
Conceptos básicos de CSS:
Selectores:
Los selectores indican a qué elementos HTML se aplicará un conjunto de reglas de estilo. Algunos tipos comunes son:
-
elemento: selecciona todas las etiquetas de ese tipo (por ejemplo, p, div).
-
.clase: selecciona todos los elementos con esa clase (.mi-clase).
-
#id: selecciona un elemento con un ID específico (#mi-id).
-
elemento elemento: selector descendiente (por ejemplo, div p selecciona todos los p dentro de un div).
-
elemento > elemento: selecciona solo los elementos hijos directos.
Propiedades y valores:
Cada regla CSS contiene propiedades (como color, font-size, margin) seguidas de sus respectivos valores:
p{
color: blue;
font-size: 16px;
}
En este caso, todos los párrafos <p> tendrán texto azul y tamaño de 16 píxeles.
Propiedades y valores: Cada propiedad controla un aspecto visual del elemento, y el valor determina cómo se aplicará.
-
color: Define el color del texto.
-
font-size: Ajusta el tamaño de la fuente.
-
margin y padding: Controlan los espacios alrededor de los elementos.
Métodos de aplicación:
CSS en línea:
Se escribe directamente dentro del elemento HTML. Aplicás estilos directamente en el atributo style del elemento HTML.
<p style="color: blue; font-size: 18px;"> Texto azul </p>
Estilos internos (en el mismo archivo HTML)
Se colocan en una etiqueta <style> dentro del <head> del documento HTML.
<head>
<style>
p {
color: green;
}
</style>
</head>
Estilos externos (archivo .css aparte)
Se crea un archivo .css (por ejemplo, estilos.css) y se vincula usando <link>.
<head>
<link rel="stylesheet" href="estilos.css">
</head>
Reglas CSS
Una regla CSS incluye:
-
Un selector
-
Un bloque de declaraciones { } con pares propiedad: valor;
Especificidad
Cuando varios estilos se aplican al mismo elemento, la especificidad determina cuál gana. Por ejemplo:
- Un #id tiene más peso que una .clase.
- Los estilos inline (style="...") tienen alta prioridad.
Cascada y herencia:
- Cascada: Si varios estilos aplican, el orden y la especificidad determinan el resultado final.
- Herencia: Algunas propiedades (como font-family, color) se heredan de los elementos padres.
En proceso...
