CONSTRUCCIÓN DE PÁGINAS WEB

© Santiago Martín de Jesús

CREACIÓN DE PÁGINAS WEB CON EL
LENGUAJE DE MARCAS

Selectores
 Selectores

Los selectores son la parte de la regla o instrucción

CSS que indica a qué elemento o elementos de la
página se deben aplicar los cambios de estilo. Se
llama "selector" porque "selecciona" una parte del
código HTML.

Aquí nos ocuparemos de los tipos de selectores, y de

cómo pueden combinarse entre ellos.

3
 Selector universal

Se utiliza para seleccionar todos los elementos de la

página. y se indica mediante un asterisco(*).
Ejemplo:

* { margin: 0; padding: 0; }

Suele utilizarse para dar un estilo inicial a la página, o estilo "reset" que
luego puede ser cambiado en otras etiquetas por la utilización de otros
selectores. Dar un estilo inicial a la página suele hacerse para uniformar el
estilo en todos los navegadores, ya que no todos los navegadores aplican
los mismos estilos por defecto; es lo que se llama "resetear" la página.

4
 Selector de etiqueta

Su valor es el mismo que el de la etiqueta que selecciona.

Selecciona el código que corresponde a la etiqueta
indicada. Veamos unos ejemplos:

h1 { font-size: 2em; color: blue; }

h2 { font-size: 1.5em; color: olive; }
p { font-size: 1.1em; color: navy; }

En estos ejemplos se aplica diferente estilo al texto dependiendo de si éste

es un título principal, titulo secundario, o párrafo.

5
 Selector de clase
Si queremos aplicar distintos estilos a cada uno de los
párrafos, debemos usar otro método que no sea el
selector de etiqueta, ya que éste daría el mismo estilo
para todos.
La solución está en añadir un atributo de clase;
class="nombre_de_clase" a la etiqueta HTML, y luego,
hacer referencia a esa clase mediante un selector de
clase. Ejemplo:
Código HTML:
<p class="textoazul">este texto está en azul</p>
Codigo CSS:
.textoazul { color: blue }
6
 Selector de clase

Podemos dar a la clase el nombre que queramos,

siempre que sigamos unas normas mínimas, como no
poner espacios en blanco, no empezar por un
número, ni escribir caracteres raros.
El selector CSS de clase es siempre el nombre que le
hemos dado a la clase (valor de la etiqueta class)
precedido de un punto ( . ); el punto indica que éste
es un selector de clase.

7
 Selector de ID

El selector de id funciona de manera parecida al

selector de clase, su forma es la siguiente:
En la etiqueta HTML que debe ser afectada
incluiremos el atributo id="nombre_de_id" y en el
código CSS haremos referencia a esta etiqueta
mediante el simbolo # (almoadilla) seguido del
"nombre_de_id". Ejemplo:
código HTML:
<p id="etiquetaid">Párrafo de etiqueta id</p>
código CSS:
#etiquetaid { text-align: center }
8
 Selector de ID
La diferencia con el selector class es que el selector id
es único, es decir, no puede haber dos etiquetas con
el atributo id en la misma página con idéntico valor,
en tal caso el estilo sólo se aplicaría a la primera,
ignorando las demás.
Por esto el atributo id es único, y su función más
habitual es emplearlo con la etiqueta <div> para
delimitar los espacios de la página, tales como la
cabecera, el cuerpo, los menús de enlaces, los pies de
página y otras secciones, las cuales sólo aparecen
una vez en cada página.
9
 Agrupación de Selectores

Los selectores pueden agruparse para formar nuevos

tipos de selectores. De esta manera podemos
seleccionar varios tipos de etiquetas al mismo tiempo
o hacer una selección más específica de algunas
etiquetas.

10
 Agrupación de Selectores

Combinación de selectores
Cuando se quiere aplicar los mismos estilos a varias
etiquetas distintas, no es necesario escribir una regla
para cada etiqueta, sino que podemos combinar los
selectores para que la misma declaración pueda
aplicarse a varios selectores al mismo tiempo, para
ello basta con escribir los selectores separados por
comas:
h1, h2, h3 { text-align: center; color: navy; }
En este ejemplo estamos aplicando el estilo tanto a las etiquetas h1, como
a las etiquetas h2, como a las etiquetas h3, con lo cual en una sola regla
estamos aplicando el estilo a tres tipos de etiquetas diferentes.
11
 Agrupación de Selectores

Podemos combinar todo tipo de selectores, siempre

