Scribd
Cargar
14 vistas2 páginas

Estilos de Paguinas

El documento describe los estilos CSS y su aplicación en la estructura de páginas web, destacando el modelo de caja y las diferentes formas de aplicar estilos. Se explican los selectores CSS, la organización de plantillas HTML5 y el uso de box-sizing para un mejor control del diseño. También se menciona la lógica de cascada y especificidad en la aplicación de estilos.

Cargado por

2022030053
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
14 vistas2 páginas

Estilos de Paguinas

El documento describe los estilos CSS y su aplicación en la estructura de páginas web, destacando el modelo de caja y las diferentes formas de aplicar estilos. Se explican los selectores CSS, la organización de plantillas HTML5 y el uso de box-sizing para un mejor control del diseño. También se menciona la lógica de cascada y especificidad en la aplicación de estilos.

Cargado por

2022030053
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

ESTILOS DE PAGUINAS

Estilos CSS y Cascada

🧱 Modelo de Caja y Estructura


Cada elemento HTML se considera una "caja" en la web. CSS permite controlar visualmente
estas cajas (tamaño, márgenes, bordes, relleno, etc.), lo que da lugar al modelo de caja
tradicional, adoptado ampliamente desde las primeras versiones de CSS.

🎨 Formas de aplicar estilos


Hay varias formas de aplicar estilos en CSS:

1. En línea: con el atributo style directamente en el HTML. Es fácil pero poco mantenible.
2. Embebido: dentro de <style> en el <head>.
3. Externo: mediante archivos .css vinculados con <link> en el <head>, que es la práctica
recomendada.

🎯 Selectores CSS
Los estilos afectan a elementos HTML mediante diferentes tipos de selectores:

Por palabra clave: p { font-size: 20px } afecta a todos los <p>.


Por id: #miId { color: red }, exclusivo y único.
Por class: .miClase { font-size: 16px }, reutilizable.
Por atributos: p[name="titulo"], o combinaciones como p[name^="tit"].
Pseudo-clases: como :nth-child(), :last-child, :not() para estilos más dinámicos.
Nuevos selectores CSS3: como div > p, div + p, div ~ p que definen relaciones entre
elementos.

🌐 Organización y Plantillas
Se detalla cómo construir una plantilla HTML5 con CSS desde cero:

Se usa un <div> principal centrado con un ancho de 960px.


Elementos como <header>, <nav>, <section>, <aside>, <footer> reciben estilos específicos y
se declaran como display: block.
Se ajustan márgenes y alineaciones para centrar y ordenar visualmente el contenido.

⚙️ Box-Sizing y últimos toques


Se introduce el concepto de box-sizing: border-box, útil para que el padding no incremente el
tamaño total de los elementos. También se aplican estilos generales (como el uso del selector
universal *) para normalizar los márgenes y paddings del documento.

📚 Cascada y Especificidad
Aunque no es el foco central del capítulo, se insinúa la lógica de cascada de estilos, donde los
estilos más específicos (por ejemplo, un id frente a un element) tienen mayor peso.

También podría gustarte