Css 2

Selectores | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-2.
html
* {
margin: 0;
padding: 0;
}
1 de 21 30/10/2019 22:20
Selectores | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-2.html
p {
...
}
< >
h1 {
color: red;
}
h2 {
color: blue;
}
p {
color: black;
}
h1 h2 h3
h1 {
color: #8A8E27;
2 de 21 30/10/2019 22:20
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
}
h3 {
color: #8A8E27;
}
h1, h2, h3 {
color: #8A8E27;
}
h1, h2, h3 {
color: #8A8E27;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
3 de 21 30/10/2019 22:20
<span>
<p>
p span { color: red; }
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
p span texto1 texto2
<span>
<p>
<span>
<h1>
p span { color: red; }

h1 span { color: blue; }
<span>
4 de 21 30/10/2019 22:20
<p>
<span>
<h1>
selector1 selector2 selector3 ... selectorN
p a span em { text-decoration: underline; }
<em>
<span>
<a>
<p>
/* El estilo se aplica a todos los elementos "p", "a", "s

pan" y "em" */
p, a, span, em { text-decoration: underline; }
/* El estilo se aplica solo a los elementos "em" que se

encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }
5 de 21 30/10/2019 22:20
p a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
p * a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
p * a
<a>
<p>
<a> <p>
p * a
<body>
<p>Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
*
p
body p
class
6 de 21 30/10/2019 22:20
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
destacado
class .
.destacado { color: red; }
.destacado
class
<body>
<p>Nunc sed lacus et <a href="#" class="destacado">est
adipiscing</a> accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu a
d</em> litora...</p>
</body>
.aviso {
7 de 21 30/10/2019 22:20
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}
.error {
color: #930;
font-weight: bold;
}
<span class="error">...</span>
<div class="aviso">...</div>
<span> class="error"
.error
<div> class="aviso"
.aviso
<body>
<p>Nunc sed lacus et <a href="#" class="destacado">est
adipiscing</a> accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu a
d</em> litora...</p>
</body>
class
destacado
p.destacado { color: red }
p.destacado
<p> class destacado
a.destacado
class destacado
8 de 21 30/10/2019 22:20
.destacado
*.destacado *
/* Todos los elementos de tipo "p" con atributo class="av

iso" */
p.aviso { ... }
/* Todos los elementos con atributo class="aviso" que est

én dentro
de cualquier elemento de tipo "p" */
p .aviso { ... }
/* Todos los elementos "p" de la página y todos los eleme

ntos con
atributo class="aviso" de la página */
p, .aviso { ... }
<p class="especial destacado error">Párrafo de texto...</

p>
.especial .destacado .error
15 píxel
.error { color: red; }

.destacado { font-size: 15px; }
.especial { font-weight: bold; }

p>
9 de 21 30/10/2019 22:20
.error { color: red; }

.error.destacado { color: blue; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }

p>
.error.destacado
error destacado
#
.
#destacado { color: red; }
<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>
#destacado
10 de 21 30/10/2019 22:20
<p>
p#aviso { color: blue; }
p#aviso
/* Todos los elementos de tipo "p" con atributo id="avis

o" */
p#aviso { ... }
/* Todos los elementos con atributo id="aviso" que estén

dentro
de cualquier elemento de tipo "p" */
p #aviso { ... }
/* Todos los elementos "p" de la página y todos los eleme

ntos con
atributo id="aviso" de la página */
p, #aviso { ... }
11 de 21 30/10/2019 22:20
.aviso .especial { ... }
class="especial"
class="aviso"
div.aviso span.especial { ... }
<span> class="especial"
<div> class="aviso"
ul#menuPrincipal li.destacado a#inicio { ... }
<li>
<ul>
menuPrincipal
12 de 21 30/10/2019 22:20
>
p > span { color: blue; }
<p><span>Texto1</span></p>
<p><a href="#"><span>Texto2</span></a></p>
<span> <p>
<span>
<span>
<p>
p a { color: red; }
p > a { color: red; }
<p><a href="#">Enlace1</a></p>
<p><span><a href="#">Enlace2</a></span></p>
<a> <p>
<a>
<p> p > a
13 de 21 30/10/2019 22:20
elemento1 + elemento2 { ... }
<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
...
<h2>Otro subtítulo</h2>
...
</body>
<h2>
<h1>
h2 { color: green; }
h1 + h2 { color: red }
<h2>
<h2>
<h1>
elemento1 elemento2
elemento2 elemento1
14 de 21 30/10/2019 22:20
p + p { text-indent: 1.5em; }
p + p
[nombre_atributo]
nombre_atributo
[nombre_atributo=valor]
nombre_atributo
valor
[nombre_atributo~=valor]
nombre_atributo
valor
[nombre_atributo|=valor]
nombre_atributo
lang
/* Se muestran de color azul todos los enlaces que tengan

un atributo "class", independientemente de su valor */
15 de 21 30/10/2019 22:20
a[class] { color: blue; }

un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; }
/* Se muestran de color azul todos los enlaces que apunte

n
al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }

un atributo "class" en el que al menos uno de sus valo
res
sea "externo" */
a[class~="externo"] { color: blue; }
/* Selecciona todos los elementos de la página cuyo atrib

uto
"lang" sea igual a "en", es decir, todos los elementos
en inglés */
*[lang=en] { ... }
/* Selecciona todos los elementos de la página cuyo atrib

uto
"lang" empiece por "es", es decir, "es", "es-ES", "es-
AR", etc. */
*[lang|="es"] { color : red }
h1 { color: red; }
...
h1 { font-size: 2em; }
...
h1 { font-family: Verdana; }
16 de 21 30/10/2019 22:20
<h1>
h1 {
color: red;
font-size: 2em;
font-family: Verdana;
}
h1 { color: red; font-size: 2em; font-family: Verdana; }
h1 {color:red;font-size:2em;font-family:Verdana;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt
d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
17 de 21 30/10/2019 22:20
<meta http-equiv="Content-Type" content="text/html; cha

rset=UTF-8" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
body { color: blue; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>
<body>
<body>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt
d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; cha
rset=UTF-8" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
body { font-family: Arial; color: black; }
h1 { font-family: Verdana; }
p { color: red; }
</style>
</head>
18 de 21 30/10/2019 22:20
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>
<body>
<h1>
<body>
<p>
<body>
<body>
p { color: red; }
p { color: blue; }
<p>...</p>
19 de 21 30/10/2019 22:20
!important
p { color: red; }
p#especial { color: green; }
* { color: blue; }
<p id="especial">...</p>
<p>
*
20 de 21 30/10/2019 22:20
p
p#especial
id
p#especial
21 de 21 30/10/2019 22:20

Css 2

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Css 2

Caricato da

Copyright:

Formati disponibili

Selectores | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-2.

p span { color: red; }

p span texto1 texto2

p span { color: red; }

selector1 selector2 selector3 ... selectorN

p a span em { text-decoration: underline; }

/* El estilo se aplica a todos los elementos "p", "a", "s

/* El estilo se aplica solo a los elementos "em" que se

.destacado { color: red; }

p.destacado { color: red }

/* Todos los elementos de tipo "p" con atributo class="av

/* Todos los elementos con atributo class="aviso" que est

/* Todos los elementos "p" de la página y todos los eleme

<p class="especial destacado error">Párrafo de texto...</

.especial .destacado .error

.error { color: red; }

<p class="especial destacado error">Párrafo de texto...</

.error { color: red; }

<p class="especial destacado error">Párrafo de texto...</

#destacado { color: red; }

p#aviso { color: blue; }

/* Todos los elementos de tipo "p" con atributo id="avis

/* Todos los elementos con atributo id="aviso" que estén

/* Todos los elementos "p" de la página y todos los eleme

.aviso .especial { ... }

div.aviso span.especial { ... }

ul#menuPrincipal li.destacado a#inicio { ... }

p > span { color: blue; }

elemento1 + elemento2 { ... }

/* Se muestran de color azul todos los enlaces que tengan

a[class] { color: blue; }

/* Se muestran de color azul todos los enlaces que tengan

/* Se muestran de color azul todos los enlaces que apunte

/* Se muestran de color azul todos los enlaces que tengan

/* Selecciona todos los elementos de la página cuyo atrib

/* Selecciona todos los elementos de la página cuyo atrib

h1 { color: red; font-size: 2em; font-family: Verdana; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

<meta http-equiv="Content-Type" content="text/html; cha

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

Potrebbero piacerti anche