Semana 5

Selectores y modelo de cajas

 Semana 5
Selectores y modelo de cajas

APRENDIZAJE ESPERADO
El estudiante será capaz de:
• Emplear selectores en hojas estilo cascada (CCS) como parte del diseño de HTML,
con la finalidad de aplicarlos en la creación de páginas web, teniendo en cuenta
su entorno de desarrollo.

Reservados todos los derechos Instituto Superior de Artes y Ciencias de la Comunicación S.A. No se permite copiar, reproducir, reeditar, descargar, publicar,
emitir, difundir, de forma total o parcial la presente obra, ni su incorporación a un sistema informático, ni su transmisión en cualquier forma o por cualquier
medio (electrónico, mecánico, fotocopia, grabación u otros) sin autorización previa y por escrito de Instituto Superior de Artes y Ciencias de la Comunicación
S.A. La infracción de dichos derechos puede constituir un delito contra la propiedad intelectual.

IACC 2022 2
 Semana 5
Selectores y modelo de cajas

ÍNDICE
APRENDIZAJE ESPERADO ..................................................................................................................................................... 2
INTRODUCCIÓN ................................................................................................................................................................... 4
RESUMEN ............................................................................................................................................................................ 5
PALABRAS CLAVE ................................................................................................................................................................. 5
PREGUNTAS GATILLANTES ................................................................................................................................................... 5
1. SELECTORES Y MODELO DE CAJAS ............................................................................................................................................ 6
1.1. DEFINICIÓN ......................................................................................................................................................................... 6
1.2. AGRUPACIÓN DE REGLAS ................................................................................................................................................. 12
1.3. ATRIBUTOS DE ESTILO ...................................................................................................................................................... 13
1.4. ELEMENTO DE ESTILO....................................................................................................................................................... 14
2. HERENCIA ................................................................................................................................................................................ 17
3. TÉCNICAS PARA EVITAR COLISIONES DE ESTILOS CSS ............................................................................................................ 20
4. DIMENSIONES EN CSS ............................................................................................................................................................. 22
COMENTARIO FINAL .......................................................................................................................................................... 24
REFERENCIAS ..................................................................................................................................................................... 25

IACC 2022 3
 Semana 5
Selectores y modelo de cajas

INTRODUCCIÓN

En el presente contenido, se conocerá acerca del uso de selectores y el modelo de cajas en el diseño de
hojas de estilo en cascada (CSS) como parte del diseño HTML, lo que permitirá aprender sobre las
herramientas que actualmente utilizan los diseñadores de páginas web para proporcionar diseños
profesionales, altamente solicitados en el mercado.
CSS se ha convertido en un elemento necesario a la hora de establecer aspectos visuales destacados, y gran
parte de las organizaciones, cuentan con profesionales que se dedican a realizar dicha tarea, la que, a su
vez, es actualizada cada cierto tiempo con el propósito de renovar la presencia en la web.

IACC 2022 4
 Semana 5
Selectores y modelo de cajas

RESUMEN
Como es bien sabido, CSS es el lenguaje utilizado para definir el estilo y aspecto visual de una página web.
Para ello se emplean reglas en las que se asignan propiedades a uno o varios elementos HTML; en este
caso, los selectores son las estructuras utilizadas para asignar las propiedades a dichos elementos, es decir,
definen sobre quiénes se aplicará un conjunto de reglas CSS. Existen diferentes tipos de selectores, como
por ejemplo de etiqueta, de clase o de atributo. A continuación, se desarrolla esta temática, la cual les
permitirá conocer aquellos selectores necesarios para comenzar a programar con CSS y escribir tus
primeras reglas CSS.

PALABRAS CLAVE
• Selectores
• Modelo de cajas
• Reglas CSS
• Estilo
• Atributos

PREGUNTAS GATILLANTES

• ¿Qué es un selector?
• ¿Cómo se puede asignar un estilo a algún elemento HTML?
• ¿Qué tipos de selectores existen para aplicar los estilos CSS en una página web?

IACC 2022 5
 Semana 5
Selectores y modelo de cajas

1. SELECTORES Y MODELO DE CAJAS

Es importante conocer, de manera detallada, la parte de la regla de CSS llamada selector, para lograr el
objetivo de desarrollar diseños web profesionales. El selector es la parte de la regla que señala al elemento
que deberá aplicarse la regla, por lo que es imprescindible su uso correcto en la utilización de estilos en
una página.

