¿Para
qué sirve?
CSS se utiliza para dar estilo a
documentos HTML
y XML, separando el contenido de la
presentación. Los Estilos
definen la forma de mostrar los elementos HTML y XML. CSS permite a los
desarrolladores Web controlar el estilo y el formato de múltiples páginas Web
al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la
CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese
elemento.
¿Cómo funciona?
CSS
funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más
elementos. Las hojas de estilo están compuestas por una o más de esas reglas
aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y
la declaración. A su vez la declaración está compuesta por una propiedad y el
valor que se le asigne.
h1 {color: red;}
h1 es el
selector
{color: red;} es la declaración
El selector funciona como enlace entre el
documento y el estilo, especificando los elementos que se van a ver afectados
por esa declaración.
La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector
La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector
h1 indica que todos los
elementos h1
se verán afectados por la declaración donde se establece que la propiedad color va a
tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén
vinculados a esa hoja de estilos.
Las tres formas más conocidas de dar estilo a un
documento son las siguientes:
■ Utilizando una hoja de estilo externa que estará
vinculada a un documento a través del elemento <link>, el cual debe ir
situado en la sección <head>.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
<title>Título</title>
<link rel="stylesheet"
type="text/css"
href="http://www.w3.org/css/officeFloats.css" />
</head>
<body>
.
.
.
.
</body>
</html>
■ Utilizando el elemento
<style>, en el interior del documento al que se le
quiere dar estilo, y que generalmente se situaría en la sección <head>. De esta forma los estilos serán reconocidos
antes de que la página se cargue por completo.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
<title>hoja de estilo
interna</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New
Roman", serif;
color: red;
background-color: #d8da3d;
}
h1 {
font-family: Helvetica, Geneva, Arial,
sans-serif;
}
</style>
</head>
<body>
<h1>Aquí se aplicará el estilo de
letra para el Título</h1>
</body>
</html>
■ Utilizando estilos directamente
sobre aquellos elementos que lo permiten a través del atributo
<style> dentro de <body>. Pero
este tipo de definición del estilo pierde las ventajas que ofrecen las hojas de
estilo al mezclarse el contenido con la presentación.
0 comentarios:
Publicar un comentario