Curso de HTML | Hojas de estilos

Curso de HTML

30.  
31.  
33.  
35.  
48.  
59.  

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Cargar una hoja de estilos externa

<link rel="stylesheet" href="estilos.css"/>
  • 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.

Juego online para aprender a usar los selectores de CSS

Acceder al juego

¿Cómo escribir menos código?

Cómo no hacerlo:

#content { 
	margin-top: 10px;
	margin-right: 12px;
	margin-bottom: 0;
	margin-left: 15px;
	background-color: #000;
	background-repeat: no-repeat; 
}

Cómo hacerlo:

#content{
	margin: 10px 12px 0 15px;
	background: #000 no-repeat; 
}

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.