HOJAS DE ESTILO

HOJAS DE ESTILO

Mejora el diseño con hojas de estilo
Cuando no especificado distintamente, el texto de tus páginas es visualizado en pantalla con la fuente predeterminada del navagedor. Esto suele producir un efecto poco "profesional", ya que difícilmente una fuente predeterminada se adapta de manera precisa al diseño de una página. Con muy pocas líneas de código, ¡podemos dar a nuestro sitio todo otro aspecto!
Para ello crearemos un sencillo archivo de texto, que incluiremos en todas las páginas que queramos, a través del siguiente código a copiar entre las etiquetas <head> y </head>

<link rel="stylesheet" type="text/css" href="estilo.css"> Por supuesto el archivo puede tener el nombre que quieras, pero con extensión .css. En ese archivo, irán las definiciones de los estilos: primero el nombre de la parte del documento afectada, luego, entre { llaves } y separados por un "punto y coma", los distintos comandos (aquí sólo vienen los principales) body { font-family:Geneva, Arial, Helvetica; font-size:14px; font-weight:600; text-indent:20px; text-decoration:none; color:#ffd700; } en este ejemplo, los estilos afectarán a todo el cuerpo ("body") del documento, de la siguiente manera: font-family: indica el tipo de fuente. Siempre es conveniente indicar fuentes comunes, que estén instaladas en los ordenadores de tus visitantes. font-size: indica el tamaño de la fuente, en píxeles (px) o puntos (pt). font-weight: valor entre 100 y 900, indica el "peso" de la fuente. 600 corresponde a negrita. text-indent: en píxeles o puntos, representa la sangría a la izquierda en la primera línea. Muy cómodo para definir estilos de los párrafos (etiqueta <p>). text-decoration:none elimina los subrayados (cómodo para los enlaces), underline los impone. color:permite definir el valor hexadecimal de un color. Si queremos definir estilos para determinadas partes de nuestros textos, podemos utilizar las "clases", a las que se les pondrá un punto antes de su definición: .miestilo { color:#cc6600; } Un estilo así definido podremos utilizarlo a través de la siguiente etiqueta: <span class="miestilo">Texto afectado por el estilo</span>

MENU