El modo de fucionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que le aplicaremos a:
Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.
Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, a toda la página.
Una porción del documento, aplicando estilos visibles en un trozo de la página.
Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con margenes, sin ellos...
La potencia de la tecnología salta a la vista. Pero no solo se queda aquí, ya que además esta sintaxis CSS permite aplicar al documento formato de modo mucho más exacto. Si antes el HTML se nos quedaba corto para maquetar las páginas y teníamos que utilizar trucos para conseguir nuestros efectos, ahora tenemos muchas más herramientas que nos permiten definir esta forma:
Podemos definir la distancia entre líneas del documento.
Se puede aplicar identado a las primeras líneas del párrafo.
Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.
Y mucho más, como definr la visivilidad de los elementos, margenes, subrallados, tachados...
La sintaxis es bastante sencilla y repetitiva. Vamos a verla:
Para definir un estilo se utilizan atributos como font-size,text-decoration... segudos de dos puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de definir muchos atributos separados por punto y coma.
Ejemplo: font-size: 10pt; text-decoration: underline; color: black; |
Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos encerrados entre llaves.
Ejemplo: H1{text-align: center; color:black} |
A continuación mostraremos el código existente en la hoja de estilo usada en nuestro site.
body {
background-color: Black;
}
p,ul,ol {
color: #A9A9A9;
font-size: 70%;
font-family: Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
text-align: justify;
}
h1, h2, h3, h4, h5, h6
{
font-family: "Trebuchet MS", Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
}
h1
{
color: Silver;
font-size: 100%;
font-weight: bold;
}
h2
{
color: Silver;
font-size: 120%;
font-weight: normal;
border: 1px solid Silver;
border-width: 0px 0px 1px 0px;
padding-bottom: 0px;
}
h3
{
color: Silver;
font-size: 100%;
font-weight: bold;
border-width: 0px 0px 1px 0px;
padding-bottom: 0px;
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.nav {
color: #8B0000;
font-weight: bold;
text-decoration: none;
font-size: 80%;
font-family: Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
}
.title {
color: Silver;
font-weight: bold;
text-decoration: none;
font-size: 70%;
font-family: Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
}
.small {
color: Silver;
font-size: 60%;
font-family: Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
}
.footer {
color: Black;
font-size: 60%;
font-family: Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
text-align: center;
}
a {
color: White;
font-weight: bold;
text-decoration: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:active {
text-decoration: underline overline;
}
a:hover {
color: Red;
text-decoration: underline overline;
} |