que vayan separados por comas.
Ejemplo:

#seccion1, .tipo1, h4 { font-style: italic; }

En este ejemplo se mostrarán en cursiva todas las etiquetas que tengan el

atributo id="seccion1"; todas las etiquetas con el atributo class="tipo1" y
todas las etiquetas h4.

12
 Selector descendente
Un elemento es descendiente de otro cuando se
encuentra entre las etiquetas de apertura y de cierre
de dicho elemento. El selector descendente
selecciona los elementos descendentes que se
encuentran dentro de otras etiquetas.
Ejemplo:
p strong{ text-decoration: underline; }

En este ejemplo se seleccionan todas las etiquetas strong que estén

contenidas dentro de las etiquetas p, pero no afectará a las etiquetas
strong que no estén contenidas en una etiqueta p.

13
 Selector descendente

En el selector descendente se escriben todos los

elementos seguidos, separados únicamente por
espacios. El elemento afectado solamente es el
último, y los demás indican dentro de qué etiquetas
están los elementos afectados. Podemos combinar
más de dos selectores para formar un selector
descendente, pero el elemento afectado sólo será el
último. Ejemplo:
#sección1 .tipo2 p span { color: red; }
En este ejemplo sólo se verán afectados los elementos con la etiqueta
span, que estén contenidos en una etiqueta p, y a su vez estén contenidos
en la etiqueta con la clase tipo2 y a su vez dentro de la etiqueta con ld
sección1.
14
 Selector descendente

Una característica es que no hace falta ser

descendiente directo para que el elemento esté
seleccionado, así por ejemplo el selector
p span { font-family: verdana; }
afectará por igual a las etiquetas span de las dos
líneas siguientes:
<p>texto en<span>letra verdana</span></p>
<p><em>texto en<span>letra verdana</span></em></p>
El selector descendente es uno de los más usados, ya que permiten
mejorar la precisión de los otros selectores. Así, utilizando el selector
descendente es posible aplicar diferentes estilos a elementos del mismo
tipo.

15
 Selector de etiqueta de clase

Este selector es un selector de etiqueta, que además

restringe su aplicación a la condición de llevar el
atributo de clase o de id que se le indica.
Ejemplo:
p.tipo1 { border: 1px solid blue; }
El selector selecciona únicamente a las etiquetas p que lleven el atributo
class="tipo1": <p class="tipo1">...<p>
Obsérvese que no es lo mismo el selector p.tipo1 que el selector p .tipo1
(con un espacio entre medio), ya que el segundo es un selector
descendente, que indicaría que se seleccionan las etiquetas incluidas
dentro de <p>, que lleven el atributo class="tipo1"; pero no a la propia
etiqueta <p>, aunque lleve el atributo.

16
 Selector de etiqueta de clase

De idéntica manera este selector se puede aplicar

con el atributo id.
Ejemplo:

p#sección1 { font-family: arial; }

En este caso el selector afectaría a la etiqueta <p id="sección1"> ...</p>

17
 <h1>Cantares</h1> <p>yo amo los mundos sutiles,</p>
<h2> De Antonio Machado</h2> <p>ingrávidos y gentiles,</p>
<p>Todo pasa y todo queda,</p> <p>como pompas de jabón.</p>
<p>pero lo nuestro es pasar,</p> <p>Me gusta verlos pintarse</p>
<p>pasar haciendo caminos,</p> <p>de sol y grana, volar</p>
<p>caminos sobre la mar.</p> <p>bajo el cielo azul,
<p>Nunca perseguí la gloria,</p> temblar</p>
<p>ni dejar en la memoria</p> <p>súbitamente y quebrarse...</p>
<p>de los hombres mi canción;</p>

18 Descargar HTML
 <html>
<head>
<title>Cantares de Machado</title>
<link rel="stylesheet" type="text/css" href="ejemplo11.css"
/>
</head>
<body>
<h1>Cantares</h1>
<h2> De Antonio Machado</h2>
<div class="seccion1">
<p class="p1">Todo pasa y todo queda,</p>
<p class="p2">pero lo nuestro es pasar,</p>
<p class="p3">pasar haciendo caminos,</p>
<p class="p4">caminos sobre la mar.</p>
</div>
<div class="seccion2">
<p class="p1">Nunca perseguí la gloria,</p>
<p class="p2">ni dejar en la memoria</p>
<p class="p3">de los hombres mi canción;</p>
<p class="p4">yo amo los mundos sutiles,</p>
<p class="p5">ingrávidos y gentiles,</p>
<p class="p6">como pompas de jabón.</p>
</div>
<div class="seccion3">
<p class="p1">Me gusta verlos pintarse</p>
<p class="p2">de sol y grana, volar</p>
<p class="p3">bajo el cielo azul, temblar</p>
<p class="p4">súbitamente y quebrarse...</p>
</div>
</body>

