2º ESO PROGRAMACIÓN, TECNOLOGÍA Y ROBOTICA: 7.- LOS ESTILOS CSS

Todos los documentos constan de 2 elementos: El contenido y el formato del documento. En el caso de las páginas WEB estos elementos se pueden incluso separar utilizando lo que se denomina hoja de estilos CSS.

Si analizamos nuestro documento resulta sencillo comprobar que los encabezados tienen un determinado formato

El encabezado h1 es naranja, lo que se puede codificar como
h1 {
color:orange;
font-family: courier;
}

Los encabezados h3 es azul y courier
h3 {
color:blue;
font-family: courier;
}
Los párrafos en rojo
p {
color:red;
font-family: courier;
}

Se añaden todos estos elementos entre las etiquetas <head> y </head> y dentro de etiquetas
<style> </style>
<!DOCTYPE html>
<html>
<head>
<title>bigdata</title>
<meta name="" author="" content="ISABEL LAFUENTE">
<meta charset="UTF-8">
<meta name="big data" content="Prueba de web">
<meta name="keywords" content="bigdata,CSS, XML, HTML5">
<style>
h1 {color:orange;
font-family: arial;
}
h3 {color:blue;
font-family: courier;
}
p {color:red;
font-family: courier;
}
</style>

</head>

Para definir el resto de los formatos (estilos) se utiliza la etiqueta <span>. Pero existen otras etiquetas que también permiten crear bloques en el contenido. Entre las más utilizadas está la etiqueta <div> que define un bloque de texto. Para definir estilos que se reciclen en el contenido se utiliza la etiqueta <span class="nombre"> que se identifica en el encabezado como .nombre y <span id="elemento", que se identifica como #elemento. De esta manera:

<h3> <span id="elem1">FUENTES</span></h3><br>

#elem1{
color:green;
font-family: arial;

}
<li> Almacenamiento
<dl> <span class="clase1"> Clave-valor </span></dl>
<dl> <span class="clase1"> Documental</span> </dl>
<dl> <span class="clase1"> Grafo</span> </dl>
<dl> <span class="clase1">Orientado a columnas </span></dl>
</li>
<li> Analisis
<dl> <span class="clase1">Asociación</span> </dl>
<dl> <span class="clase1"> Minería de datos</span> </dl>
<dl> <span class="clase1"> Agrupación </span></dl>
<dl> <span class="clase1"> Análisis de texto </span></dl>

</li>
.clase1{
color: white;
font-family: verdana;

}

Si el documento tiene muchos estilos, el encabezado puede resultar muy pesado y por ello se pueden recoger todos los estilos del documentos en una hoja aparte de formato css.

La forma de enlazar dicha hoja de estilos con la página es mediante un enlace en el propio encabezado.

<head>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<title>bigdata</title>
<meta name="" author="" content="ISABEL LAFUENTE">
<meta charset="UTF-8">
<meta name="big data" content="Prueba de web">
<meta name="keywords" content="bigdata,CSS, XML, HTML5">
</head>