Estilos Para Una Sola Página
Cuando queremos aplicar un estilo concreto a un elemento que solo aparecerá en una o dos de nuestras páginas, no es necesario (aunque también se puede hacer) incluirla en la Hoja de Estilo, sino que basta con definirla en la propia página.
Por ejemplo, imaginaos que en una página de nuestra web queremos hacer una lista donde aparezcan, yo que se, emm, los números de teléfono de nuestros amigos, y además queremos que aparezan con un fondo de color verde, con los números en color blanco, en cursiva, negrita y con un tamaño muy grandote. (una tontería, pero para el ejemplo nos servirá).
La opción mala seria especificar para cada número de teléfono todas esas características, lo cual sería tedioso. Os voy a indicar como se haría usando los Estilos. No os indico como definir el color, tipo de letra, fondo, etc para no agobiar. Eso os lo mostraré más adelante.
En primer lugar escogemos un nombre para ese elemento (a este nombre se le llama selector). Le llamaremos telefono, para ser originales. Esto es similar al selector rojo del ejemplo aquel que os puse al principio de estas lecciones.
En segundo lugar hay que definir sus características (a esto se le llama declaración).
Al conjunto de selector y declaración se le llama a su vez Regla de Estilo o mejor dicho Regla CSS.
La regla CSS la incluiremos en la cabecera de la página, ya sabéis, entre <HEAD> y </HEAD> e irá encerrada entre las estiquetas <STYLE> y </STYLE>.
Os muestro ahora el aspecto del código de una página que define el estilo telefono y lo usa en una lista. No seais flojos, copiadlo en el NotePad o Block de Notas tal y como os he enseñado y veréis su utilidad. Fijaos que lo que encierra el formato de .telefono no son parentesis ( ) sino corchetes { } (tecla "Alt Gr" y las de al lado de la "ñ", a la vez).
<HTML>
<HEAD>
<TITLE> Listin de Telefonos </TITLE>
<STYLE>
.telefono { font: italic bold 12px ;
background-color: green ;
color: white ; }
</STYLE>
</HEAD>
<BODY>
<p>Los telefonos de mis amigos: </p>
<p>Jorgito: <SPAN CLASS="telefono">968 123 456</SPAN></p>
<p>Martita: <SPAN CLASS="telefono">945 321 654</SPAN></p>
<p>Jaimito: <SPAN CLASS="telefono">676 987 654</SPAN></p>
<p>Pablito: <SPAN CLASS="telefono">606 123 456</SPAN></p>
</BODY>
</HTML>
VER RESULTADO
Como podréis comprobar mirando el código, en la Cabecera (entre <HEAD> y </HEAD>)se definen las características o formato del selector telefono y en el Cuerpo (entre <BODY> y </BODY>) simplemente se indica que cada número de teléfono debe ser de esa forma, mediante la etiqueta <span class="telefono">676 398 787</span>.
Daos cuenta de que aunque el selectos se define poniendole un punto delante (.telefono), a la hora de indicar a un elemento que debe mostrase con ese tipo, el punto no se pone (...CLASS="telefono">) aunque si que se escribe entre comillas.
Sin duda el código se ha simplificado notablemente frente a la opción mala. Además, si un buen día queremos que el tamaño de letra de los teléfonos sea distinto, o variar el color del texto o lo que sea, en lugar de cambiar esas características para cada telefono, solo hay que variar el código que hay entre <STYLE> y </STYLE> lo cual es otra gran ventaja, no?
En este ejemplo se ve aún mejor uno de los objetivos de las Hojas de Estilo: separar el contenido (que va dentro del BODY) del aspecto que deben tener (que va dentro de STYLE). Como ya os he indicado anteriormente, esto evitará que al visitar la página con otros Navegadores, la página se deforme o aparezca de una forma rara (en el mejor de los casos).
Tened en cuenta que los elementos que definamos de este modo no los podemos usar en otras páginas de nuestra web, a menos que los volvamos a definir en la cabecera de aquellas páginas de la misma forma que lo hemos hecho. Si lo que queremos es poder usarlas en todas ellas definiendolas una sola vez usaremos la segunda buena opción que veremos a continuación.
A que ya la cosa se va alegrando? Pues aún no habéis visto nada...
|
Introdución