19 </html>
 body { margin: 2em 5em; border: 8px double #996666; padding: 2em; }
h1 { font-size: 2em; font-family: impact; text-align: center; padding: 0.5em;
border: 3px dotted #72bbf1; margin: 0 30%; }
h2 { font-size: 1.5em; font-family: cursive; text-align: center; padding: 0.2em;
border: 2px #e159ec; border-style: dashed none; margin: 1em 5em; }
p { margin: 0.5 0; font-style: italic }
.seccion1 { font-size: 1.2em; font-family: "times new roman";
margin: 0.5em 22em 1.5em 2em ; padding: 0.5em; border: 1px solid orange;
color: #0000cc; }
.seccion1 .p1 { padding-left: 1em }
.seccion1 .p2 { padding-left: 2em }
.seccion1 .p3 { padding-left: 3em }
.seccion1 .p4 { padding-left: 4em }

.seccion2 { font-size: 1.1em; font-family: "arial";

margin: 1.5em 15em 0.5em 10em ; padding: 0.5em; border: 1px solid orange }
.seccion2 .p1 { padding-left: 1em; color:#0000cc; }
.seccion2 .p2 { padding-left: 1.5em; color:#3300cc; }
.seccion2 .p3 { padding-left: 2em; color:#6600cc; }
.seccion2 .p4 { padding-left: 2.5em; color:#9900cc; }
.seccion2 .p5 { padding-left: 3em; color:#cc00cc; }
.seccion2 .p6 { padding-left: 3.5em; color:#ff00cc; }

.seccion3 { font-size: 1.1em; font-family: "verdana";

margin: 1.5em 5em 1.5em 20em ; padding: 0.5em; border: 1px solid orange;
color: #ff00cc; }
.seccion3 .p1 { padding-left: 4em }
.seccion3 .p2 { padding-left: 3em }
.seccion3 .p3 { padding-left: 2em }
.seccion3 .p4 { padding-left: 1em }

20
 Selectores de atributos

Los selectores de atributos, permiten seleccionar

elementos HTML en función de sus atributos y/o
valores de esos atributos. Veremos tres tipos de
selectores de atributos. Estos selectores se escriben
entre corchetes (signos [...] ).
1. [nombre_atributo], selecciona los elementos que
tienen el atributo llamado nombre_atributo,
independientemente de su valor. Ejemplo:
[class] { color: blue }
Selecciona a todos los elementos que tengan el atributo class sea
cual sea su valor.

21
 Selectores de atributos

2. [nombre_atributo=valor], selecciona los elementos

que tienen un atributo llamado nombre_atributo con un
valor igual a valor.
Ejemplo:

[align=left] { color: blue }

Selecciona a todos los elementos que tienen el atributo align

con un valor left.

22
 Selectores de atributos

3. [nombre_atributo~=valor], selecciona los elementos

que tienen un atributo llamado nombre_atributo y al
menos uno de los valores del atributo es valor.
Ejemplo:

[face~=arial] { color: blue }

Selecciona a los elementos que tengan el atributo face en el

que uno de sus valores sea arial.

23
 Pseudoclases

Las pseudoclases son unos elementos

especiales que permiten aplicar estilos a
ciertas partes de un texto. En concreto, en CSS
se permite definir estilos especiales a la
primera frase de un texto, a la primera letra
de un texto y a los enlaces. Las pseudoclases
relacionadas con los enlaces las veremos en el
tema de enlaces. Ahora vamos a ver las otras
dos pseudoclases.

24
 Pseudoclase de primera línea

Permite dar un estilo diferente a la primera línea de

un texto. Para aplicarlo, después del selector, y sin
espacios entre medio escribimos :first-line.
Ejemplo:

p:first-line { font-weight: bold; }

En este ejemplo todos los párrafos tendrán la primera línea en negrita

25
26
 Pseudoclase de primera letra

Al igual que en la pseudoclase anterior, se permite

aplicar un estilo diferente a la primera letra del texto.
en este caso escribiremos el código :first-letter
después del selector.
Ejemplo:
p:first-letter { font-weight: bold; font-size:
2em; }

Mediante la pseudoclase :first-letter podemos crear una letra capital,

simplemente aplicando la regla que hemos dado de ejemplo: la veríamos
así:

Texto con letra capital

27
 Pseudoclase de primera letra

Si queremos que la letra capital esté al mismo nivel del texto ocupando las
dos o tres primeras líneas, usaremos además alguna otra propiedad. La
propiedad line-height: 0.9 hace que la la parte superior de la letra se
coloque a la misma altura que la primera línea; para otros tamaños de
letra, debemos probar cual es el valor de esta propiedad que más se ajusta
al espacio que ocupa; y la propiedad float: left, aquí permite que el texto
de la segunda línea no quede por debajo de la letra capital, sino que se
ajuste al resto de la primera línea. Un pequeño margen alrededor de la
letra mejora también su visibilidad. En el siguiente ejemplo aplicaremos
margin: 0.1em
La siguiente página de ejemplo lleva este código para crear la letra capital
en sus párrafos:
p:first-letter { font-weight: bold; font-size:
2.5em; line-height: 0.9em; float: left; margin:
0.1em}

28
29
 Prioridades en Selectores
Herencia
Uno de los conceptos característicos del código CSS (y que puede darnos
problemas si no lo tenemos en cuenta) es la herencia de estilos.
Cuando se establece el valor de alguna propiedad en un elemento, todos
sus descendientes heredan inicialmente ese mismo valor; es decir que si
una etiqueta lleva asociado un cierto estilo (por ejemplo, letra en negrita),
todas las etiquetas anidadas que estén dentro de ella, tendrán en principio
ese estilo. Ejemplo:
body { font-family: arial; color: blue; }
En este ejemplo todos los elementos de la página tendrán las
características indicadas para la etiqueta body (letra tipo arial, y color
azul), ya que esta etiqueta delimita la parte visible de la página y engloba a
todas las demás.

30
 Prioridades en Selectores
Siguiendo con el ejemplo anterior, si queremos que alguna etiqueta no
tenga el estilo indicado en la etiqueta body debemos indicarlo en otra
regla. Esta otra regla tendrá prioridad sobre la anterior, ya que siempre
tiene prioridad la regla referida a la propia etiqueta sobre la regla
heredada, y en todo caso tendrá prioridad la regla que esté en un nivel
más profundo. Así por ejemplo al aplicar el siguiente código:
i { color: blue }
b { color: red }
hay una clara diferencia entre estas dos líneas de html:
<i><b><u> Texto en negrita, cursiva y subrayado</u></b></i>
<b><i><u> Texto en negrita, cursiva y subrayado</u></i></b>
en el primer caso veremos el texto en color rojo (red), y en el segundo lo
veremos en azul (blue).

31
 Colisión de estilos

Al escribir código CSS para una página, sobre todo en páginas complejas,
puede ser que se apliquen diferentes valores en una propiedad, para una
misma etiqueta. El navegador debe decidir qué estilo aplicar en función de
unas prioridades:
Ejemplo: Se aplican estas dos etiquetas a la misma página:
p { color: red }
p { color: blue }
El navegador debe decidir si el color de los párrafos será rojo (red) o azul
(blue), en este caso, y si no influye ninguna otra circunstancia, tendrá
prioridad el valor designado en segundo lugar. Pueden darse otros casos.
Para ello se establece una lista de prioridades.

32
 Colisión de estilos

Normalmente lo más específico tiene mayor prioridad

• Especifidad del selector: A mayor especifidad del selector, mayor prioridad en
su aplicación. Así por ejemplo el selector universal (*) es el menos prioritario,
luego estarían los selectores de etiqueta, luego los de clase e id, más
específicos serían los descendentes, y más específicos aún el selector de hijos
y el adyacente.
• Especifidad tipo de hoja de estilo: Hay tres formas de enlazar el código css,
desde un archivo exterior, que sería el menos específico, desde una etiqueta
style en la cabecera, más específico que el anterior, y desde el atributo
style=".." en la propia etiqueta, que sería el que tiene mayor prioridad.
• Si después de lo anterior, varias reglas tienen la misma especifidad, tendrá
prioridad la última regla indicada en el código.
• Podemos hacer una excepción en las normas de prioridad mediante la palabra
clave !important. Al escribirla detrás de cualquier valor damos prioridad a esa
propiedad sobre cualquier otra con la que colisione.

33