2. @borjamulleras| www.md360.es | borja@md360.es
Redefiniendo el estilo de etiquetas HTML
HTML:
<h1><font color="red">texto del elemento</font></h1>
CSS:
<HTML>
<HEAD>
…
<style type="text/css">
h1 {color: red;}
</style>
…
</HEAD>
<BODY>
Este texto es de color negro.
<h1>texto del elemento</h1>
</BODY>
</HTML>
3. @borjamulleras| www.md360.es | borja@md360.es
Redefiniendo el estilo de etiquetas HTML
<style type="text/css">
body {
font-family: Georgia, "Times New Roman”;
color: blue;
background-color: #d8da3d;
}
h1 {
color: red;
font-family: Helvetica, Geneva, Arial;
}
</style>
4. <HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="nombre-hoja-estilo.css">
…
</HEAD>
<BODY style=“font-family: Georgia;color: blue;background-color: #d8da3d; ”>
Este texto es de color ?.
<h1 style=“color: red;font-family: Helvetica, Geneva, Arial;”>texto del elemento</h1>
</BODY>
</HTML>
@borjamulleras| www.md360.es | borja@md360.es
Usando atributo STYLE en las etiquetas
Index.htm
5. <HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="nombre-hoja-estilo.css">
…
</HEAD>
<BODY>
Este texto es de color ?.
<h1>texto del elemento</h1>
</BODY>
</HTML>
@borjamulleras| www.md360.es | borja@md360.es
Hoja de estilo externa
body {
font-family: Georgia, "Times New Roman”;
color: blue;
background-color: #d8da3d;
}
h1 {
color: red;
font-family: Helvetica, Geneva, Arial;
}
Nombre-hoja-estilo.css
Index.htm
7. Retocar las etiquetas de HTML no siempre es solución.
Las clases:
.nombre { color: red; }
<p class="nombre"> ... ... </p>
y los identificadores (un sólo elemento):
#nombre {font-size: 16px;font-weight: bold;}
<p id="nombre"> ... ... </p>
@borjamulleras| www.md360.es | borja@md360.es
Definimos clases o identificadores
8. Selecciona sólo párrafos que pertenecen a la clase oferta
p.ofertas { color: red;}
Selecciona todos los elementos que pertenecen a la clase oferta
.ofertas { color: red;}
Esto selecciona todo los elementos que tengan un id pieDePagina
#pieDePagina { color: red; }
Selecciona un elemento <p> si tiene el id pieDePagina
p#pieDePagina { color: red; }
@borjamulleras| www.md360.es | borja@md360.es
Definimos clases o identificadores
22. @borjamulleras| www.md360.es | borja@md360.es
Las capas
CLEAR: left | right | both
Se usa para evitar que otras capas floten alrededor.
FLOAT: none | left | right
Se usa para forzar que las capas floten alrededor.