61 votos

Características ocultas de CSS

Definitivamente he recogido algunos consejos útiles en las cuestiones ocultas características de estilo relativas PHP y XHTML.

Así que aquí está uno para cubrir CSS. Aunque es fácil de recoger, se necesita un poco de tiempo para aprender sobre todo, su comportamiento por defecto, propiedades, etc.

Aquí están algunos para iniciar la pelota

 @charset "UTF-8"; /* set the character set. must be first line as Gumbo points out in comments */

.element {
        /* takes precedence over other stylings */
        display: block !important;

        /* mozilla .... rounded corners with no images */
        -moz-border-radius: 10px; 

        /* webkit equivalent */
        -webkit-border-radius: 10px 
}
 

Estos no son tanto escondido, pero su uso no es a menudo muy extendida. ¿Qué consejos, trucos, características raras has descubierto con CSS?

58voto

Gumbo Puntos 279147

Se puede visualizar el documento title elemento:

 head, title {
    display: block;
}
 

39voto

Binoj Antony Puntos 7519

Aplicar múltiples estilos / clases a un elemento como este class="bold red GoldBg"

 <html><head>
<style>
.bold {font-weight:bold}
.red {color:red}
.GoldBg {background-color:gold}
</style>
</head><body>
<p class="bold red GoldBg">Foo.Bar(red)</p>
</body></html>
 

38voto

Steve Fenton Puntos 55265

Me gusta mucho los sprites CSS.

En lugar de tener 20 imágenes por toda su sitio botones y logos (y por lo tanto 20 solicitudes http con la latencia de alrededor de cada uno) se puede utilizar una sola imagen, y la posición que cada vez que tan sólo el bit desea que sea visible.

Es difícil para publicar un ejemplo de como tendría que ver el componente de la imagen y la colocación de CSS - pero he blogueado el uso de Google de aquí: http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites/

25voto

Ben Alpert Puntos 30381

El hecho de que float diante un elemento de matriz hará que se expanda para contener la totalidad de su float niños ed.

23voto

Gumbo Puntos 279147

Quizá márgenes negativos y absoluta de los elementos con posición relativa de los elementos con posición.

Ver Cómo hacer esto con CSS? para los ejemplos.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X