elementos HTML. Los estilos se añadieron en HTML 4.0 con el fin de separar el contenido
de las páginas de su aspecto.
Las hojas de estilo en cascada (Cascading Style Sheets – CSS) son documentos que nos
sirven para definir una serie de estilos a aplicar sobre determinada página, ahorrando
mucho trabajo. Una hoja de estilos CSS está formada por un conjunto de reglas, forma-
das por selectores y un bloque de estilos, con el formato que se aplicará a los elementos
del documento que coincidan con cierto selector. Estos bloques de estilo se definen entre
llaves, y están formados por declaraciones de pares del tipo propiedad: valor.
Selectores en CSS
Los selectores marcan qué elementos se verán afectados por cada estilo, pudiendo afec-tar a varios elementos a la vez. Para indicar los elementos que se verán afectados por
cierto estilo, lo podemos hacer de varias formas:
1. A través del tipo de elemento, indicando como selector el elemento HTML.
2. A través de su clase (atributo HTML class), en cuyo caso el selector será el nombre de
la clase precedida del punto (.).
3. A través de su identificador (atributo HTML id), en cuyo caso el selector consistirá en
el id precedido de la almohadilla (#).
Ejemplo: HTML y CSS
Documento HTML<html>
<body>
<h1 class=”mititulo”>
Primer ejemplo en CSS</h1>
<p>Esto es un párrafo normal
</p>
<p id=”miparrafo”>
Y esto es mi párrafo
personalizado</p>
</body>
</html>
CSS asociado
body{
background-color: yellow;
font-family: ubuntu,arial,
sans-serif;
}
.mititulo{
font-size: 30px;
background-color: #ffffff;
}
#miparrafo{
font-style:italic;
}
Como puedes observar, hemos añadido diferentes estilos de fuente y colores para nues-
tros elementos. Fíjate que cuando referenciamos un color podemos hacerlo a través de
su nombre (yellow, por ejemplo), o bien a través de sus componentes RGB (siglas de Red,
Green y Blue) indicadas en forma hexadecimal (#FFFFFF).
Dónde ubicar el CSS
Podemos asociar las hojas de estilo a nuestra página de diferentes modos: en línea,
como una hoja interna o como una hoja externa.
Añadir estilos en línea. Consiste en añadir directamente los estilos a un elemento
HTML a través de la propiedad style. En este caso, no debemos añadir ningún se-
lector, ya que el estilo se añade directamente al elemento:
<h1 style=”background-color: blue; text-color: white;”>...
Los estilos en línea suelen utilizarse cuando un estilo se aplica únicamente a un ele-
mento.
Añadir definiciones de estilos como una hoja interna. Se utilizan cuando ciertos estilos
se aplican únicamente a los elementos de una página. Los estilos se definen en la
cabecera de la página mediante la etiqueta <style> del siguiente modo:
<head><style type=”text/css”>
p {color:#ffffcc; margin-left: 20px;}
body {background-image: url (“images/background.png”);}
</style></head>
Añadir estilos en una hoja externa. Es la forma ideal cuando queremos aplicar un
estilo común a varias páginas. Definiremos nuestros estilos en un fichero con extensión
.css que enlazaremos mediante la etiqueta <link> en la cabecera de la página del
siguiente modo:
<head>
<link rel=”stylesheet” type=”text/css” href=”miestilo.css” />
</head>
No hay comentarios:
Publicar un comentario