CSS nivel 1

En el momento de definir los estilos debemos tener en cuenta que estos se pueden declarar directamente sobre la etiqueta HTML o que podemos definirlos en su conjunto para toda la pgina HTML.

.Definicin en la propia etiqueta html

La sintaxis bsica para especificar un estilo en una etiqueta determinada es:

<etiqueta STYLE="propiedad:valor;....">... </etiqueta>

Donde etiqueta representa un TAG estandar del HTML y la palabra STYLE es el atributo que indica que a dicha etiqueta le vamos a asociar un estilo. El resto ya es la definicin propia del estilo que viene definido por un par propiedad:valor separados entre si por dos puntos y del resto de pares por un punto y coma.

En propiedad indicamos que caracteristica (tipo de fuente, color, etc...) queremos cambiar y en valor el valor que le damos.

Por ejemplo si a un parrafo le queremos dar un tamao de fuente 10 y un margen izquierdo de 20 pts.

<P STYLE="font-size:10pt; margin-left:20pt;"> 
    Mi Primer parrafo con Estilo
</P>

Pero la asignacin individual a cada etiqueta de los estilos puede resultar un poco pesada tambin contamos con la posibilidad de definirlos de forma global para toda la pgina.

.Novedades

Para definir una hoja de estilos de forma global en un documento HTML se emplea la etiqueta <STYLE> de la siguiente manera:

<STYLE TYPE="text/css">
  <!- 
  ......
  Estilos y sus propiedades
  ......
  -->
</STYLE>

Observa como la definicin de estilos va encerrada entre comentarios para asegurar la compatibilidad con los browsers que no las soporten. Esta sintaxis funciona tanto en Explorer 3.X y superiores como en Opera, Mozilla y Netscape 4, aunque en este ltimo se pueden definir tambin de forma propietaria utilizando Javascript.

La defincin del estilo se realiza de forma similar a la indicada arriba:

etiqueta {propiedad:valor; .........}

con la diferencia de que colocamos entre llaves {} la defincin del estilo.

Un ejemplo tpico sera:

<STYLE TYPE="text/css">
<!-
	H1 {color:blue;}
	P {font-size:10pt; marginleft:20pt;}
-->
</STYLE>

donde estamos indicando que todo el texto que se encuentra entre las etiquetas <H1></H1> sera de color azul , y el que esta entre las etiquetas <P></P> sera de un tamao de 10 ptos. y tendra un margen izquierdo de 20 ptos.

Otro detalle interasante es que podemos introducir comentarios en un hoja de estilos mediante las etiquetas /*........*/ de la misma manera que se hace por ejemplo en el lenguaje C.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.