Hidden features of CSS

2018-06-18 18:55:34

I have definitely picked up some useful tips in the hidden features style questions concerning PHP and XHTML.

So here is one to cover CSS. While easy to pick up, it takes a little while to learn about everything, their default behaviors, properties etc

Here are some to start the ball

@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 
}

These are not so much hidden, but their use is not often widespread. What tips, tricks, rare features have you discovered with CSS?

您可以显示文档的title元素：

head, title {
    display: block;
}

将多个样式/类应用到像这样的元素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>

I really like CSS sprites.

Rather than have 20 images for all your site buttons and logos (and therefore 20 http requests with the latency around each one) you just use one image, and position it each time so only the bit you want is visible.

It's difficult to post an example as you'd need to see the component image and the placement CSS - but I've blogged Google's use of it here: http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites/

链接地址: http://www.djcxy.com/p/52956.html

上一篇: PHP的隐藏功能？

下一篇: CSS的隐藏功能