Programación III
Desarrollo Web Frontend
Edición 2023
Universidad Tecnológica Nacional
Facultad Regional Paraná
Programación III
Introducción a las hojas de estilo
Selectores
Modelo de cajas
Propiedades de texto
Introducción a las hojas de estilo
Las hojas de estilo en cascada (CSS - Cascade Style Sheet) permiten especificar como se
presentará un documento a los usuarios. De esta manera podemos definir como se diseñan,
compaginan, etc. los elementos de nuestra página web.
Es un lenguaje basado en reglas.
●
•Desarrollado por la W3C.
Cada regla define un grupo de estilos que van a aplicarse.
●
Puede afectar a uno o varios elementos HTML.
●
•Permite separar el contenido de la representación visual de un sitio web.
Sintaxis de una regla CSS
Introducción a las hojas de estilo (Continuación...)
Agregando CSS a un documento
Existen tres formas de aplicar CSS a un documento HTML. La más habitual es vincular un
archivo de CSS externo al encabezado del documento HTML.
●Crear el archivo de hojas de estilo con extensión .css
●Añadir el archivo CSS dentro del <head> del documento HTML como se muestra a
continuación:
El elemento <link> indica al navegador que existe una hoja de estilo con el atributo rel=’stylesheet’ y la
ubicación a la misma con el atributo href.
Introducción a las hojas de estilo (Continuación...)
Agregando CSS a un documento
Otra forma de agregar contenido CSS a nuestro documento es utilizar una hoja de estilos
interna dentro de un elemento <style> dentro del <head> de nuestro documento HTML.
Este tipo de definición permite añadir estilos solo a los componentes HTML del documento actual.
Introducción a las hojas de estilo (Continuación...)
Agregando CSS a un documento
El último de los métodos para agregar estilos a nuestro documento HTML es añadir estilos
en línea. Permite definir declaraciones de estilos sobre un único elemento HTML.
Este tipo de definición NO se recomienda.
Introducción a las hojas de estilo (Continuación...)
Reglas conflictivas
En muchos casos las reglas CSS que se aplican sobre un elemento HTML no funcionan
de la manera en que lo esperamos, y por lo general esto se debe a que existen dos o más
normas que podrían estar aplicadas al mismo elemento.
Cascada
La cascada en las hojas de estilo significa que el orden de las reglas importa en CSS. Si
dos reglas poseen la misma especificidad, se aplicará la regla que aparece en último
lugar.
Especificidad
Es la forma en que el navegador decide qué regla aplicar, en caso de existir más de una
regla para un mismo elemento.
Un selector de elemento (ej: p → elementos párrafo) es menos específico y representa
●
una puntuación más baja de especificidad.
●Un selector de clase (ej: class=’parrafos’ → selecciona todos los elementos que incluyan
la clase párrafos) es más específico y recibe una puntuación mayor.
Introducción a las hojas de estilo (Continuación...)
Reglas conflictivas
Veamos un ejemplo donde dos reglas se pueden aplicar al mismo elemento h1. En este
caso, la mayor especificidad es sobre la regla que contiene el selector de clase .principal
[Link]
[Link]
Introducción a las hojas de estilo
Selectores
Modelo de cajas
Propiedades de texto
Selectores
Los selectores representan uno o varios elementos de nuestro documento HTML para
aplicar estilos.
Toda regla CSS comienza con la definición del selector sobre el cual vamos a dar un estilo
determinado.
Veamos algunos ejemplos:
p → selector de tipo
●
Los estilos se aplican a todos elementos de tipo párrafo del documento
HTML.
Selectores (Continuación...)
•.class → selector de clase. Indica el nombre de la clase que poseerá los atributos de
estilos
El nombre de cada clase comienza con un punto ( . )
Selectores (Continuación...)
•#ID → selector de ID. Selecciona un elemento basándose en el valor de su atributo
id.
Indica el ID al cual se aplicarán los atributos de estilo. El nombre de cada
ID debe comenzar con #.
Selectores (Continuación...)
•* → selector universal. Selecciona todos los elementos del documento HTML.
Se aplicarán los estilos a todos los elementos del documento HTML.
Selectores (Continuación...)
•[atributo] → selector de atributo. Selecciona elementos basándose en el valor de
algún atributo.
[disabled] Obtiene todos los elementos que posean el atributo disabled.
Selectores (Continuación...)
Agregar formato a un componente según su ubicación en el documento HTML
Podemos definir un estilo diferente para ciertos componentes dependiendo en donde se
encuentren ubicados. Para esto podemos hacer uso de los selectores que mencionamos
anteriormente.
[Link]
[Link]
En este ejemplo los estilos se aplican solamente a los elementos
<p> que estén dentro de un elemento padre con el atributo
class=’contenido-principal’
Selectores (Continuación...)
Dar formato a un componente según su estado
Otra alternativa con la que contamos es la capacidad de definir un estilo en función del
estado actual del componente.
Para este caso veremos como ejemplo el elemento <a> que presenta diferentes estados
dependiendo si se ha visitado o no el enlace, se ha pasado el cursor por encima o se a
presionado el elemento con el teclado o clic (activo).
Introducción a las hojas de estilo
Selectores
Modelo de cajas
Propiedades de texto
Modelo de cajas
El modelo de cajas permite crear diseños con CSS o alinear elementos unos con otros.
Define el tipo de visualización externa que tendrá el elemento HTML y cómo funcionan las
diferentes partes de una caja (margen, borde, relleno y contenido).
En general existen dos tipos de modelo de cajas:
Cajas en bloque (display: block)
●
Cajas en línea (display: inline)
●
El tipo de caja que se aplica sobre un elemento HTML está definido por los valores en la
propiedad CSS display.
Modelo de cajas (Continuación...)
●Cajas en bloque
✔ Fuerzan un salto de línea al llegar al final de la misma.
✔ La caja se extiende en la dirección de la línea hasta llenar todo el espacio disponible.
✔ Se respetan los valores de las propiedades width y height.
✔ El relleno, el margen y borde mantienen a otros elementos alejados de la caja.
Modelo de cajas (Continuación...)
●Cajas en línea
✔ No fuerzan un salto de línea al llegar al final de la misma.
✔ Las propiedades width y height no se aplican.
✔Se aplica relleno, margen y bordes verticales, pero no mantiene alejadas a otras cajas de la
línea.
✔Se aplica relleno, margen y bordes horizontales, y mantienen alejadas a otras cajas de la
línea.
Modelo de cajas (Continuación...)
Partes de una caja
A continuación veremos las distintas partes que conforman una caja de tipo bloque CSS
Contenido de la caja (Content box). Área donde se muestra el contenido y cuyo tamaño
●
puede modificarse utilizando propiedades como width y height.
●Relleno de la caja (Padding box). Es el espacio en blanco alrededor del contenido de la
caja. Puede modificarse su tamaño con la propiedad padding y otras relacionadas.
●Borde de la caja (Border box). Es el borde de la caja que envuelve el contenido y el de
relleno. Puede modificarse su tamaño con la propiedad border y otras relacionadas.
Margen de la caja (Margin box). Es el espacio en blanco que contiene a todos los
●
elementos de la caja (relleno, borde y contenido) y lo separa de otros elementos en el
documento. Puede modificarse su tamaño con la propiedad margin y otras relacionadas.
Modelo de cajas (Continuación...)
Márgenes (margin)
●Espacio en blanco existente alrededor de la caja. Separa la caja del resto de los elementos.
Los valores de márgenes pueden ser positivos o negativos (un margen negativo puede llevar
●
a la superposición de elementos HTML).
Podemos controlar su tamaño con la propiedad margin o bien definir cada margen de
●
manera individual:
margin-top margin-bottom margin-left margin-right
Modelo de cajas (Continuación...)
Ejemplo: modificamos el tamaño del margen superior e izquierdo del componente de
párrafo en relación a su componente padre (<div>).
Modelo de cajas (Continuación...)
Rellenos (padding)
●Espacio en blanco que rodea el contenido de la caja.
●Los valores de relleno deben ser positivos.
Podemos controlar su tamaño con la propiedad padding o bien definir cada relleno de
●
manera individual: padding-top, padding-bottom, padding-right, padding-left
padding
padding-top padding-right padding-bottom padding-left
Modelo de cajas (Continuación...)
Bordes (border)
●Envuelve el contenido de la caja (content) y el relleno (padding).
●El atributo border permite modificar el grosor, estilo y color del borde de la caja.
Border además sirve de atajo para las propiedades: border-width, border-style y border-
●
color, donde podemos definir estos valores en una sola línea.
Modelo de cajas (Continuación...)
Bordes (border)
Contamos con una gran variedad de formatos para modificar el estilo visual de un borde.
Utilizando el atributo border o border-style podemos emplear cualquier de las siguientes
opciones:
solid, dashed, dotted, hidden, none, double, groove, ridge, inset, outset
Modelo de cajas (Continuación...)
Bordes (border)
El atributo border-radius permite definir el radio (curvatura) de las esquinas del borde de la
caja. El valor de este atributo se aplica a cada una de las esquinas de la caja.
Modelo de cajas (Continuación...)
Bordes (border)
Por otro lado, si deseamos definir radios de curvas distintos a cada esquina podemos hacerlo
utilizando el atributo correspondiente a cada posición:
●border-top-left-radius
●border-top-right-radius
●border-bottom-left-radius
●border-bottom-right-radius
Introducción a las hojas de estilo
Selectores
Modelo de cajas
Propiedades de texto
Propiedades de texto
Las propiedades CSS que se usan para aplicar estilo al texto pueden clasificarse
generalmente en dos categorías:
●Estilos del tipo de letra: Propiedades que afectan al texto (qué tipo de letra se usa, su
tamaño, si es negrita, subrayado, etc).
●Estilos de disposición del texto: Propiedades que afectan al espaciado y otras
características a la disposición del texto, lo que permite la elección de espacio entre líneas y
letras, y el modo como el texto se alinea dentro de la caja contenedora.
Propiedades de texto (Continuación...)
color: establece el color del contenido de los elementos seleccionados. Admite cualquier
unidad de color CSS (hexadecimales RGB, RGB y RGBA, entre otros).
Propiedades de texto (Continuación...)
font-family: permite definir un tipo de letra diferente para el texto. Indica al navegador el tipo
de letra (o lista de tipos de letra) que se deben aplicar a los elementos seleccionados.
Propiedades de texto (Continuación...)
font-size: Permite definir el tamaño del tipo de letra. Pueden usarse diversas unidades de
medida. Sin embargo, en este caso veamos las más comunes:
●Unidades px (píxeles): El número de píxeles de altura que tendrá el texto. Esta unidad
representa un valor absoluto.
Unidades em: En este caso, 1em equivale al tamaño de letra que se haya establecido en el
●
elemento padre del elemento activo al que aplicamos estilo.
●Unidades rem: Similar a las unidades em, excepto que 1rem equivale al tamaño del tipo de
letra en el elemento raíz del documento (<html>) y no en el elemento padre.
Propiedades de texto (Continuación...)
Estilo, cuerpo, efectos y decoración de texto
●font-style: activa o desactiva el texto en cursiva. Sus posibles valores son:
✔normal: texto en tipo de letra normal (desactiva la cursiva)
✔italic: texto en versión cursiva del tipo de letra, si está disponible.
✔oblique: texto en versión cursiva simulada.
●font-weight: establece el grosor o peso del texto:
✔normal: grueso del tipo de letra normal.
✔bold: texto en negrita.
✔100-900: Valores numéricos de negrita que proporcionan un control más detallado.
Propiedades de texto (Continuación...)
Estilo, cuerpo, efectos y decoración de texto
●text-transform: permite aplicar transformaciones sobre el tipo de letra:
✔none: Impide cualquier transformación.
✔uppercase: transforma todo el texto a mayúsculas.
✔lowercase: transforma todo el texto a minúsculas.
✔capitalize: transforma la primera letra de cada palabra a mayúscula.
●text-decoration: Activa/descativa decoraciones en los tipos de letra
✔none: Desactivar cualquier decoración de texto presente.
✔underline: Texto subrayado.
✔overline: Proporciona al texto una línea superpuesta.
✔line-through: Permite tachar el texto.
Propiedades de texto (Continuación...)
Alineación del texto
La propiedad text-align permite controlar como se alinea el texto dentro de la caja
contenedora. Los valores posibles de esta propiedad son los siguientes:
●left: alinea el texto hacia la izquierda.
●right: alinea el texto hacia la derecha.
●center: centra el texto en relación a su contenedor.
●justify: texto justificado. Varía el espacio entre las palabras para que todas las líneas de texto
tengan el mismo ancho.
¿Consultas?