A un mismo elemento HTML se le pueden aplicar varias reglas CSS, pudiendo cada una de ellas, a su vez,
ser aplicada a un número ilimitado de elementos. En otras palabras, una misma regla puede aplicarse sobre
varios selectores; y un mismo selector, se puede utilizar en varias reglas.

La especificación oficial de CSS contempla una docena de tipos diferentes de selectores, que permiten
seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una página
web, de los cuales se utilizan mayoritariamente cinco de ellos.

1.1. DEFINICIÓN

Los selectores de CSS son básicamente unos códigos que nos permiten indicar el elemento o elementos
sobre los que queremos aplicar determinados estilos a los que afectarán determinados atributos CSS
(Álvarez, 2021).

Recuerda qué:
CSS es un lenguaje de etiquetas que trabaja junto con HTML para configurar estilos visuales a los elementos
de un documento, como tamaño, color, fondo, bordes entre otros.

En CSS existen tanto selectores básicos como avanzados, siendo los primeros de uso más cotidiano en el
diseño de hojas de estilos, pero ambos permiten la aplicación de diversos estilos a una página web, por lo
que los revisaremos a continuación.

IACC 2022 6
 Semana 5
Selectores y modelo de cajas

SELECTORES BÁSICOS
Existen un conjunto de selectores básicos y de uso frecuente que contemplan las hojas de estilos, y que
permiten aplicar estilos para el diseño de páginas profesionales, los que se presentan a continuación
indican su nombre, descripción, un ejemplo de uso y el resultado de dicho ejemplo:

Resultado del
Selector Descripción Ejemplo
ejemplo
*{
Universal (se Se utiliza para seleccionar Elimina el margen
representa con todos los elementos de la margin: 0; y el relleno de
un asterisco) página. No se usa padding: 0; todos los
habitualmente, ya que es } elementos HTML.
difícil que un mismo estilo se
pueda aplicar a todos los
elementos de una página.

De tipo o Selecciona todos los h1 {color: red; font-family: Aplica diferentes

etiqueta elementos de la página, cuya Arial; font-size: large;} estilos a los
etiqueta HTML coincide con el h2 {color: green; font-family: titulares y a los
valor del selector. Basta con calibri; font-size: normal;} párrafos de una
indicar el nombre de una p { color: blue; font-family: página HTML.
etiqueta HTML (sin los helvetica; font-size: medium; }
caracteres < y >).
<p>
Descendente Selecciona los elementos que <span>este es la primera parte del
El selector p span
se encuentran dentro de otros texto a mostrar</span> selecciona ambas
elementos, aumentando la etiquetas <span>.
precisión del selector de tipo o <a href=""><span>este texto es El motivo es que,
etiqueta. Un elemento es mostrado usando el selector en el selector
descendiente de descendente dado que se descendente, un
encuentra dentro del selector p elemento no tiene
</span></a> que ser
</p> descendiente
directo del otro.
La única condición
es que un
elemento
.importante { color: blue;font-
De clase (se Utiliza el atributo class de family: Arial; font-size: large; } El selector de
representa con HTML sobre el elemento para <body> clase aplica de
un.) indicar directamente la regla manera específica
CSS que se le debe aplicar. Se la regla

IACC 2022 7
 Semana 5
Selectores y modelo de cajas

utiliza un punto (.) como <p importante al

