SOLUCIÓN TALLER ASPECTOS DE CSS

Johan Santiago Caicedo David

Centro de comercio y servicios, SENA

Tecnólogo en Análisis y Desarrollo de Software

GUSTAVO SALAZAR

Popayán Cauca.
7 de noviembre de 2023
Introducción

En el proceso de desarrollo de páginas web, resulta crucial la planificación de una

estructura que defina la apariencia y disposición de nuestro producto final. Para llevar a
cabo esta tarea esencial, se hace uso de un lenguaje fundamental: el Hipertext Markup
Language (HTML). No obstante, HTML se limita a proporcionar un esquema básico de la
página, dejando la presentación visual en un segundo plano. Es aquí donde entra en juego
una herramienta indispensable: las Cascading Style Sheets (CSS).

CSS permite crear una presentación estética para documentos que ya han sido estructurados
y escritos en un lenguaje de marcado, como HTML. Su objetivo es hacer que el contenido
sea atractivo y agradable a los ojos de los usuarios, optimizando así la experiencia de
navegación.

En este informe, exploraremos diversos aspectos relacionados con CSS, con el propósito de
profundizar en el conocimiento de las herramientas disponibles en este lenguaje y su
aplicación en el diseño web. Unidades en css (unidades de longitud, unidades de color,
unidades de porcentaje)
Aspectos de CSS

1. unidades absolutas y unidades relativas para las unidades de longitud.

 Unidades absolutas: Son las que se utilizan con mayor frecuencia, estas no
están referenciadas a ninguna otra unidad, es decir, no dependen de un valor
de referencia. Son unidades de medidas definidas por la física, como el
píxel, centímetro, metro, etc.
Estas medidas son fijas y no cambian según las especificaciones del
dispositivo. Este tipo de medición está indicado para cuando conocemos a la
perfección las características físicas y las configuraciones de las medias
donde se exhibirán nuestros proyectos.
 Medidas relativas: Estas unidades de medida suelen ser menos familiares en
comparación con las absolutas. Se determinan en relación a otra unidad de
medida previamente definida, como es el caso de "em" y "rem"
(Exploraremos con más detalle estas dos unidades en el transcurso de este
artículo). El uso de medidas relativas resulta especialmente adecuado para
realizar adaptaciones en distintos dispositivos, garantizando un diseño
constante y flexible en diversas resoluciones y tamaños de pantalla.
2. Propiedades de: fondo, fuente, texto, listas
 Propiedades de fondo: Algunas propiedades relacionadas con el fondo en
CSS incluyen background-color, background-image, background-repeat,
background-position, background-size, background-attachment, y
background-clip. Estas propiedades se utilizan para personalizar el fondo de
un elemento.
 Propiedades de fuente: CSS ofrece propiedades como font-family, font-size,
font-weight, font-style, font-variant, y line-height para controlar la
apariencia del texto en un elemento.
 Propiedades de texto: Propiedades como color, text-align, text-decoration,
text-transform, text-indent y letter-spacing se utilizan para controlar la
apariencia y el diseño del texto en un elemento.
  Propiedades de listas: Las propiedades list-style-type, list-style-image y list-
style-position se utilizan para personalizar la apariencia de las listas (por
ejemplo, listas no ordenadas o listas ordenadas) en una página web.
3. Modelo de cajas en CSS.
El modelo de cajas en CSS se refiere a cómo se representan y se manejan los
elementos HTML en términos de su estructura de caja. Cada elemento HTML se
considera una caja rectangular con cuatro áreas principales: contenido, relleno,
borde y margen. El modelo de cajas se utiliza para controlar el tamaño y el espacio
alrededor de un elemento.
4. Propiedades de bordes, relleno y margenes para cajas.
 Propiedades de bordes: Algunas propiedades relacionadas con los bordes en
CSS incluyen border-width, border-style y border-color. Estas propiedades
se utilizan para definir el grosor, el estilo y el color de los bordes de un
elemento.
 Propiedades de relleno: La propiedad padding se utiliza para definir el
espacio entre el contenido de un elemento y su borde. Puedes especificar
valores para el relleno en todas las direcciones (arriba, derecha, abajo,
izquierda) por separado o de manera abreviada.
 Propiedades de márgenes: La propiedad margin se utiliza para definir el
espacio entre el borde de un elemento y los elementos adyacentes. Al igual
que con el relleno, puedes especificar valores para los márgenes en todas las
direcciones o de manera abreviada.