de estilo • Una hoja de estilos no es más que una lista de reglas, las cuales están formadas por un selector y una o varias declaraciones: h1 { color:blue; }
es un par propiedad/valor que definen la apariencia visual de un elemento HTML. • Ejemplos de propiedades son: el color de fondo, el tamaño de la fuente, etc. • Los valores son las unidades o valores válidos para sus respectivas propiedades, como 400 pixeles (400px) o el color blanco (white)
de una declaración consiste del nombre de la propiedad seguido de dos puntos, el valor de la propiedad y al final un punto y coma: • Ejemplos: background-color: blue; width: 400px; font-family: Arial;
elementos HTML serán afectados por las declaraciones • Existen varios tipos de selectores • Elementos • Clases • IDs • Descendientes • Hijos • Adyacentes (hermanos o siblings), etc.
de clase afectan a todos los elementos HTML que tengan la clase especificada <h1 class="warning">Be careful!</h1> .warning { color: red; font-weight: bold; }
de ID afectan al elemento HTML con el ID especificado y contienen al inicio un # <div id="main-content"> <p>This is the main content of the page.</p> </div> #main-content { width: 400px; }
de descendientes, también llamados, selectores contextuales, afectan a elementos que son están contenidos dentro de otros elementos (sus descendientes) ul li { color: blue; } <ul> <li>Primer elemento</li> <li>Segundo elemento <ol> <li>Elemento de sub-lista</li> </ol> </li> </ul>
son similares a los selectores de descendientes, pero solo afectan a los descendientes directos. ul > li { color: blue } <ul> <li>Primer elemento</li> <li>Segundo elemento <ol> <li>Elemento de sub-lista</li> </ol> </li> </ul>
de elementos adyacentes (hermanos o siblings) afecta al elemento que sigue inmediatamente y que tiene el mismo padre que un elemento dado <body> <h1>This is a header</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> h1 + p { margin-top: 0; }
de atributo, se distinguen por usar corchetes [], permiten seleccionar elementos a través de sus atributos. • Puedes seleccionar elementos si el elemento: • Tiene el atributo • Tiene el valor exacto del atributo • Tiene un valor similar
por pseudoclases se distinguen por iniciar con : • Las pseudoclases más comunes para enlaces son: – link, visited, hover, active (LoVe/HAte) • Otra pseudoclase común es focus, utilizada principalmente en formularios. • a:hover { color: red; } •
elementos también se distinguen por iniciar con : • Ejemplos de pseudo elementos son la primera linea de un párrafo o la primera línea de un texto p:first-line { font-weight: bold; } h1:first-letter { font-size: 2em; }
Oficialmente existen dos tipos de selectores: simples y combinados (o contextuales) • Simples • body {...} • h2.first {...} – Combinados • body p {...} • h2.first > span {...}
elementos que coinciden con el selector y aplica los estilos que indiquen las reglas 2. El navegador aplicará primero su hoja de estilo default, luego la hoja de estilo definida por el usuario (en el navegador) y por último aplica las reglas de la hoja de estilos del autor (en la página Web), aplicando las reglas !important al final y por último aplicando las reglas ! important de la hoja de estilos del usuario 3. Reglas con mayor especifidad sobrescriben a los selectores menos específicos 4. Si 2 o más selectores coinciden con el mismo elemento y tienen la misma especificidad aplica la última regla en la hoja de estilo, las reglas que se importan desde otra hoja de estilo se colocan primero
cuenta para calcular la especificidad depende de la importancia de cada selector, en el siguiente orden, de menos a más importante 1)Elementos (incluyendo pseudoelementos y atributos) 2)Clases (incluyendo pseudoclases) 3)IDs 4)Estilos en línea
comphppuebla
bicstone
doniacld
manfredsteyer
yusukebe
chobishiba
utgwkk
o0h
tk3fftk
kn_to_maxpno
youkidearitai
hayatokudou
htkym
szymonslowik
maltzj
tmiket
mojombo
hatefulcrawdad
inesmontani
malarkey
tammielis
rkendrick25
chrislema
samtorres
addyosmani
![Julio 2013 Comunidad PHP Puebla 15 Selectores a[href] { color:](https://files.speakerdeck.com/presentations/50f945c0cc7b0130561a36533a989440/slide_14.jpg){kind=link}
