Las hojas de estilo separan el contenido de su presentación, es decir, del formato de salida (color, tamaño de letra, etc...)
Para escribir un comentario en html se utiliza <!-- comentario --> En CSS se utiliza /* comentario */.
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Descripción del sitio">
<title>Mi primera página</title>
Para añadir una hoja de estilo externa se utiliza link. Con rel indica que tipo de enlace vamos a agregar. Para las hojas de estilo se utiliza stylesheet. El tipo de contenido se indica como type="text/css". Para indicar para qué dispositivos van estos estilos se utiliza media. Si el valor es all indicamos que para todos (móvil, imprimir, pantalla,...). Se puede omitir porque el valor por defecto es all. El atributo href nos indica dónde se encuentra nuestro archivo.
<link rel="stylesheet" type="text/css" media="all" href="css/estilos.css">
</head>
<body>
...
</body>
</html>
Reglas para trabajar con CSS
- Se definen los estilos para las etiquetas HTML. Por ejemplo, header, footer, div, a, p, etc...
- Después de definen los estilos para identificadores (id). Los id son elementos únicos en el HTML. En el CSS se declaran con el símbolo de #. Ejemplo: #nombre-id {estiolos}. En el HTML se llaman mediante el atributo id. Ejemplo: <div id="nombre-id"></div>
- Al final se definen los estilos para las clases (class). Las clases son elementos que se pueden repetir n veces en el html. En el CSS se declaran con el símbolo de . Ejemplo: .nombre-clase { estilos }. En HTML se llaman con el atributo class. Ejmplo: <div class="nombre-clase"></div>.
- Todos los estilos se ordenan conforme van apareciendo en la disposición del HTML, teniendo en cuenta la prioridad anterior, es decir, primero etiquetas HTML, luego id y por último class.
- Los atributos se declaran de la siguiente forma: {atributo1: valor1 ; atributo2: valor2 ; ...atributoN: valorN }
- Todos los atributos se ordenan alfabeticamente. Por ejemplo, si tengo width, color y display, entonces el orden sería: color, display y width.
- Si tenemos estilos para el comodín *, las etiquetas <html> y/o <body>, estos estilos son los primero en definirse.
- En el body debemos declarar un tamaño de fuente global.
- Si tenemos estilos para resetear elementos HTML, estos irán antes de cualquier estilo.
margin: 0;
padding: 0;
}
body {
Para indicar que suba un nivel en las carpetas, se utiliza ../
background: #212121 url(../img/fondo.jpg);
color: #FFF;
font-size: 16px;
}
Recursos:
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.