<link rel="stylesheet" href="style.css">Donde el fichero style.css contiene las reglas de estilo. La otra opcion es indicar las reglas en la propia cabecera de la pagina utilizando las etiquetas:
<style type="text/css"> reglas de estilo </style>De esta manera estan realizados los ejemplos de este fichero.
<style type="text/css" > body { margin-left: 10%; margin-right: 10%; font-family: Garramond} </style>
<style type="text/css"> body { margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%;} h2,h3,h4,h5,h6 { margin-left: -3%; } </style>
h2 { margin-top: 8em; margin-bottom: 3em; }
Especificar los valores mediante la unidad em es muy util, ya que escala con el tamaño de la fuente. De esta forma podemos preservar el aspecto general de la Web, independientemente del tamaño de fuente que seleccione el usuario en el navegador. Otras unidades como pixeles o puntos, son las que nos pueden dar problemas de redimensionado.
Para especificar un espaciado inferior para una cabecera cualquiera, deberemos crear un estilo con nombre, para luego poder utilizarlo como valor para el atributo class dentro de dicha cabecera.
La regla de estilo para el espaciado inferior deberia escribirse como:
h2.subsection { margin-top: 8em; margin-bottom: 3em; }
p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }
Lo usual consiste en modificar el estilo de texto a negrita o cursiva, pero podriamos ser un poco mas originales ampliando las funciones de las etiquetas. Por ejemplo, hagamos que em muestre texto en negrita cursiva y strong sea negrita mayusculas.
em { font-style: italic; font-weight: bold; } strong { text-transform: uppercase; font-weight: bold; }
Asi queda texto en em y ahora texto en strong. En este otro ejemplo, la cabecera de nivel tres aparecera siempre en minuscula.
h3 { text-transform: lowercase; }
Todos los navegadores usan un tamaño por defecto para los encabezados. Si personalizas y cambias dicho tamaño corres el riesgo de que el texto quede demasiado pequeño como para ser legible, sobre todo si utilizas puntos como unidad. La recomendacion dada desde aqui es utilizar siempre unidades relativas (porcentajes).
h1 { font-size: 200%; } h2 { font-size: 150%; } h3 { font-size: 100%; }
Seguramente tu tipo de letra favorito no esta disponible en todos los navegadores. Para que nuestra Web sea todo-terreno y este preparada para todos los casos, podemos indicar varios tipos de letras en orden de preferencia de forma que podamos garantizar que al menos una existira y conoceremos el aspecto de nuestra web.
Las fuentes mas comunes son: serif, sans-serif, cursive, fantasy, o monospace, por citar algunas:
body { font-family: Verdana, sans-serif; } h1,h2 { font-family: Garamond, "Times New Roman", serif; }
En este ejemplo se le da preferencia a Verdana sobre Sans-Serif y a Garramond sobre Times New Roman. Los segundos seran utilizados en caso de que los primeros no esten disponibles.
Primera Regla de oro: No escribas nada que no quede dentro de alguna etiqueta, de otra forma no podras asegurar el aspecto de la pagina a ciencia cierta.
Segunda regla de oro: Indica siempre los parametros de la fuente para la etiqueta pre, ya que algunos navegadores no muestran correctamente los valore de preformato (texto tal y como esta escrito).
pre { font-family: monospace; }Tercera Regla de oro: No olvides tampoco establecer el tipo de letra para encabezados, parrafos y elementos de lista. Esto es importante sobre todo si piensas incluir bordes o fondos del estilo a div, ya que en algunos casos el navegador no utiliza correctamente el tipo de letra heredada y utiliza la existente por defecto. Es un bug o error solucionado en las versiones recientes.
h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }
div.box { border: solid; border-width: thin; width: 100% }
div.color { background: rgb(204,204,255); padding: 0.5em; border: none; }
p.cambiado { padding-left: 0.2em; border-left: solid; border-right: none; border-top: none; border-bottom: groove; border-left-width: thin; border-color: red; }
Es muy interesante lo que se puede hacer con CSS
body { color: black; background: white; } strong { color: red }Los colores son a su vez parametros de los enlaces:
:link { color: rgb(0, 0, 153) } /* para enlaces no visitados */ :visited { color: rgb(153, 0, 153) } /* para enlaces visitados */ :active { color: rgb(255, 0, 102) } /* en el momento de pinchar */ :hover { color: rgb(0, 96, 255) } /* cuando el raton esta sobre el enlace */Vamos a añadir dos tipos de enlaces internos aqui para probar los estilos anteriores. Intenta probar los cuatro estados anteriores
a.plain { text-decoration: none }Lo que nos daria un enlace a ningun sitio sin subrayado.
![]() |
black = "#000000" | ![]() |
green = "#008000" |
![]() |
silver = "#C0C0C0" | ![]() |
lime = "#00FF00" |
![]() |
gray = "#808080" | ![]() |
olive = "#808000" |
![]() |
white = "#FFFFFF" | ![]() |
yellow = "#FFFF00" |
![]() |
maroon = "#800000" | ![]() |
navy = "#000080" |
![]() |
red = "#FF0000" | ![]() |
blue = "#0000FF" |
![]() |
purple = "#800080" | ![]() |
teal = "#008080" |
![]() |
fuchsia = "#FF00FF" | ![]() |
aqua = "#00FFFF" |
table { margin-left: -4% font-family: sans-serif; font-size: 80%; border-width: 2; border-color: white; }Podemos diferenciar distintos estilos de tablas gracias a las clases.
table.guay { margin-left: 44% font-family: comic sans ms; font-size: 80%; background: lightblue; border-width: 3; border-color: navy; } td { font-family: sans-serif; font-size: 80%; color: green; font-weight: bold; } td.shaded { background: rgb(255, 255, 153) } th.shaded { background: rgb(204, 204, 153) }Aqui tenemos una muestra de una tabla class=guay:
Titulo 1 | Titulo 2 Shaded |
---|---|
Tabla con estilo "guay" | sg |
Celda con estilo "shaded" | sg |
Tabla con estilo "guay" | sg |