🌟 Conceptos basicos de HTML y CSS 🌟
HTML (HyperText Markup Language) es el lenguaje de marcado utilizado para estructurar y presentar
contenido en la web. CSS (Cascading Style Sheets) es el lenguaje de estilos utilizado para describir
la
presentación de un documento HTML. Juntos, HTML y CSS permiten crear páginas web atractivas y
funcionales.
¿Qué es HTML?
HTML es un lenguaje de marcado utilizado para estructurar y presentar contenido en la web. Es un
lenguaje de marcado de etiquetas que utiliza la etiqueta <html> como el encabezado del
documento.
HTML se utiliza para crear páginas web dinámicas y interactivas, y se utiliza para estructurar el
contenido de la página web.
¿Qué es CSS?
CSS (Cascading Style Sheets) es un lenguaje de estilos utilizado para describir la presentación de
undocumento HTML. CSS se utiliza para aplicar estilos a los elementos HTML, como el color, el
tamaño,
lafuente, la posición y otros atributos. CSS se utiliza para crear páginas web atractivas y
funcionales.
Propiedades
En HTML existen diferentes etiquetas que permiten agregar y estructurar texto dentro de una
página
web. Estas etiquetas no solo sirven para mostrar palabras en pantalla, sino también para darles
un
significado semántico, lo que ayuda a los navegadores, motores de búsqueda y lectores de
pantalla a
interpretar mejor el contenido.
Entre las más utilizadas se encuentran: <p>, <h1> hasta <h6>, <a>,
<img>, <ul>, <ol>, <li>, <table>, <tr>, <th> y
<td>.
Selectores
En CSS, los selectores son las herramientas que nos permiten aplicar estilos a elementos específicos
dentro de una página web. En otras palabras, sirven para indicar qué etiqueta o elemento HTML
queremos
modificar y cómo queremos que se vea. Gracias a ellos podemos controlar propiedades como el color,
el
tamaño de la fuente, los márgenes, la posición, el espaciado, entre muchas otras características
visuales.
✅ Importancia de los selectores
Comprender cómo funcionan los selectores es fundamental porque nos permiten:
- Precisión: elegir exactamente qué elementos queremos modificar
- Eficiencia: aplicar estilos de forma organizada y reutilizable
- Escalabilidad: mantener el código CSS limpio y fácil de mantener
- Diseño profesional: lograr que la página tenga una apariencia coherente y
atractiva
✅ Tipos de selectores
Los selectores se pueden clasificar en tres categorías:
- Elementos: seleccionan elementos individuales, como <p>, <h1>,
<img>, <a>, <ul>, <li>, <table> y <tr>.
- Clases: seleccionan elementos por su clase, como
.btn,
.container, .row y .col.
- Id: seleccionan elementos por su identificador, como
#header,
#footer, #menu y #content.
| Tipo de selector |
Ejemplo |
Uso principal |
| Universal |
* { } |
Todos los elementos |
| Etiqueta |
p { } |
Todas las etiquetas de un tipo |
| Clase |
.contenedor { } |
Elementos con una clase |
| ID |
#titulo { } |
Un elemento único |
| Descendiente |
div p { } |
Elementos dentro de otro |
| Hijo directo |
div > p { } |
Hijos inmediatos |
| Adyacente |
h1 + p { } |
Elemento justo después |
| Atributo |
input[type=
"text"] { } |
Según atributos |
| Pseudo clase |
a:hover { } |
Estados dinámicos |
Box Model
El modelo de caja es un modelo de diseño que se utiliza para crear diseños de interfaz de usuario
(UI) en línea. El modelo de caja se basa en cuatro elementos fundamentales: contenedor, borde,
espacio y contenido. Estos elementos se utilizan para crear diseños que se adapten a diferentes
tamaños de pantalla y resoluciones de pantalla.
El modelo de caja se divide en cuatro partes principales:b
- Contenedor: es el elemento que contiene todo el contenido de la página web.
- Borde: es el elemento que se encuentra alrededor del contenedor y se
utiliza para crear un efecto de borde.
- Espacio: es el elemento que se encuentra entre los bordes y el contenido.
- Contenido: es el elemento que contiene el contenido de la página web.
Flexbox
Flexbox en CSS es un sistema de diseño unidimensional que permite organizar y alinear elementos
dentro de un contenedor de manera flexible y adaptable, ya sea en filas o columnas. Es
especialmente útil para crear interfaces responsivas sin necesidad de usar flotados o
posicionamiento complejo.
📌 Concepto básico
- Nombre completo: CSS Flexible Box Layout Module.
- Función principal: Distribuir espacio y alinear elementos dentro de un
contenedor.
- Unidimensional: Trabaja en una sola dirección a la vez (horizontal o
vertical).
Componentes clave
- Flex container: El elemento padre con display: flex o
display: inline-flex.
- Flex items: Los elementos hijos que se organizan automáticamente dentro del
contenedor.
🔑 Propiedades más importante
- flex-direction: Define la dirección principal (row, column)
- justify-content: Controla la alineación en el eje principal (izquierda,
derecha, centro, espacio entre elementos).
- align-items: Controla la alineación en el eje secundario (arriba, abajo,
centro).
- flex-wrap: Permite que los elementos se ajusten en varias líneas si no
caben
en una sola.
- flex-grow, flex-shrink, flex-basis: Controlan cómo los elementos crecen, se
encogen o definen su tamaño base.