modulo1parte2ver2 140505061829-phpapp02
TRANSCRIPT
![Page 1: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/1.jpg)
Para que sirve el CSS?
Cascading Style Sheet («Hoja de estilos en cascada»)
![Page 2: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/2.jpg)
Funcionamiento básico Antes de CSS
<!DOCTYPE html> <html>
<head></head> <body> <p><font color="gray" face="Verdana" size="2"> Primer párrafo a formatear </font></p> <p><font color="gray" face="Verdana" size="2"> Segundo párrafo a formatear </font></p> </body>
</html>
![Page 3: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/3.jpg)
Funcionamiento básico Después de CSS
<!DOCTYPE html> <html>
<head> <style> p { color: gray; font-family: Verdana; font-size: medium; } </style> </head> <body> <p>Primer párrafo a formatear</p> <p>Segundo párrafo a formatear</p> </body>
</html>
![Page 4: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/4.jpg)
Beneficios del CSS
• Separar la presentación del contenido. • Código mas “limpio”. Mas legible. • Rehusó del código. Se escribe menos. • Control de la presentación de muchos
documentos desde una única hoja de estilo. • Aplicación de diferentes presentaciones a
diferentes tipos de medios (pantalla, impresión, etc.)
![Page 5: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/5.jpg)
Incluir CSS en los elemento HTML Como incluir CSS
<!DOCTYPE html > <html>
<head></head> <body> <p style="color: black; font-family: Verdana;"> Un párrafo de texto. </p> </body>
</html>
![Page 6: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/6.jpg)
Incluir CSS en el mismo documento HTML Como incluir CSS
<!DOCTYPE html > <html>
<head> <style>p{ color: black; font-family: Verdana; } </style> </head> <body> <p>Un párrafo de texto. </p> </body>
</html>
![Page 7: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/7.jpg)
Incluir CSS en otro documento Como incluir CSS <!DOCTYPE html > <html>
<head> <link rel="stylesheet" type="text/css" href="/css/estilos.css" /> </head> <body> <p>Un párrafo de texto. </p> </body>
</html>
![Page 8: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/8.jpg)
Sintaxis básica
Digamos que queremos un fondo rojo Usando HTML Usando CSS
<body bgcolor="#FF0000">
body {background-color: #FF0000;}
![Page 9: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/9.jpg)
Regla CSS
• Selector: Define a que elemento o grupo de elementos a los que se aplica le regla.
• Propiedad: Identifica el aspecto visual a modificar.
• Valor: Específica que estilo se le va a aplicar a la propiedad
![Page 10: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/10.jpg)
Sintaxis de CSS
Todas las reglas CSS tienen la misma sintaxis: Los comentarios son Delimitados por /* … */
selector { propiedad1:valor; propiedad2:valor; .. propiedadN:valor; }
/* encabezados nivel 1 */ h1 { font-size: 42px; color: pink; font-family: ‘Arial'; }
![Page 11: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/11.jpg)
Tipos de Selectores CSS
• Selector de Elemento: h2{} • Selector de Clase: .miClase{} • Selector de Identificador: #esteId{}
![Page 12: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/12.jpg)
Selector de Elemento CSS
Si se desea poner varias reglas hay que sepáralas por el caracter “;”. O de forma mas clara
p{color: blue;text-align:center}
p{ color: blue; text-align:center
}
![Page 13: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/13.jpg)
Selector de Elemento CSS
Se pueden aplicar a múltiples selectores
div, p, a{ color: blue; text-align:center
}
![Page 14: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/14.jpg)
Todos los Tipos de Selectores Tipos de Selectores
h2{ font-size:24px;
} .azul{
color:blue; } #alerta{
background-color:red; color:white;
}
![Page 15: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/15.jpg)
Selectores compuestos Tipos de Selectores
h2.azul{ font-size:24px;
} h2.alerta{
background-color:red; color:white;
}
![Page 16: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/16.jpg)
Ejemplos de selectores
* Devuelve todos los elementos
h2 Devuelve cualquier elemento <h2>
.azul Devuelve todos los elementos de la clase “azul”
#azul Devuelve todos los elementos del elemento <azul>
h2.azul Devuelve cualquier elemento <h2> de la clase “azul”
h2#azul Devuelve cualquier elemento <h2> con el iden<ficador “azul”
sec<on, h2 Devuelve cualquier elemento <h2> y <sec<on>
sec<on h2 Devuelve cualquier elemento <h2> que este dentro de un <sec<on>
sec<on > h2 Devuelve cualquier elemento <h2> que este dentro e inmediatamente debajo del elemento <sec<on>
sec<on + h2 Devuelve cualquier elemento <h2> inmediatamente posterior al elemento padre <sec<on>
sec<on ~ h2 Devuelve cualquier elemento <h2> posterior al elemento padre <sec<on>
![Page 17: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/17.jpg)
Selector CSS *
<!DOCTYPE html> <html>
<head> <style>*{background-color:yellow;}</style> </head> <body>
<h1>Welcome to My Homepage</h1> <div class="intro">
<p id="firstname">My name is Donald.</p> <p id="hometown">I live in Duckburg.</p>
</div> <p>My best friend is Mickey.</p>
</body> </html>
![Page 18: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/18.jpg)
Selector CSS de Elemento
<!DOCTYPE html> <html>
<head> <style>p{background-color:yellow;} </style>
</head> <body>
<h1>Welcome to My Homepage</h1> <div>
<p id="firstname">My name is Donald.</p> <p id="hometown">I live in Duckburg.</p>
</div> <p>My best friend is Mickey.</p>
</body> </html>
![Page 19: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/19.jpg)
Selector CSS de Clase
<!DOCTYPE html> <html>
<head> <style>.intro {background-color:yellow;} </style>
</head> <body>
<h1>Welcome to My Homepage</h1> <div class="intro"> <p>My name is Donald.</p> <p>I live in Duckburg.</p> </div> <p>My best friend is Mickey.</p>
</body> </html>
![Page 20: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/20.jpg)
Selector CSS de Identificador
<!DOCTYPE html> <html>
<head> <style>#firstname{ background-color:yellow;} </style>
</head> <body>
<h1>Welcome to My Homepage</h1> <div class="intro"> <p id="firstname">My name is Donald.</p> <p id="hometown">I live in Duckburg.</p> </div> <p>My best friend is Mickey.</p>
</body> </html>
![Page 21: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/21.jpg)
Selector CSS elemento, elemento
<!DOCTYPE html> <html>
<head> <style>h1,p{background-color:yellow;}</style> </head> <body>
<h1>Welcome to My Homepage</h1> <div>
<p>My name is Donald.</p> <p>I live in Duckburg.</p>
</div> <p>My best friend is Mickey.</p>
</body> </html>
![Page 22: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/22.jpg)
Selector CSS elemento elemento
<!DOCTYPE html> <html>
<head> <style>div p{background-color:yellow;}</style>
</head> <body>
<h1>Welcome to My Homepage</h1> <div>
<h2>My name is Donald</h2> <p>I live in Duckburg.</p>
</div> <p>My best friend is Mickey.</p>
</body> </html>
![Page 23: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/23.jpg)
Selector CSS elemento > elemento
<!DOCTYPE html> <html>
<head> <style> div>p {background-color:yellow;}</style> </head> <body>
<h1>Welcome to My Homepage</h1> <div>
<h2>My name is Donald</h2> <p>I live in Duckburg.</p>
</div> <div> <span> <p>I will not be styled.</p> </span> </div> <p>My best friend is Mickey.</p>
</body> </html>
![Page 24: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/24.jpg)
Selector CSS elemento + elemento
<!DOCTYPE html> <html>
<head> <style> div+p{ background-color:yellow; } </style> </head> <body>
<h1>Welcome to My Homepage</h1> <div>
<h2>My name is Donald</h2> <p>I live in Duckburg.</p>
</div> <p>My best friend is Mickey.</p> <p>I will not be styled.</p>
</body> </html>
![Page 25: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/25.jpg)
Selector CSS elemento ~ elemento
<!DOCTYPE html> <html>
<head> <style> p~ul{background:#ff0000;} </style> </head> <body>
<div>A div element.</div> <ul><li>Coffee</li></ul> <p>The first paragraph.</p> <ul> <li>Coffee</li></ul> <h2>Another list</h2> <ul><li>Coffee</li></ul>
</body> </html>
![Page 26: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/26.jpg)
26
<!DOCTYPE html> <html><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 */{ color: #555; } /* Todos los párrafos contenidos en #primero */{ color: #336699; } /* Todos los enlaces la pagina */{ color: #CC3300; } /* Los elementos "em" contenidos en #primero */{ background: #FFFFCC; padding: .1em; } /* Todos los elementos "em" de clase "especial" en toda la pagina */{ background: #FFCC99; border: 1px solid #FF9900; padding: .1em; } /* Elementos "span" contenidos en .normal */{ font-weight: bold; } </style> </head>
hEp://librosweb.es/css/capitulo_15.html
![Page 27: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/27.jpg)
27
<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>
![Page 28: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/28.jpg)
Selectores de atributos
Input[type] Selecciona cualquier <input> con el atributo type
Input[foo~=“red”] Selecciona cualquier <input> donde el atribuEo foo contenga un valor llamado red
Input[type^=“sub”] Selecciona cualquier <input> con el atributo type que comience con “sub”
Input[type$=“mit”] Selecciona cualquier <input> con el atributo type que termine con “mit”
Input[type*=“ubmit”] Selecciona cualquier <input> con el atributo type que contenga con “ubmit”
Input[type|=“en”] Selecciona cualquier <input> con el atributo type que <ene exactamente “en” o comienza con “en-‐”
![Page 29: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/29.jpg)
Selector CSS [atributo]
<!DOCTYPE html> <html>
<head> <style>a[target]{background-color:yellow;}</style> </head> <body> <p>The links with a target attribute gets a yellow background:</p> <a href="http://www.w3schools.com">w3schools.com</a> <a href="http://www.disney.com" target="_blank">disney.com</a> <a href="http://www.wikipedia.org"
target="_top">wikipedia.org</a> </body>
</html>
![Page 30: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/30.jpg)
Selector CSS [atributo~=value]
<!DOCTYPE html> <html>
<head> <style>[title~=flower]{border:5px solid yellow;}</style> </head> <body>
<p>The image with the title attribute containing the word "flower" gets a yellow border.</p> <img src="klematis.jpg" title="klematis flower" width="150" height="113" /> <img src="img_flwr.gif" title="flowers" width="224" height="162" /> <img src="landscape.jpg" title="landscape" width="160" height="120" />
</body> </html>
![Page 31: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/31.jpg)
Selector CSS [atributo|=value]
<!DOCTYPE html> <html> <head><style>[lang|=en]{background:yellow;}</style></head>
<body> <p lang="en">Hello!</p> <p lang="en-us">Hi!</p> <p lang="en-gb">Ello!</p> <p lang="us">Hi!</p> <p lang="no">Hei!</p> <body>
</html>
![Page 32: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/32.jpg)
Selector CSS [atributo^=value]
<!DOCTYPE html> <html>
<head> <style> div[class^="test”]{background:#ffff00;}</style> </head> <body> <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="test">The third div element.</div> <p class="test">This is some text in a paragraph.</p> </body>
</html>
![Page 33: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/33.jpg)
Selector CSS [atributo$=value]
<!DOCTYPE html> <html>
<head> <style> div[class$="test”]{background:#ffff00;}</style> </head> <body> <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="test">The third div element.</div> <p class="test">This is some text in a paragraph.</p> </body>
</html>
![Page 34: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/34.jpg)
Selector CSS [atributo*=value]
<!DOCTYPE html> <html>
<head> <style>div[class*="test”]{background:#ffff00;}</style> </head> <body> <div class="test">The first div element.</div> <div class="second">The second div element.</div> <div class="firs_test_last">The third div element.</div> <p class="test">This is some text in a paragraph.</div>
</body> </html>
![Page 35: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/35.jpg)
Herencia y Cascada
35
La herencia y la cascada mecanismo de cascada CSS gobierna como los navegadores aplican estas reglas de estilo. • La herencia HTML determina cuales propiedades de
estilos se heredan de su padres. http://www.w3.org/TR/CSS21/propidx.html • El mecanismo de cascada determina como son
aplicados las propiedades de los estilos cuando aparecen conflictos de reglas para los elementos.
hEp://www.w3.org/community/webed/wiki/Inheritance_and_cascade hEp://mosaic.uoc.edu/ac/le/es/m6/ud2/
![Page 36: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/36.jpg)
Herencia
36
• Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad.
• Porque es útil? • Cómo funciona? • Forzar la herencia. “inherit”
![Page 37: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/37.jpg)
Herencia
37
<!DOCTYPE html> <html lang="es"> <head> <meta charset=utf-8"> <title>Herencia</title> </head> <body> <h1>Título</h1> <p>Un párrafo de texto.</p> </body> </html> inherit.html
html {font: 75% Verdana,sans-serif;} style.css
![Page 38: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/38.jpg)
Herencia
38
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
inherit.html
html {font: 75% Verdana,sans-serif;} html { font-style: normal; font-variant: normal; font-weight: normal; font-size: 75%; line-height: normal; font-family: Verdana,sans-serif; }
style.css
75% de 16 pixels es 12 pixels Equivale a
![Page 39: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/39.jpg)
Herencia
39
h1 { font-size: 300%; }
inherit.html
![Page 40: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/40.jpg)
Forzar la Herencia
40
p {background: inherit;}
style.css
![Page 41: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/41.jpg)
Forzar la Herencia
41
style.css <ul id="nav"> <li><a href="/">Inicio</a></li> <li><a href="/news/">Noticias</a></li> <li><a href="/products/">Productos</a></li> <li><a href="/services/">Servicios</a></li> <li><a href="/about/">Sobre nosotros</a></li> </ul>
Inherit.htm
#nav { background: blue; color: white; margin: 0; padding: 0; } #nav li { display: inline; margin: 0; padding: 0 0.5em; border-right: 1px solid; } #nav li a { color: inherit; text-decoration: none; }
![Page 42: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/42.jpg)
Cascada
42
Determinar todas las declaraciones que se aplican al elemento para el medio CSS seleccionado. El método seguido por CSS para resolver las colisiones de estilos se muestra a continuación:
• Importancia: palabra clave !important. • Especificidad: Ordenar las declaraciones según lo
específico que sea el selector. Cuanto más genérico es un selector, menos importancia tienen sus declaraciones.
• Orden de la Fuente: Ordenar las declaraciones según su origen (CSS de navegador, de usuario o de diseñador). Si después de aplicar las normas anteriores existen dos o más reglas con la misma prioridad, se aplica la que se indicó en último lugar.
hEp://www.w3.org/community/webed/wiki/Inheritance_and_cascade
![Page 43: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/43.jpg)
Importancia
43
Las declaraciones contrapuestas se aplicarán en el orden siguiente: • Hojas de Estilo de User agent • Declaraciones normales en hojas de estilo de
usuario • Declaraciones normales en hojas de estilo de
autor • Declaraciones importantes en hojas de estilo de
usuario • Declaraciones importantes en hojas de estilo de
autor
![Page 44: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/44.jpg)
Especificidad
44
hEp://www.jaso^.org/Blog/post/Tu-‐es<lo-‐gana-‐a-‐mi-‐es<lo-‐Especificidad-‐en-‐reglas-‐CSS.aspx
![Page 45: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/45.jpg)
Especificidad
45
La especificidad tiene cuatro componentes; por ejemplo a, b, c y d. El componente "a" es el más distintivo y el "d", el que menos. • El componente "a" es bastante sencillo: es 1 para una declaración
en un atributo style; si no, es 0. • El componente "b" es el número de selectores de id en el selector
(los que empiezan con #). • El componente "c" es el número de selectores de atributo, incluidos
los selectores de clase y pseudoclases. • El componente "d" es el número de tipo de elementos y
pseudoelementos del selector.
![Page 46: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/46.jpg)
p { color: cyan; }
Probemos esto
46
style.css
<body> <h1>Título</h1> <p>Un párrafo de texto.</p> <p>Un segundo párrafo de texto.</p> </body>
Inherit.htm
Agreguemos esto a los archivos y recarguemos
![Page 47: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/47.jpg)
#special { background-color: red; color: yellow; }
Probemos esto
47
style.css
<body> <h1>Título</h1> <p id="special" >Un párrafo de texto.</p> <p>Un segundo párrafo de texto.</p> </body>
Inherit.htm
Agreguemos esto a los archivos y recarguemos
![Page 48: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/48.jpg)
p { background-color: yellow; color: black; }
Orden de fuente
48
style.css
Agreguemos esto al final del archivo y recarguemos
Si dos declaraciones afectan al mismo elemento, <enen la misma importancia y la misma especificidad, la señal dis<n<va final es el orden en las fuentes. La declaración que se ve más adelante en las hojas de es<lo "ganará" a las anteriores.
![Page 49: Modulo1parte2ver2 140505061829-phpapp02](https://reader030.vdocumento.com/reader030/viewer/2022032716/55b41206bb61ebda558b45d3/html5/thumbnails/49.jpg)
Question
49
¨ Include all rules for each element in the <style> attribute of the element.
¨ Include the rules for each page in a <style> element in the <head> element.
¨ Write the rules for the whole site in one or more style sheets and reference them by using a <style> element in the <head> element of each page.
¨ Write the rules for the whole site in one or more style sheets and reference them by using a <link> element in the <head> element of each page.
¨ Write the rules for the whole site in one or more style sheets and reference them by using a <stylesheet> element in the <head> element of each page.
What is the best way to apply CSS rules to HTML elements that occur in several different pages?