 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Pseudo-element en CSS
Vamos a conocer los Pseudo-elementos en hojas de estilo en cascada, que sirven para definir estilos para la primera línea o letra de un texto.
22/4/05 -
Los pseudo-element (pseudo-elementos, si se me permite la traducción al castellano) sirven para aplicar estilos a partes más específicas dentro de una etiqueta. Es decir, para el ejemplo concreto de la etiqueta párrafo, con los pseudo-elementos podemos definir el estilo para la primera letra del párrafo y para la primera línea.
Pseudo-element first-letter
Un efecto habitual de algunas publicaciones, por ejemplo las de cuentos para niños, es hacer más grande la primera letra de una página y decorarla de alguna manera. Con CSS podemos aplicar estilos específicos y hacer, por ejemplo, que esa primera letra sea más grande y tenga un color distinto del resto del párrafo.
Se utiliza de esta manera:
P:first-letter {
font-size: 200%;
color: #993333;
font-weight: bold;
}
Así estamos asignando un tamaño de letra 200% más grande del propio del párrafo. También estamos cambiando el color de esa primera letra.
De entre todas las propiedades de estilos, sólo algunas se pueden aplicar a los pseudo-elementos first-letter. Son las siguientes, según la especificación del W3C: font properties, color properties, background properties, 'text-decoration', 'vertical-align' (sólo si 'float' está asignado a 'none'), 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow' y 'clear'.
Se puede ver un ejemplo de aplicación de un estilo con first-letter.
Pseudo-element first-line
Como adelantaba, este pseudo-elemento, sirve para asignar un estilo propio a la primera línea del texto. Es posible que hayamos visto alguna revista o periódico que utilice este estilo para remarcar las primeras líneas del párrafo. Un ejemplo de su uso sería el siguiente:
P:first-line {
text-decoration: underline;
font-weight: bold;
}
Las propiedades de estilos que se pueden aplicar al pseudo-element first-line son las siguientes: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' y 'clear'.
Se puede ver un ejemplo de aplicación de un estilo con first-line.
Uso de clases con los pseudo-elementos
En determinadas ocasiones podemos necesitar crear una clase (class) de CSS a la que asignar los pseudo-elementos, de modo que estos no se apliquen a todas las etiquetas de la página. Por ejemplo, podemos desear que solamente se modifique el estilo de la primera línea del texto en algunos párrafos y no en todos los de la página.
Una clase se define con el nombre de la etiqueta seguido de un punto y el nombre de la clase. Si además deseamos definir un pseudo-elemento, deberíamos indicarlo a continuación, con esta sintaxis:
P.nombreclase:first-line {
font-weight: bold;
}
Pseudo-elementos en CSS2
Aparte de first-line y first-letter, en las especificaciones de CSS 2 existen otros pseudo elementos que voy a nombrar para conocimiento de los lectores, aunque profundizaré en su uso. Se tratan de before y after y sirven para insertar "contenidos generados" antes y después del elemento al que asignemos estos pseudo-element.
Un ejemplo de ello es:
P.nota:before {
content: "Nota: "
}
Así se ha definido una clase de párrafo llamada "note" en la que se indica que antes de la propia nota se debe incluir el texto indicado, osea, "Nota: ".
Atención a la compatibilidad con CSS2, que, por lo menos para estos elementos, no está soportada en versiones 6 de Internet Explorer. Firefox, en cambio, sí que es compatible con estas características de CSS2.
+ 1 categoria relacionada
+ 1 comentario (Añadir)
+ 1 comentario no revisado
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestra un comentario revisado |
Los Pseudo-elements (Pseudo elementos, si se permite la traduccion xD) y las pseudo-class (pseudo clases) son "Case Sensitive" , es decir, que no es lo mismo escribirlas en minusculas que en mayusculas. Se interpretarán como 2 pseudo-elements y/o pseudo-class distintas, aun conteniendo los mismos valores.
2 o más pseudo-class se pueden aplicar a un objeto al mismo tiempo(tabla, capa, lista, parrafo, etc...) Existe un "orden de cascada" que atiende a varios criterios como por ejemplo el orden alfabetico de la declaracion de los pseudo-class, la prioridad entre las clases (aunque se consideran objetos normales), pero ocurre como con los operadores, que hay prioridad de ejecucion (primero aritmeticos,de comparacion y por ultimo logicos). En los pseudo-class y pseudo-elements ocurre igual, aunque desconozco el criterio en concreto.
Un saludo.
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
