Páginas

domingo, 23 de enero de 2011

Nuevas etiquetas HTML


En esta sección se verán las nuevas etiquetas que han sido añadidas para trabajar con estilos.

<STYLE>

Las etiquetas <STYLE> y </STYLE> se usan para crear una hoja de estilo. En su interior podemos especificar estilos para elementos, definir clases e identificadores y en general establecer los estilos que se utilizarán en todo el documento. Para especificar qué tipo de sintaxis se empleará utilizaremos el atributo TYPE. Su valor por defecto es "text/css" y selecciona la sintaxis CSS. Mediante el valor "text/javascript" podemos seleccionar la sintaxis JavaScript.

Ejemplos:


Sintaxis CSS
<style type="text/css">
body {margin-left: 10%; margin-right: 10%;}
all.limon {color: yellow;}
<style>
Sintaxis JavaScript
<style type="text/javascript">
tags.body.marginLeft="10%";
tags.body.marginRight="10%";
classes.limon.all.color="yellow";
<style>

<LINK>

La etiqueta <LINK> sirve para poder utilizar en un documento una hoja de estilo que está en otro fichero.

Sintaxis CSS
<html>
<head>
<title>Titulo</title>
<link rel=stylesheet type="text/css" href="http://estilos/mi_estilo.html">
</head>
<body> ... </body>
</html>



Sintaxis JavaScript
<html>
<head>
<title>Titulo</title>
<link rel=stylesheet type="text/javascript"
href="http://estilos/mi_estilo.html">
</head>
<body> ... </body>
</html>

<SPAN>

Las etiquetas <SPAN> y </SPAN> se utilizan para delimitar el principio y el fin de una trozo de código al que se le va aplicar un estilo. En el siguiente ejemplo se aplica un estilo a una parte del texto:

Este texto es normal. <span style="font-weight: bold; color: green;">Este texto es diferente gracias a <span>.</span> De nuevo el texto es normal.

El resultado del ejemplo es:

Este texto es normal. Este texto es diferente gracias a <span>. De nuevo el texto es normal.

Veamos otro ejemplo. Este hace diferentes las letras iniciales:

<style type="text/css">
all.letron {font-family: times; font-size: 200%; font-weight: bold;}
</style>

<p><span class="letron">E</span>n un lugar de la Mancha...</p>

Resultado:

En un lugar de la Mancha...

No hay comentarios:

Publicar un comentario

Siguenos en Facebook!