PayBox
Hace 13 años
domingo, 31 de enero de 2010
domingo, 3 de enero de 2010
CSS-Capitulo 7
A veces querrás aplicar un estilo especial a un elemento concreto o a un grupo concreto de elementos. En esta lección examinaremos cómo usar los atributos
¿Como se puede dar color a un título concreto de forma diferente a los otros títulos de tu sitio web? ¿Cómo se pueden agrupar los enlaces en diferentes categorías y dar a cada categoría un estilo especial? Estas dos preguntas son un ejemplo de las preguntas a las que daremos respuesta en esta lección.
Agrupación de elementos con el atributo
Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El código HTML sería el siguiente:
Así pues, queremos que los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la página web sigan siendo azules.
Para lograr esto, dividiremos los enlaces en dos categorías. Esto se hace asignando una clase para cada tipo de enlace, usando el atributo
Intentemos especificar algunas clases en el ejemplo anterior:
A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.
Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que pertenecen a una clase unsando.nombredelaclase en la hoja de estilo del documento.
Identificación de un elemento usando el atributo
Además de agrupar elementos, podrías necesitar identificar un elemento único. Esto se hace con el atributo
Lo que hace especial al atributo
El código anterior podría hacer referencia a encabezados de cualquier documento dividido en capítulos y párrafos. Sería normal asignar un
Digamos que el título del capítulo 1.2 tiene que estar en rojo. Usando el código CSS necesario, se podría hacer así:
Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento específico usando
En la lección siguiente, examinaremos dos elementos HTML muy usados en relación con CSS:
class e id para especificar propiedades para los elementos seleccionados.¿Como se puede dar color a un título concreto de forma diferente a los otros títulos de tu sitio web? ¿Cómo se pueden agrupar los enlaces en diferentes categorías y dar a cada categoría un estilo especial? Estas dos preguntas son un ejemplo de las preguntas a las que daremos respuesta en esta lección.
Agrupación de elementos con el atributo class
Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El código HTML sería el siguiente:Así pues, queremos que los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la página web sigan siendo azules.
Para lograr esto, dividiremos los enlaces en dos categorías. Esto se hace asignando una clase para cada tipo de enlace, usando el atributo
class.Intentemos especificar algunas clases en el ejemplo anterior:
A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.
Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que pertenecen a una clase unsando.nombredelaclase en la hoja de estilo del documento.
Identificación de un elemento usando el atributo id
Además de agrupar elementos, podrías necesitar identificar un elemento único. Esto se hace con el atributo id.Lo que hace especial al atributo
id es que no pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene que ser único. En cualquier otro caso, se debería usar el atributo class en su lugar. Ahora, examinemos un ejemplo de un posible uso del atributo id:El código anterior podría hacer referencia a encabezados de cualquier documento dividido en capítulos y párrafos. Sería normal asignar un
id a cada capítulo de la siguiente manera:Digamos que el título del capítulo 1.2 tiene que estar en rojo. Usando el código CSS necesario, se podría hacer así:
Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento específico usando
#nombredelidentificador en la hoja de estilo del documento.Resumen
En esta lección hemos aprendido que usando los atributosclass e id podrás especificar propiedades para elementos específicos.En la lección siguiente, examinaremos dos elementos HTML muy usados en relación con CSS:
"span" y "div".
sábado, 2 de enero de 2010
CSS-Capitulo 4
Ahora vamos a aprender como crear enlaces en CSS.La novedad respecto a los enlaces es que CSS te permite definir estas propiedades de forma diferente dependiendo del estado del mismo, es decir, si el enlace se ha visitado, no se ha visitado, si es el enlace activo o si el cursor está sobre dicho enlace. Esto permite añadir efectos divertidos y útiles a tu sitio web. Para controlar estos efectos se usan lo que se ha denominado como pseudo-clases.
Veamos un ejemplo. Como ya sabes, los enlaces se especifican en HTML con la etiqueta
Todo enlace tiene diferentes estados. Por ejemplo, visitado o no visitado. Puedes usar una pseudo-clase para asignar diferentes estilos a los enlaces visitados y no visitados.
Usa
Vamos a repasar ahora cada una de las cuatro pseudo-clases con ejemplos y más explicaciones.
Pseudo-clase
La pseudo clase
En el ejemplo de código que sigue, los enlaces no visitados tendrán un color azul claro.
Pseudo-clase
La pseudo clase
Pseudo-clase
La pseudo clase
El código de este ejemplo hace que el color de fondo para los enlaces activos sea amarillo:
Pseudo-clase
La pseudo clase
Esta pseudo-clase se puede usar para crear efectos interesantes. Por ejemplo, si queremos que nuestros enlaces sean de color naranja y estén en cursiva cuando el cursor pase sobre ellos, el código CSS que utilizaremos será el siguiente:
Estos dos ejemplos dan una idea sobre las posibilidades casi infinitas al combinar diferentes propiedades. Ya puedes ir creando tus propios efectos... ¡inténtalo!
Deberías considerar cuidadosamente la necesidad de quitar el subrayado, pues esto podría disminuir la usabilidad de tu sitio web de forma significativa. La gente está acostumbrada al subrayado azul de los enlaces en las páginas web y saben que pueden hacer clic en ellos. Si cambias el subrayado y el color de los enlaces, existe una buena posibilidad de que los usuarios se confundan y, por lo tanto, no saquen todo el provecho al contenido de tu sitio web.
Dicho esto, es muy sencillo quitar el subrayado de los enlaces. Como recordarás de la lección 5, la propiedad
De forma alternativa, puedes establecer la propiedad
¿Qué es una pseudo-clase?
Una pseudo-clase te permite tener en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML.Veamos un ejemplo. Como ya sabes, los enlaces se especifican en HTML con la etiqueta
"a". Por lo tanto, podemos usar a como selector en CSS:Todo enlace tiene diferentes estados. Por ejemplo, visitado o no visitado. Puedes usar una pseudo-clase para asignar diferentes estilos a los enlaces visitados y no visitados.
Usa
a:link y a:visited para enlaces visitados y no visitados, respectivamente. A los enlaces activos se les aplica la pseudo-clase a:active, y a:hover cuando el cursor se coloca o pasa sobre el enlace.Vamos a repasar ahora cada una de las cuatro pseudo-clases con ejemplos y más explicaciones.
Pseudo-clase a:link
La pseudo clase :link se usa para enlaces que dirigen a páginas que el usuario no ha visitado.En el ejemplo de código que sigue, los enlaces no visitados tendrán un color azul claro.
Pseudo-clase a:visited
La pseudo clase :visited se usa para enlaces que dirigen a páginas que el usuario ya ha visitado. Por ejemplo, el código siguiente hará que todos los enlaces visitados sean de color púrpura oscuro:Pseudo-clase a:active:
La pseudo clase :active se usa para enlaces que están activos.El código de este ejemplo hace que el color de fondo para los enlaces activos sea amarillo:
Pseudo-clase a:hover
La pseudo clase a:hover se usa cuando el puntero del ratón pasa por encima de un enlace.Esta pseudo-clase se puede usar para crear efectos interesantes. Por ejemplo, si queremos que nuestros enlaces sean de color naranja y estén en cursiva cuando el cursor pase sobre ellos, el código CSS que utilizaremos será el siguiente:
Ejemplo 1: Efecto cuando el cursor está encima de un enlace
Es bastante popular crear diferentes efectos cuando el cursor está encima de un enlace. Por lo tanto, examinaremos unos cuantos ejemplos más relacionados con la pseudo-clase:hover.Example 1a: Espaciado entre letras
Como recordarás de la lección 5, el espaciado entre los caracteres se puede ajustar usando la propiedadletter-spacing. Esta propiedad se puede aplicar a los enlaces para crear un efecto especial:Ejemplo 1b: MAYÚSCULAS y minúsculas
En la lección 5 examinamos la propiedadtext-transform, que sirve para intercambiar entre letras en mayúscula y minúscula. Esto se puede usar también para crear un determinado efecto en los enlaces:Estos dos ejemplos dan una idea sobre las posibilidades casi infinitas al combinar diferentes propiedades. Ya puedes ir creando tus propios efectos... ¡inténtalo!
Ejemplo 2: Quitar el subrayado de los enlaces
Una pregunta muy recurrente es: ¿cómo quito el subrayado de los enlaces?Deberías considerar cuidadosamente la necesidad de quitar el subrayado, pues esto podría disminuir la usabilidad de tu sitio web de forma significativa. La gente está acostumbrada al subrayado azul de los enlaces en las páginas web y saben que pueden hacer clic en ellos. Si cambias el subrayado y el color de los enlaces, existe una buena posibilidad de que los usuarios se confundan y, por lo tanto, no saquen todo el provecho al contenido de tu sitio web.
Dicho esto, es muy sencillo quitar el subrayado de los enlaces. Como recordarás de la lección 5, la propiedad
text-decoration se puede usar para determinar si el texto aparece subrayado o no. Para quitar el subrayado, establece el valor de text-decoration a none.De forma alternativa, puedes establecer la propiedad
text-decoration junto con otras propiedades para las cuatro pseudo clases.Resumen
En esta lección has aprendido nociones relativas a las pseudo-clases, a la vez que has usado algunas de las propiedades de lecciones anteriores. Esto debería darte una idea de algunas de las posibilidades que ofrece CSS.
Suscribirse a:
Entradas (Atom)
