Hojas de estilos

Contactar con el profesor

Cargar una hoja de estilos externa

<link rel="stylesheet" type="text/css" 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

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:(Aplicar a TODOS los elementos de la página un margen cero)<div></div><p></p> → *{ margin: 0;padding:0 }
  • Selector de etiqueta(Aplicar a TODOS los div un fondo rojo y un borde sólido de 2px y color negro)<div></div><div></div> → div { background: red; border: 2px solid black;}
  • Selector de clase(Aplicar a todos los elementos con una clase verde una fuente de color verde)<div class="verde"></div> → .verde { color: green; }
  • Selector de IDIguales que los anteriores pero para elementos marcados con el atributo id. Este se utiliza para marcar un elemento único.(Aplicar al elemento slider un color de fondo azul)<div id="slider"></div> → #slider { background: blue; }

Ejercicios de etiquetas y selectores

Chistes

border: 1px solid black;

Cómo añadir un borde a un efecto hover sin que se sume al grosor

a{
text-decoration: none;
	font-size: 3em;
	border-bottom:1px solid transparent;
}
a:hover{
	border-bottom: 1px solid black
}

Citas

Tener en cuenta que los párrafos están alineados usando márgenes.

Estilos necesarios para resolver este ejercicio:

border-radius: 20px 0 0 20px;
← Favicon
Motores de navegación →

Aviso Legal | Política de privacidad