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.
jueves, 27 de enero de 2011
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.
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.
lunes, 17 de enero de 2011
Herencia de Propiedades de Formato de Bloque
Las características de anchura, márgenes, bordes y separadores de los elementos padre no son heredadas por sus hijos. Sin embargo, a primera vista, a veces puede parecer que sí son heredados, pues los valores de los elementos padre afectan a sus elementos hijos. Supongamos que a un elemento <div> le fijamos un margen izquierdo de valor 10 puntos. De esta forma la caja que le rodea se encuentra desplazada 10 puntos hacia la derecha. Además supondremos que no tiene bordes ni separadores. Todos sus elementos hijo estarán pegados a su margen izquierdo, que como está 10 puntos desplazado hacia la derecha, causará un efecto parecido si ellos mismos también tuviesen borde izquierdo.
Pensemos en qué ocurriría si los hijos heredasen estas características de sus padres. El bloque <div> está indentado 10 puntos. Sus hijos a su vez estarán indentados otros 10 puntos con respecto a él, con lo cual el aspecto global es que los hijos estarían indentados 20 puntos.
Separadores
Los separadores indican la distancia entre el borde de un elemento y su contenido. El separador se muestra incluso si el borde del elemento no lo hace. Se puede fijar el tamaño de los separadores de un elemento de bloque utilizando las siguientes propiedades.
Sintaxis CSS
- padding-top
- padding-bottom
- padding-left
- padding-right
Sintaxis JavaScript
- paddingTop
- paddingBottom
- paddingLeft
- paddingRight
domingo, 16 de enero de 2011
Bordes
Se puede fijar la anchura del borde que rodea un elemento de bloque usando las siguientes propiedades.
Sintaxis CSS
- border-top-width
- border-bottom-width
- border-left-width
- border-right-width
- border-width
Sintaxis JavaScript
- borderTopWidth
- borderBottomWidth
- borderLeftWidth
- borderRightWidth
- borderWidths()
Se puede fijar el estilo del borde usando la propiedad border-style de CSS o la propiedad borderStyle de JavaScript. Los valores que pueden tomar son solid, double, groove, ridge, inset y outset.
Márgenes
Los márgenes indican la separación entre el borde del bloque y el borde del documento, o elemento padre. Se pueden fijar los márgenes derecho, izquierdo, superior e inferior. Para ello se deben utilizar los siguientes nombres de propiedad:
Sintaxis CSS
- margin-top
- margin-bottom
- margin-left
- margin-right
- margin
Sintaxis JavaScript
- marginTop
- marginBottom
- marginLeft
- marginRight
- margins()
En vez de especificar los dos márgenes se puede utilizar la propiedad width. Se pueden utilizar valores específicos, como 200 puntos, o valores relativos, como el 50% de la anchura del elemento padre.
Es redundante fijar los dos márgenes y la anchura, pues dos de estos tres valores implican el tercero. Para especificar los márgenes por defecto para un documento se deben especificar para la etiqueta <body>. En el siguiente ejemplo se fijan dichos márgenes en 20 puntos a derecha e izquierda.
Sintaxis CSS
<style type="text/css">
body {margin-left: 20pt; margin-right: 20pt;}
</style>
Sintaxis JavaScript
<style type="text/javascript">
with (tags.body) { marginLeft="20pt"; maginRight="20pt"; }
</style>
miércoles, 12 de enero de 2011
Propiedades de Formato de Elementos de Bloque
En esta sección se exponen las opciones de formato de los elementos de bloque. Los elementos de bloque comienzan en una nueva línea. Por ejemplo, <h1> y <p> son elementos de bloque, pero <em> no lo es. Comenzaremos presentando unos ejemplos que muestren las posibilidades de formato de los elementos de bloque. Después se discutirá cada opción de formato en detalle. Para finalizar se echará un vistazo a su comportamiento respecto a la herencia de propiedades.
Especificación de Estilos para Elementos Individuales
De igual forma que se pueden definir hojas de estilo, podemos utilizar el atributo style de cualquier etiqueta HTML para definir un estilo que le será aplicado solamente a ella. Esta aproximación puede ser útil en situaciones en que necesitemos utilizar un estilo en un sitio y no sea necesario volver a utilizarlo. Sin embargo, en general, es mejor definir todos los estilo usados en un documento en un único lugar. Así es más fácil realizar modificaciones en su estilo sin tener que recorrerlo. Si se necesita hacer algún cambio sólo es necesario hacerlos una vez y el cambio automáticamente se aplica a todo el documento. A veces, sin embargo, se necesita especificar el estilo de un elemento y la forma más fácil de hacerlo es mediante el atributo style. En el ejemplo se especifica un estilo para el elemento <p>. También se muestra el uso de <span> para aplicar un estilo a varios elementos.
viernes, 7 de enero de 2011
Uso de Criterios de Selección Contextual
Se pueden definir estilos para utilizarse con todos los elementos HTML de una clase particular. Si se necesita un mayor control sobre el uso de estilos podemos hacer que estos se apliquen selectivamente. Podríamos, por ejemplo, querer que el texto enfatizado sea de color verde, pero sólo si el texto enfatizado está en el interior de un título de tamaño 4. Se puede conseguir este nivel de control sobre la aplicación de estilos usando los criterios de selección contextual. Estos, en general, permiten especificar que un estilo se aplicará sólo si un elemento se encuentra anidado dentro de un elemento de otro cierto tipo. Mediante la sintaxis, CSS esto se consigue listando ordenadamente los elementos HTML antes de las llaves. Con sintaxis JavaScript es necesario utilizar el método contextual().
Definición de Estilos Individuales con Nombre
Definición de Estilos Individuales con Nombre
Se pueden crear estilos individuales con nombre. Los elementos HTML pueden utilizar una clase de estilo y un estilo individual con nombre. Normalmente estos se utilizan para expresar excepciones de estilo. Por ejemplo, si un párrafo utiliza la clase de estilo PRINCIPAL, podemos usar el estilo con nombre AZUL1 para expresar alguna diferencia respecto a la clase PRINCIPAL.
miércoles, 5 de enero de 2011
Definición de Clases de Estilo
Si un documento incluye o se enlaza con una hoja de estilo, todos los estilos definidos en dicha hoja podrán utilizarse en cualquier punto del documento. Si la hoja de estilo especifica el estilo de una etiqueta HTML, entonces todas las etiquetas de ese tipo en el documento utilizarán dicho estilo. Puede haber casos en que interese aplicar un estilo selectivamente. Por ejemplo, se puede querer que los párrafos de un documento sean unas veces rojos y otras veces azules. En este caso definir un estilo que se aplique a todos los párrafos no será la solución correcta. Podemos obtener el efecto deseado definiendo una clase de estilo y especificando cuando queremos que sea utilizada. Para aplicar una clase de estilo a un elemento HTML, primero se debe definir la clase en la hoja de estilo, y después se utilizará empleando el atributo class en cualquier elemento.
Suscribirse a:
Entradas (Atom)