|
Escrito por
Alejandra
el 04/08/2006
Les pongo un fragmento de un manual de referencia de Hojas de Estilo del lenguaje DHTML! Espero que lo comentemos, que les parece?! "3. Manual de Referencia de Hojas de Estilo Comentarios en las Hojas de estilo En las hojas de estilo en cascada y en las hojas de estilo en JavaScript se pueden usar comentarios al estilo C. Por ejemplo: em {color:red;} /* el texto enfatizado será rojo */ tags.em.color="red"; /* el texto enfatizado será rojo */ JavaScript además permite usar comentarios al estilo de C++. Por ejemplo: tags.em.color="red"; // el texto enfatizado será rojo Los comentarios no pueden anidarse. Nuevas etiquetas HTML RADs DHTML 16 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 RADs DHTML 17 <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... Nuevos atributos para las etiquetas HTML RADs DHTML 18 En esta sección se enumeran los nuevos atributos que podemos utilizar con las etiquetas HTML y que son útiles para trabajar con estilos. Estos atributos pueden ser usados con cualquier etiqueta para especificar su estilo. STYLE El atributo STYLE determina el estilo del elemento al que se aplique. Por ejemplo: Sintaxis CSS <h4 style="font-weight: bold; color: red;">Cabecera h4 en rojo</h4> Sintaxis JavaScript <h4 style="fontWeight='bold'; color='red'">Cabecera h4 en rojo</h4> Resultado del ejemplo: Cabecera h4 en rojo CLASS El atributo CLASS permite aplicar una clase de estilo a un elemento. Aunque CSS y JavaScript usen sintaxis ligeramente diferentes para la definición de clases de estilos, la forma de usar dichas clases es común. Ejemplo: Sintaxis CSS <style type="text/css"> h3. Cursiva {font-style: italic;} <style> Sintaxis JavaScript <style type="text/javascript"> classes.cursiva.h3. FontStyle="italic"; <style> Uso de la hoja de estilo: <h3 class="cursiva">Cabecera h3 cursiva</h3> Se debe tener en cuenta que para los nombres de clase se distingue entre mayúsculas y minúsculas. Cada elemento HTML sólo puede utilizar una clase de estilo. RADs DHTML 19 Para especificar que una clase puede aplicarse a todos los elementos se utiliza el selector all cuando se definen las propiedades de la clase. En el siguiente ejemplo todos los elementos de clase limón serán amarillos. Sintaxis CSS <style type="text/css"> all. Limon {color: yellow;} <style> Sintaxis JavaScript <style type="text/javascript"> classes.limon.all. Color="yellow"; <style> Uso de la hoja de estilo: <h4 class="limon">Una cabecera amarilla</h4> <p class="limon">Un párrafo amarillo</p> Resultado del ejemplo Una cabecera amarilla Un párrafo amarillo ID Cuando se definen hojas de estilo, se pueden crear estilos individuales con nombre. Un elemento puede usar clases de estilos y además usar estos estilos individuales con nombre. Con ellos podemos crear excepciones a las clases de estilos para definir un estilo individual con nombre, en sintaxis CSS se utiliza el signo #, mientras que en JavaScript se utiliza el selector ID. En ambos casos se utiliza el atributo ID para especificar el estilo de un elemento HTML. En los nombres de los ID's se distingue entre mayúsculas y minúsculas. En el siguiente ejemplo se define la clase calor, que hace a los párrafos ser de color rojo y estar en negrita. También se crea un nombre de estilo, frío, que es de color azul. Se muestra cómo utilizar frío para crear una excepción a calor. Sintaxis CSS <style type="text/css"> p. Calor {color: red; font-weight: bold;} #frio {color: blue;} <style> Sintaxis JavaScript RADs DHTML 20 <style type="text/javascript"> classes.calor.p. Color="red"; classes.calor.p. FontWeight="bold"; ids.frio.color="blue"; <style> Uso de la hoja de estilo: <p class="calor">Un párrafo caliente... </p> <p class="calor" id="frio">Un párrafo frio... </p> Resultado del ejemplo: Un párrafo caliente... Un párrafo frío... Nuevas propiedades de objetos JavaScript En esta sección se exponen las nuevas propiedades de los objetos JavaScript que son útiles para definir hojas de estilos usando la sintaxis de JavaScript. TAGS Cuando se usa sintaxis JavaScript dentro del elemento <style>, podemos seleccionar estilos usando la propiedad tag del objeto document. El siguiente ejemplo utiliza la sintaxis JavaScript para especificar que todos los párrafos sean de color verde. <style type="text/javascript"> tags.p.color="green"; <style> En sintaxis CSS este ejemplo seria: <style type="text/css"> p {color: green;} <style> La propiedad tags siempre se refiere al objeto document del documento actual, por esto se puede omitir document de la expresión document. Tags. Así, las dos siguientes líneas expresan lo mismo: RADs DHTML 21 document.tags.p. Color="green"; tags=p.color.green"; Para definir estilos por defecto a todos los elementos de un documento se debe hacer a través del elemento <body>, porque todos los demás elementos heredan de este. tags.body.marginLeft="10%"; /* sintaxis JavaScript */ body {margin-left: 10%;} /* sintaxis CSS */ CLASSES Ver la sección CLASS de los nuevos atributos para las etiquetas HTML. IDS Ver la sección ID de los nuevos atributos para las etiquetas HTML. " Por Softdownload http://www.wikilearning.com/manual_de_referencia_de_hojas_de_estilo-wkccp-4129-3. Htm |
||
|
Citar |
Ver mensaje
|
|
Al escribir en el debate:
|
Compartir
