Unidad 2 A

Descargar como docx, pdf o txt
Descargar como docx, pdf o txt
Está en la página 1de 4

Unidad 2 A

Temas Principales: Hojas de Estilo CSS.

1. Introducción a CSS

o Definición: CSS (Cascading Style Sheets) se utiliza para agregar diseño y estilo
a páginas web.

o Importancia: Separa el contenido (HTML) del diseño, mejorando la estructura


y presentación.

Introducción a CSS

Definición: CSS (Cascading Style Sheets) es un lenguaje diseñado para controlar la


presentación visual de documentos escritos en HTML o XML. Permite definir el estilo y diseño
de los elementos web, incluyendo colores, fuentes, márgenes, espaciados, posiciones y más.
Este lenguaje facilita la creación de interfaces de usuario atractivas y funcionales separando el
contenido estructural (HTML) de su presentación visual.

Importancia: CSS es esencial para el desarrollo web moderno porque:

1. Separación de contenido y diseño: Mejora el mantenimiento del sitio web al


permitir modificar el diseño sin alterar el contenido HTML.

2. Flexibilidad y consistencia: Permite aplicar estilos reutilizables en múltiples


páginas para garantizar una apariencia uniforme.

3. Diseño responsive: Hace que los sitios sean adaptables a diferentes tamaños de
pantalla, mejorando la experiencia del usuario en dispositivos móviles y de
escritorio.

4. Rendimiento optimizado: Usar un archivo CSS centralizado para múltiples


páginas reduce la carga de datos y mejora la velocidad del sitio.

Este enfoque permite a los desarrolladores trabajar de forma más eficiente y centrarse en crear
diseños más atractivos y accesibles.

2. Estructura de CSS

o Reglas básicas:

 Selectores: Identifican elementos a los que se aplican estilos.

 Declaraciones: Combinaciones de propiedades y valores (ej., color:


red;).

o Tipos de declaraciones:

 Interna: Dentro del <style> en el HTML.

 Externa: En un archivo .css vinculado al HTML con <link>.

 Inline: Directamente en la etiqueta HTML con el atributo style.

Reglas básicas
Selectores: Los selectores en CSS se utilizan para identificar los elementos HTML a los
que se aplicarán los estilos. Pueden ser de varios tipos, como selectores de tipo (por
ejemplo, p para párrafos), selectores de clase (por ejemplo, .miClase), selectores de ID (por
ejemplo, #miID), y más. Los selectores permiten aplicar estilos específicos a elementos
específicos en una página web

Declaraciones: Una declaración en CSS es una combinación de una propiedad y su valor


correspondiente, separados por dos puntos y terminados con un punto y coma. Por
ejemplo, color: red; es una declaración que establece el color del texto en rojo. Las
declaraciones se agrupan dentro de un bloque de reglas, que está delimitado por llaves {}

Tipos de declaraciones

 Interna: Las declaraciones internas se colocan dentro de una etiqueta <style> en el


documento HTML. Este método es útil para aplicar estilos específicos a una sola página
sin necesidad de un archivo CSS externo. Sin embargo, no es tan eficiente para sitios
web grandes, ya que los estilos no se pueden reutilizar fácilmente.

 Externa: Las declaraciones externas se almacenan en un archivo .css separado, que se


vincula al documento HTML mediante una etiqueta <link>. Este es el método más
común y eficiente, ya que permite reutilizar el mismo archivo CSS en múltiples
páginas, facilitando el mantenimiento y la consistencia del diseño.

 Inline: Las declaraciones inline se aplican directamente a un elemento HTML


utilizando el atributo style. Este método es menos recomendable porque mezcla el
contenido HTML con los estilos, lo que puede dificultar el mantenimiento y la
legibilidad del código. Sin embargo, puede ser útil para aplicar estilos rápidos y
específicos a un solo elemento.

3. Propiedades comunes de CSS


o Texto:

 font-family, font-size, text-align, text-decoration.

o Colores y fondos:

 color, background-color.

o Bordes y márgenes:

 border, margin, padding.

Texto

font-family: Esta propiedad se utiliza para especificar la fuente del texto. Puedes definir
una lista de fuentes, de modo que, si la primera no está disponible, el navegador intentará usar la
siguiente. Por ejemplo, font-family: Arial, sans-serif;

font-size: Controla el tamaño del texto. Puedes usar unidades como píxeles (px), ems
(em), porcentajes (%), entre otras. Por ejemplo, font-size: 16px; establece el tamaño del texto a
16 píxeles

text-align: Define la alineación del texto dentro de su contenedor. Los valores comunes
incluyen left, right, center y justify. Por ejemplo, text-align: center; centra el texto en su
contenedor

text-decoration: Se utiliza para aplicar decoraciones al texto, como subrayado


(underline), línea a través (line-through), y más. Por ejemplo, text-decoration:
underline; subraya el texto

Colores y fondos

color: Esta propiedad establece el color del texto. Puedes usar nombres de colores (red),
valores hexadecimales (#ff0000), RGB (rgb(255, 0, 0)), entre otros. Por ejemplo, color:
blue; cambia el color del texto a azul

background-color: Define el color de fondo de un elemento. Similar a color, puedes


usar varios formatos de color. Por ejemplo, background-color: #f0f0f0; establece un color de
fondo gris claro

Bordes y márgenes

border: Esta propiedad es una abreviatura para definir el ancho, estilo y color del borde
de un elemento. Por ejemplo, border: 1px solid black; crea un borde negro sólido de 1 píxel de
ancho

margin: Controla el espacio exterior alrededor de un elemento. Puedes especificar


valores para cada lado (superior, derecho, inferior, izquierdo) o usar un valor único para todos
los lados. Por ejemplo, margin: 10px; aplica un margen de 10 píxeles en todos los lados

padding: Define el espacio interior entre el contenido de un elemento y su borde.


Similar a margin, puedes especificar valores para cada lado o un valor único. Por
ejemplo, padding: 20px; aplica un relleno de 20 píxeles en todos los lados
4. Ejemplo de aplicación

o Crear un portal web estático con HTML y CSS, incluyendo secciones


organizadas temáticamente.

También podría gustarte