prefijo del nombre de la regla. class="importante">Mensaje primer párrafo
por medio del
de suma importancia</p>
atributo clase.
<p>El cual es mostrado mediante
el uso del selector de clase</p>
<p>que aplica de manera
específica la regla importante al
primer párrafo</p>
</body>
#relevante { color: red; }
Selector de ID Permite seleccionar un El selector
(se representa elemento de la página a través <p>Primer párrafo</p> #relevante
con un #) del valor de su atributo id. <p id="relevante">Segundo solamente
Se utiliza el símbolo de gato (#) párrafo</p> selecciona el
como prefijo del nombre de la <p>Tercer párrafo</p> segundo párrafo
regla CSS. (cuyo atributo id
es igual a
relevante).
Tabla 1. Selectores básicos usados en CSS
Fuente: IACC (2020)

Además del uso de los selectores que se vieron en la tabla anterior, también se pueden agrupar todas las
reglas individuales en una sola regla con un selector múltiple, para lo que tan sólo es necesario incluir todos
los selectores separados por una coma. Adicionalmente, en las hojas de estilo complejas es habitual
agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las
propiedades específicas de esos mismos elementos. Veamos un ejemplo selector múltiple:

Código
h1,
h2, h3 {
font-weight: large;
color: #9f8f30;
font-family: Arial, Calibri, verdana;
}
h1 {font-size: 3em;}
h2 {font-size: 2em;}
h3 {font-size: 1em;}

IACC 2022 8
 Semana 5
Selectores y modelo de cajas

En dicho código, se establecen inicialmente las propiedades comunes de los títulos de sección (tipo de letra
y color), y luego de forma individual, el tamaño de letra para cada uno de ellos. Observemos este otro
ejemplo, en el que se utilizan selectores de clase.

Código

.mensaje {
background: #e2dafe;
font-weight: normal;

border: 1px solid #a890fc;

}
. error {
color: #990066;
padding: 0.8em;
font-weight: bold;
}
<div class="mensaje">...</div>
<span class="error">...</span>

El elemento <div> tiene un atributo class="mensaje", con su respectivo estilo definido en la regla del
selector. mensaje, y de la misma manera, el elemento <span> tiene un atributo class="error", al que le son
aplicados las reglas CSS indicadas por el selector. error.

Importante
La recomendación general es usar el selector de ID cuando se requiere la aplicación de un estilo a un único
elemento específico de la página; y para el caso que se requiera aplicar el estilo a diversos elementos de la
página HTML, entonces usar el selector de clase.

Finalmente, es importante que veamos que CSS permite la combinación de uno o más tipos de selectores
de manera de restringir el alcance de las reglas CSS. A continuación, se presentan ejemplos de ello:

IACC 2022 9
 Semana 5
Selectores y modelo de cajas

. mensaje. relevante {...}

En este caso, el selector solamente incide en aquellos elementos con class="relevante" que se encuentren
dentro de cualquier elemento con class="mensaje".
Veamos otro caso:
[Link] span. relevante { ... }
Ahora, el selector solamente incide en aquellos elementos de tipo <span> con atributo class="relevante"
que se encuentren dentro de cualquier elemento de tipo <div> con atributo class="mensaje".

Reflexión:
¿A qué crees que se deba que los denominados selectores básicos sean los de uso más cotidiano en el
diseño de hojas de estilos?

SELECTORES AVANZADOS

Si bien es cierto que con los selectores básicos es posible diseñar prácticamente cualquier página web,
existen a otros selectores más avanzados que permiten simplificar las hojas de estilos y que se presentan
en la siguiente tabla:

Resultado del
Selector Descripción Ejemplo
ejemplo

Selector de hijos Es similar al selector p > span {color: blue;} el selector p > span
(se representa descendente, pero funciona se interpreta como
<p><span>este es la
con el signo de diferente. Se utiliza para "cualquier elemento
primera parte del texto a
mayor >) seleccionar un elemento que <span> que sea hijo
mostrar </span></p>
es hijo directo de otro directo de un
elemento. <p><a elemento <p>", por
href="#"><span>este lo que el primer
texto es mostrado usando elemento <span>
el selector de hijos en el cumple la condición,
pero el segundo

IACC 2022 10
Semana 5
Selectores y modelo de cajas

que no es elemento <span>

afectado</span></a></p> no, dado que no es
hijo directo de un
elemento <p>.

Selector Se emplea para seleccionar <body> El selector hace que

adyacente (usa el elementos que en el código <h1>Titulo de la todos los <h2> de la
signo + para HTML de la página se página se vean de
página</h1>
separar encuentran justo a color rojo, salvo
elementos) continuación de otros h2 {color: red;} aquellos <h2> que
elementos. Los elementos h1 + h2 { color: blue } se encuentran
deben cumplir las siguientes inmediatamente
condiciones: después de
cualquier elemento
elemento1 y elemento2 deben
<h1> y que se
ser elementos hermanos, por
muestran de color
lo que su elemento padre debe
azul.
ser el mismo.
elemento2 debe aparecer
inmediatamente después de
elemento1 en el código HTML.

Selecciona elementos HTML en a[class] {color: red;} Muestra en rojo los

función de sus atributos y/o a[class="alumno"] { color: enlaces con atributo
valores de esos atributos. yellow; } "class".
Existen cuatro tipos: Muestra en amarillo
[nombre atributo], selecciona todos los enlaces
los elementos que tienen el con atributo "class"
atributo nombre_atributo. y con el valor
"alumno".
[nombre_atributo=valor],
Selector de selecciona los elementos que
atributos tienen un atributo
nombre_atributo cuyo
contenido sea igual a valor.
[nombre_atributo~=valor],
selecciona los elementos que
tienen un atributo
nombre_atributo y al menos
uno de los valores del atributo
es valor.
[nombre_atributo|=valor],
selecciona los elementos que

IACC 2022 11
 Semana 5
Selectores y modelo de cajas

tienen un atributo
nombre_atributo y cuyo valor
es una serie de palabras
separadas con guiones, pero
que comienza con valor.

Tabla 2. Selectores avanzados usados en CSS

Fuente: IACC (2020)

Observa a continuación el siguiente ejemplo que permite seleccionar todos los elementos de la página,
cuyo atributo “lang” comience con “es”:

*[lang|="es"] { color : red }

Enlace de interés:
Para realizar la comprobación de selectores soportados por el navegador que utilizas puedes acceder al
siguiente enlace, en que encontrará un test en línea:

[Link]

1.2. AGRUPACIÓN DE REGLAS

Al momento de crear archivos CSS, que resultan de cierta complejidad ya que contemplan muchas reglas,
es común que los estilos que se aplican al mismo selector se definan en diferentes reglas. Veamos un
ejemplo:

h1 {font-family: Calibri;}
…
h1 {color: blue;}
...
h1 {font-size: 3em;}

IACC 2022 12
 Semana 5
Selectores y modelo de cajas

En este caso, las tres reglas establecen el valor de tres propiedades diferentes de los elementos <h1>. Para
estos casos, cuando el selector de dos o más reglas CSS es el mismo, se pueden agrupar las declaraciones
de las reglas para hacer las hojas de estilos más organizadas y eficientes:

h1 {
font-family: Calibri;
color: blue;
font-size: 3em;
}

Este código tiene el mismo efecto que las tres reglas anteriores, pero es más eficiente, más fácil de
modificar y mantener por parte de los diseñadores. Aún más, este código se puede simplificar, dado que
CSS ignora tanto espacios en blanco como nuevas líneas, por lo que se podría escribir así:

h1 {font-family: Calibri; color: blue; font-size: 3em;}

Finalmente, se podría reducir al máximo el tamaño del archivo CSS para optimizar el tiempo de carga de la
página web, lo cual se logra indicando la regla anterior de la siguiente manera (sin espacios en blanco entre
el atributo y el valor):

h1 {font-family: Calibri; color: blue; font-size:3em;}

1.3. ATRIBUTOS DE ESTILO

Una característica muy interesante de CSS es la posibilidad de aplicar estilos en función de la existencia o
el contenido de algunos atributos de los elementos HTML. En CSS, tales atributos se escriben entre
corchetes [] y se utilizan a través de expresiones regulares, por ejemplo:

Atributo ¿Cuándo se aplica el estilo?

[href] Si el elemento tiene atributo href.

[href="#"] Si el elemento tiene atributo href y su valor es #.

[href*="manzdev"] Si el elemento tiene atributo href y su valor contiene manzdev.

IACC 2022 13
 Semana 5
Selectores y modelo de cajas

[href^="[Link] Si el elemento tiene atributo href y su valor comienza por [Link]

Si el elemento tiene atributo href y su valor termina por .pdf (un enlace a
[href$=".pdf"]
un PDF).
Si el elemento tiene atributo class con una lista de valores y uno de ellos
[class~="manzdev"]
es manzdev.
Si el elemento tiene atributo lang con una lista de valores, donde alguno
[lang|="es"]
empieza por es-.

Tabla 3. Uso de atributos de elementos HTML en CSS

Fuente: [Link] ([Link]

Para ilustrar lo antes comentado, podemos asignar un valor al atributo y así determinar exactamente cuáles
elementos HTML serán seleccionados para aplicar el estilo definido. Por ejemplo, si queremos seleccionar

todos los enlaces <a> que poseen un atributo <rel> como “nofollow”, para que aparezcan de color rojo, se
escribe de la siguiente manera:

Figura 1. Uso de atributo con valor exacto

Fuente: [Link] ([Link]

1.4. ELEMENTO DE ESTILO

En este apartado hablaremos acerca de las pseudoclases y pseudoelementos. En primera instancia, una
pseudoclase permite asociar estilos a un selector cuando sucede en el mismo algún evento o circunstancia.
Originalmente, se aplicaban a los enlaces (elemento a), pero su uso se ha extendido a cualquier otro
elemento. Las pseudoclases clásicas son:

• : link. Se aplica para los enlaces no visitados

• : visited. Enlaces visitados
• : active. Enlaces activos (aquellos sobre los que hacemos clic)
• : hover. Se aplica cuando el ratón pasa por encima del elemento (sea un enlace o no)

IACC 2022 14
 Semana 5
Selectores y modelo de cajas

En el siguiente código, podemos observar un ejemplo de pseudoclases:

Código

<style>
a{
text-decoration: none;
}
a: visited {
color: gray;
}
a: hover {
text-decoration: underline;
}
</style>

En el ejemplo los enlaces a los que se aplique esta hoja de estilo saldrán sin subrayar, si están visitados
saldrán de color gris y si se pasa el ratón sobre ellos se mostrarán subrayados.

CSS3 ha incorporado muchas más pseudoclases, algunas de ellas son:

pseudoclase Descripción
Cuando el elemento obtiene el foco (útil en formularios)
:focus
Cuando el elemento esté marcado con el lenguaje indicado por su código de idioma.
:lang(código)
Cuando el elemento está habilitado (útil en formularios)
:enabled
Cuando el elemento está deshabilitado (útil en formularios)
:disabled
En controles de formulario de tipo radio o checkbox, cuando el elemento se activa.
:checked
En controles de formulario (de tipo input) cuando el valor está dentro de rango.
:in-range
Aplica el contenido CSS a controles cuyos valores están fuera de rango.
:out-of-range

IACC 2022 15
 Semana 5
Selectores y modelo de cajas

Se aplica cuando el elemento al que se refiere ha sido destino de un enlace.

:target
Controles de formulario que contienen valores válidos.
:valid
Inverso al anterior. Es decir, selecciona controles cuyos valores no sean válidos.
:invalid
Controles de formulario que están en modo de solo lectura.
:read-only
Inverso al anterior. Controles que se puedan leer y escribir.
:read-write
Controles de formulario que están marcados como de carga obligatoria.
:required
Contrario al anterior. Controles que no están obligados a ser rellenados.
:optional
Selecciona elementos de un formulario que son las opciones marcadas por defecto.
:default
La primera línea del elemento.
:first-line
La primera letra del elemento.
:first-letter
Contenido anterior al elemento.
:before
Para indicar contenido después del elemento.
:after
Se aplica cuando el elemento no es del tipo indicado por el selector.
:not(selector)

Tabla 4. Otras pseudoclases de CSS3

Fuente: [Link]

Por su parte, los pseudoelementos permiten aplicar estilos a elementos. Utilizan los símbolos:: en lugar de
simplemente: como ocurre con las pseudoclases.

pseudoelemento Significado
Primera línea del elemento
::first-line
Primera letra del elemento
::first-letter
Se aplica para colocar código tras el elemento
::after
Se aplica para colocar código antes del elemento
::before

IACC 2022 16
 Semana 5
Selectores y modelo de cajas

Se aplica al texto seleccionado del elemento.

::selection
Tabla 5. Pseudoelementos de CSS3
Fuente: [Link]
De esta manera, por ejemplo:

Código

div:first-line { color: red; }

p:first-letter { text-transform: uppercase; }

<div>
<p>lorem ipsum dolor sit amet...</p>
<p>lorem ipsum dolor sit amet...</p>
<p>lorem ipsum dolor sit amet...</p>
</div>

En el ejemplo anterior, la primera línea del elemento <div> corresponde al primer párrafo, por lo que su
texto será de color rojo. Al mismo tiempo, la primera letra del texto de cada párrafo será mayúscula (es
decir, Lorem).

2. HERENCIA
Una de las características principales de CSS es la herencia de los estilos definidos para los elementos
(Eguiluz, 2017). El concepto de herencia se presenta cuando se establece el valor de una propiedad CSS en
un elemento, y los elementos descendientes heredan dicho valor de manera automática. Veamos lo
anterior con un ejemplo:

Código

<html xmlns="[Link]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia en hojas de estilos CSS</title>
<style type="text/css">

IACC 2022 17
 Semana 5
Selectores y modelo de cajas

body { color: green; }

</style>
</head>
<body>
<h1>Titulo principal </h1>
<p>En este ejemplo comprobamos cómo funciona el concepto de herencia en CSS por medio de la propiedad color
del selector body, el cual es heredado por todos los elementos dentro de body</p>
</body>
</html>

En el código anterior, el selector body establece el color de la letra para el elemento <body>. Sin embargo,
la propiedad color es heredada de forma automática, por lo que todos los elementos descendientes de
<body> son los que muestran ese color, tal como lo vemos en la imagen:

Figura 2. Visualización del código ejemplo de herencia de selectores

Fuente: IACC (2020)

Si bien es cierto que la herencia de estilos se aplica de manera automática, se puede anular su efecto
estableciendo, de forma explícita, otro valor para la propiedad que se hereda. Lo anterior lo vemos
modificando el ejemplo visto, en el que agregaremos otro color para el elemento <p>:

<html xmlns="[Link]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia en hojas de estilos CSS</title>
<style type="text/css"> body { color: green; }
p { color: blue; }
</style>
</head>
<body>
<h1>Titulo principal </h1>
<p>

IACC 2022 18
 Semana 5
Selectores y modelo de cajas

En este ejemplo comprobamos cómo funciona el concepto de herencia en CSS por medio de la propiedad color del
selector body, el cual es heredado por todos los elementos dentro de body pero modificado por otras reglas
específicas
</p>
</body>
</html>

Ejemplo de alteración de herencia en selectores CSS

Fuente: IACC (2020)

Figura 3. Visualización del código ejemplo de alteración de herencia de selectores CSS

Fuente: IACC (2020)

En el código anterior, se establece en primer lugar el color del elemento <body>, por lo que todos los
elementos de la página se mostrarían con ese mismo color. No obstante, la regla para el selector p modifica
dicho estilo heredado, presentando su contenido en otro color, tal como lo evidenciamos en la siguiente
imagen:

De esta forma, los elementos <h1> de la página se muestran de color verde heredado del elemento <body>;
y los elementos <p> de la página, se muestran del color azul establecido por el selector p.

Importante
La herencia automática simplifica en gran medida la creación de hojas de estilos complejas. Si se quiere
establecer, por ejemplo, la tipografía base de la página, bastará con establecerla en el elemento <body>
de la página, siendo heredada por el resto de los elementos de forma automática.

IACC 2022 19
 Semana 5
Selectores y modelo de cajas

3. TÉCNICAS PARA EVITAR COLISIONES DE ESTILOS CSS

Cuando se elaboran hojas de estilos complejas es común que varias reglas CSS se apliquen a un mismo
elemento HTML, lo que podría traer como consecuencia una colisión entre reglas. Veamos el siguiente
ejemplo sencillo para comprender mejor esta situación:

Código
p {color: blue; } p { color: green; }
<p>Este párrafo que se muestra aquí, ¿con qué color se verá en el navegador? </p>

Al ver dicho código nos damos cuenta de que se están estableciendo dos valores diferentes para el selector
p en cada regla, lo que nos lleva a preguntarnos cuál de ellos será considerado para mostrar en el navegador
el contenido. Para ello, CSS cuenta con un mecanismo de resolución de colisiones que considera,
primeramente, el tipo de hoja de estilo que se trate (de navegador, de usuario o de diseñador), la relevancia
de cada regla y lo específico que sea el selector.

Según Eguiluz (2017), el método seguido por CSS para resolver las colisiones de estilos sigue los siguientes
pasos:

• Determinar todas las declaraciones que se aplican al elemento para el

1 medio CSS seleccionado.

• Ordenar las declaraciones según su origen (CSS de navegador, de usuario o

2 de diseñador) y su prioridad.

• Ordenar las declaraciones según lo específico que sea el selector. Cuanto

3 más genérico es un selector, menos importancia tienen sus declaraciones.

• Si después de aplicar las normas anteriores existen dos o más reglas con la
4 misma prioridad, se aplica la última.

Figura 4. Método para resolver colisiones de estilos

Fuente: IACC (2020)

IACC 2022 20
 Semana 5
Selectores y modelo de cajas

Entonces, dado a que en el ejemplo anterior los dos selectores son idénticos y prevalece la que se indicó
en último lugar, el párrafo se muestra de color verde.

Veamos a continuación este otro ejemplo, en el que se analizará que la regla CSS que prevalece se decide
por lo específico que es cada selector:

Código
<html xmlns="[Link]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia en hojas de estilos CSS</title>
<style type="text/css"> p { color: blue; }
p#particular { color: red; }
* { color: green; }
</style>
</head>
<body>
<p id="particular">Este párrafo demuestra que se aplica el selector más específico de todos</p>
</body>
</html>

Al elemento <p> corresponde aplicar las tres declaraciones anteriores. Sin embargo, dado a que su origen
e importancia es el mismo, decide la especificidad del selector. El selector * es el menos específico, ya que
cubre todos los elementos de la página. El selector p es poco específico porque se refiere a todos los
párrafos de la página. Finalmente, el selector p#particular solo hace referencia al párrafo de la página cuyo
atributo id sea igual a particular. Como el selector p#particular es el más específico, es el que se aplica para
mostrar el párrafo (color rojo), tal como se evidencia en la siguiente imagen:

IACC 2022 21
 Semana 5
Selectores y modelo de cajas

Figura 5. Visualización de ejemplo de manejo de colisiones en selectores CSS

Fuente: IACC (2020)

Reflexión
¿Cómo definirías la noción de colisión entre reglas?

4. DIMENSIONES EN CSS

Existen dos propiedades para controlar, tanto el ancho como el alto de las cajas o elementos HTML, y se
detallan a continuación:

Propiedad Valores Ejemplo

width: establece el Unidad de medida: especificada en Establecer el valor de la anchura del

ancho de la caja, no pixeles. elemento <div> lados:
admite valores porcentaje: calculado a partir del
negativos. ancho del elemento padre. #lados { width: 400px; }
auto: el valor por defecto.
<div id="lados">
inherit: indica que la anchura es heredada
...
del padre.
</div>

height: establece la Unidad de medida: especificada en Establecer el valor de la altura del

altura de la caja, no pixeles. elemento <div> titulares:

IACC 2022 22
 Semana 5
Selectores y modelo de cajas

admite valores porcentaje: calculado a partir de la #titulares { height: 80px; }

negativos. altura del elemento padre. <div id="titulares">
auto: el valor por defecto.
...
inherit: indica que la altura es heredada del
</div>
padre.
Tabla 6. Dimensiones en CSS
Fuente: IACC (2020)

Reflexión
¿Cómo explicarías la importancia de los selectores CSS para configurar la apariencia de un documento
HTML?

IACC 2022 23
 Semana 5
Selectores y modelo de cajas

COMENTARIO FINAL
En esta unidad ha sido abordado el tema del uso de los selectores, tanto básicos como avanzados, junto al
modelo de cajas en las hojas de estilos en cascada. De igual manera, se detalló la estrategia para agrupación
de reglas CSS; el aspecto denominado herencia, que permite a los elementos contenidos en otro, heredar
sus propiedades, así como la técnica para evitar colisiones entre diversas reglas CSS.

Es importante mencionar, que el dominio de estos elementos permitirá efectuar las actividades
relacionadas a la aplicación de diseños profesionales a las páginas web, con criterios de buenas prácticas
en diseño, aspecto que es requerido para desempeñarse en el ámbito laboral.

IACC 2022 24
 Semana 5
Selectores y modelo de cajas

REFERENCIAS
Álvarez, M. (2021). Selectores de CSS. [Link].
[Link]

Eguiluz, J. (2017). Introducción a CSS. [Link]

IACC (2020). Hojas de estilo en cascada (CSS) II. Programación Web I. Semana 5.

[Link] (s.f.). Lenguaje CSS. [Link]

Sánchez, J. (s.f.). Manual de TML5 y CSS3. [Link]

PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:

IACC (2022). Selectores y modelos de cajas. Programación Web I. Semana 5.

IACC 2022 25