Al un explorador leer los estilos definios en documento, este le da formato y lo presenta de la manera especificada.
Al un explorador leer los estilos definios en documento, este le da formato y lo presenta de la manera especificada. Las hojas de estilo pueden ser insertadas en un documento de la siguientes maneras (Nota - No tienen que usar un manera especifica, ya que se pueden usar las tres a la vez, solo que estas tres (como dicho anteriormente, seran interpretadas como una sola hoja de estilo).
Hoja de Estilo Externa
Es muy sencillo, escribimos todo nuestro codigo CSS en un archivo con extension ".css". Si recordamos, en un documento HTML, los estilos se escriben entre los elementos
<style>...</style>, sin embargo, si vamos a usar una hoja de estilo esterna esta no debe de contener ningun elemento de HTML, es decir que los elementos
<style>...</style> no deben de ser incluidos, o de lo contrario dara un error y no funcionaran los estilo.
Para incluir la hoja de estilo externa usamos el elemento <link> de HTML (fijense que este elemento no se cierra). Por ejemplo:
Code:
| <link rel="stylesheet" type="text/css" href="nom_archivo.css"> |
Un ejemplo del codigo de esa hoja de estilo seria:
nom_archivo.css -> que contiene el siguiente código
Code:
h1 {
font-family: Arial, Verdana;
font-size:12pt;
font-weight: bold;
color:#f00;
text-align:center;
}
p {
padding-top:4pt;
padding-bottom:4pt;
text-align:justify;
color:#fff;
background-color:#000;
}
|
Debes de siempre recordar no dejar espacios entre los valores y las unidades, ya que de lo contrario el valor que especifiques no funcionara en Mozzila o Netscape, pero si en IE. Es por esto que de consejo les digo que diseñen para Mozilla, ya que requiere mas estandarizacion.
Hoja de Estilos Interna
Bueno, la única diferencia notable entre este método y el anterior es que aqui incluimos el estilo dentro del archivo. De manera que, declararias los estilos entre los elementos
<style>...<style>, que a la vez se coloca entre los elementos
<head>...</head>. Por ejemplo:
Code:
<html>
<head>
<title>Titulo</title>
<style type="text/css">
<!--
h1 {
font-family: Arial, Verdana;
font-size:12pt;
font-weight: bold;
color:#f00;
text-align:center;
}
p {
padding-top:4pt;
padding-bottom:4pt;
text-align:justify;
color:#fff;
background-color:#000;
}
-->
</style>
</head>
<body>
Cuerpo del Documento
</body>
</html> |
Estilos Directos
Con esto me refiero a que se define el estilo de un elemento dentro del mismo. Es muy sencillo, ya que es los mismo, sólo que lo defines como un atributo del elemento.
Ejemplo:
Code:
| <p style="font-family:Verdana; font-size:16px;">Texto</p> |
Otra forma de escribir esto, si quieres mantener el orden como los ejemplos más arriba, puedes escribir:
Code:
<p style="
font-family:Verdana;
font-size:16px;
">Texto</p> |
Sinopsis
Bueno, fácil ¿no?. Si ponen atención y se fijan, verán que las similitudes entre CSS y HTML son muchas. Al terminar de leer esto ya deberán de ser capazes de utilizar cualquiera de las tres formas de definir hojas de estilo. Sólo me queda un punto por aclarar. Si recuerda, en
CSS 101: Introducción a CSS les explique las prioridades de CSS. Y tambien les dije el efecto cascada, el cual es una de las partes más importantes de CSS. Si no recuerdan bien, leeanlo de nuevo, aqui les dejo el link para que lo lean: »
CSS 101: Introducción a CSS. Ahora sólo me queda enseñarles los atributos de CSS. Si quieren un ejemplo del efecto cascada, haganmelo saber, ya que puede que aun no lo agarren bien.