Artículos con la etiqueta 'CSS2'

Crear un separador de tubo a través de CSS

A menudo se puede ver una serie de enlaces distribuidos horizontalmente separados por pipe "|", vertical el símbolo gráfico dell'asticella. . Además, si hay una buena escritura HTML, te das cuenta de que esta lista de enlaces - aparentemente horizontal - no son más que listas con viñetas UL o OL . De ello se desprende que, en lugar de escribir:

1
2
3
< p >
"#1" > Link 1 < / a > | < a href = "#2" > Link 2 < / a > | < a href = "#n" > Link n < / a > < un href = "# 1"> Link 1 </ un > | < un href = "# 2"> Link 2 </ un > | < un href = "# n"> Enlace n </ un >
</ p >

Sería mejor utilizar:

1
2
3
4
5
< ul >
= "#1" > Link 1 < / a >< / li > < a > < un href = "# 1"> Link 1 </ un > </ a >
= "#2" > Link 2 < / a >< / li > < a > < un href = "# 2"> Link 2 </ un > </ a >
= "#n" > Link n < / a >< / li > < a > < un href = "# n"> Enlace n </ un > </ a >
</ ul >

Continuación ...

Inserción de texto con CSS: IE7, es un mal negocio

Una vez más, cuando me encuentro escribiendo sobre las capacidades de las hojas de estilo, me veo obligado a dejar a un lado Microsoft Internet Explorer! e after . Con CSS2 introduce una característica muy interesante, la propiedad, content , se utiliza junto con los pseudo-elementos before y after . A través de este "estilo" se puede modificar el contenido de un sitio que actúan exclusivamente en el archivo CSS. Por ejemplo si escribimos:

1
content : ">>" } li: before {content: ">>"}

) avrà ogni elemento preceduto dai caratteri “>>”! Una lista con viñetas ( UL , LI ) estarán precedidas por cada elemento ">>"! Nada, por supuesto, puede ser tratada de esta manera:

1
> fogli di stile < / span >< / p > < p > puedo insertar caracteres con < periodo > hojas de estilo </ periodo > </ p >
1
content : "-->" } div p: before {content: "-->"}

La versatilidad de este elemento no se detiene ahí! Es posible utilizar otros parámetros además de la simple (pero muy útil) de texto. El elemento content , de hecho, sino que también permite que los valores especiales o url:

1
2
3
content : url ( images/quote.gif ) } p: before {content: url (images / quote.gif)}
content : close-quote } p: after {content: close-quote}
content : url ( waves/sound.wav ) } p: before {content: url (olas / sound.wav)}

Para los detalles de implementación se refieren directamente a la W3C - lástima que ni siquiera Microsoft!

Continuación ...