Visita la Nueva Versión de ComoCrearTuWeb!!
Los Estilos CómoCrearTuWeb > Menú Principal > Los Estilos > Introducción
Introdución Su Utilidad

 

Opciones de Estilo

Est. Predeterminados Nuevos Estilos Para una página Para toda la Web

 

Creando Hojas de Estilos

Requerimientos Sintaxis Las Propiedades Las Unidades

 

Asociando Hojas de Estilo

Como Asociar la Hoja

 

Aplicando Hojas de Estilo

Opciones A Nivel de Bloque A Nivel de Línea De una Sola Vez

 

Ejemplos Prácticos

Antes de ... Ejemplo I Ejemplo II Ejemplo III Ejemplo IV Ejemplo V

 

Cosejos Finales

Recomendaciones Simplificando Depurando

Foro de Estilos

Al Menú Principal


Página Anticuada. Visita la nueva versión.


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...

¿Sabias que..?

Dinos Algo..

Entra en el nuevo Foro CCTW


Esta versión es antigua. Visita la nueva web de: ComoCrearTuWeb


Entra en el nuevo Foro CCTW


Mas Cosillas..

Acerca de CCTW

Foro de Posicionamiento en Buscadores
ChatCCTW  Actualizaciones  Recomendar  Colabora  Errores?  Agradécemelo  Escríbeme
Actualizada el Sábado, 15-Mar-2008 18:01 Creada y diseñada por Jorgens