MANUALES: (23)
COMBINACIÓN DE SELECTORES
BÁSICOS:
CSS
permite la combinación de uno o más tipos de selectores para restringir el
alcance de las reglas CSS.
.aviso .especial { ... }
El anterior
selector solamente selecciona aquellos elementos con un
class="especial" que se encuentren dentro de cualquier
elemento con un class="aviso".
Si se
modifica el anterior selector:
div.aviso span.especial { ... }
Ahora, el
selector solamente selecciona aquellos elementos de tipo
<span> con un atributo class="especial" que estén dentro de cualquier elemento
de tipo <div> que tenga un atributo class="aviso".ul#menuPrincipal li.destacado a#inicio { ... }
El anterior
selector hace referencia al enlace con un atributo
id igual a inicio que se encuentra dentro de un elemento
de tipo <li> con un atributo class igual a destacado,
que forma parte de una lista <ul>con un atributo id igual a menuPrincipal.
EJERCICIOS PRÁCTICOS:
1)
index.html (Documento en HTML) :
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> Esto es la práctica </h1>
<h2> Muestra </h2>
<p> El selector universal <span>Se utiliza</span> para seleccionar todos los elementos de la página. El siguiente <span class="primero">ejemplo elimina el margen</span> y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS. </p>
<p id="especial">El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.</p>
</body>
</html>
style.css (Documento en CSS) :
*{
background-color:#955660;
}
h1,h2,p {
color:#f5af9f;
font-weight:bold;
}
p span {
color:orange;
}
span.primero {
color:olive;
}
p#especial {
background-color: blue;
}
2) Este ejrcicio pertenece a la página: http://librosweb.es/libro/css/capitulo_15.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio de selectores</title>
<style type="text/css">
/* Todos los elementos de la pagina */
*{ font: 1em/1.3 Arial, Helvetica, sans-serif; }
/* Todos los parrafos de la pagina */
p{ color: #555; }
/* Todos los párrafos contenidos en #primero */
#primero p{ color: #336699; }
/* Todos los enlaces la pagina */
a{ color: #CC3300; }
/* Los elementos "em" contenidos en #primero */
#primero em{ background: #FFFFCC; padding: .1em; }
/* Todos los elementos "em" de clase "especial" en toda la pagina */
em.especial{ background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }
/* Elementos "span" contenidos en .normal */
.normal span{ font-weight: bold; }
</style>
</head>
<body>
<div id="primero">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Praesent blandit nibh at felis. Sed nec diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non facilisis molestie, <em>lorem sem aliquam nulla</em>, id lacinia velit mi vestibulum enim.</p>
</div>
<div class="normal">
<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a href="#">Donec porttitor</a>, magna eu varius luctus,</span> metus massa tristique massa, in imperdiet est velit vel magna. Phasellus erat. Duis risus. <a href="#">Maecenas dictum</a>, nibh vitae pellentesque auctor, tellus velit consectetuer tellus, tempor pretium felis tellus at metus.</p>
<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis parturient montes, nascetur ridiculus mus. Proin aliquam convallis ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc aliquet. Sed eu metus. Duis justo.</p>
<p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em class="especial">enim id iaculis congue</em>, orci justo ultrices tortor, <a href="#">quis lacinia eros libero in eros</a>. Sed malesuada dui vel quam. Integer at eros.</p>
</div>
</body>
</html>
Imágenes de Pruebas Ejecutadas:
1)
2)
No hay comentarios:
Publicar un comentario