Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Cargar una hoja de estilos externa
- El atributo opcional type se usa para especificar un tipo de medio (text/css para una hoja de estilo en cascada) permitiendo a los navegadores omitir los tipos de hoja de estilo que no soportan.
- rel=”stylesheet” indica que es la hoja de estilos preferente.
- rel=”alternate stylesheet” indica que podemos cambiar esta hoja de estilos desde el navegador.
- Es necesario declarar al menos una hoja de estilos preferente.
Selectores CSS
En una hoja de estilos, nos permiten identificar los elementos del HTML a los que queremos asignar una apariencia.
h1 { color : #990000 }Declaración:
selector { propiedad : valor }El selector indica a qué hay que aplicarle la regla y la declaración especifica qué es lo que hay que hacerle.
Selectores: http://www.w3.org/TR/selectors/
Tipos
- Selector universal: se aplica a todos los elementos de la página.
<div></div><p></p> → *{ margin: 0;padding:0 }- Selector de etiqueta: se aplica a todas las etiquetas identificadas por el selector.
<div></div><div></div> → div { background: red; border: 2px solid black;}- Selector de clase: se aplica a todos los elementos cuyo atributo class coincida por el identificado por el selector.
<div class="verde"></div> → .verde { color: green; }- Selector de ID: se aplica al elemento cuyo atributo id coincida con el indicado por el selector.
<div id="slider"></div> → #slider { background: blue; }- Selector descendente: nos permite concatenar selectores uniendolos por un espacio en blanco. El siguiente selector se aplica a todos los párrafos que se encuentren dentro de un div :
div p{ color: red; }- Selector combinado
El siguiente selector se aplica a todos los párrafos con clase amplio que estén dentro de otro de un div con clase verde, un margen de 40px:
div.verde p.amplio { margin: 40px; }class vs id
Las clases y los identificadores son como los nombres comunes y los propios. Una clase se puede reutilizar para diversos elementos pero uno con id tiene que ser único (class=»montes», id=»Everest»). No puede haber más que un solo elemento con una determinada id en la misma página, de lo contrario el intérprete del navegador dará resultados imprevisibles.