CSS的隐藏功能

我肯定在关于PHP和XHTML 的隐藏功能样式问题中找到了一些有用的提示.

所以这里是一个涵盖CSS.虽然容易上手,但需要花一点时间来了解一切,他们的默认行为,属性等

这里有一些开球

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

这些并不是很隐蔽,但它们的使用并不常见.您在CSS中发现了哪些提示,技巧,稀有功能？

1> Gumbo..：

---

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

head, title {
    display: block;
}

2> Binoj Antony..：

---

将多个样式/类应用于这样的元素 class="bold red GoldBg"

Foo.Bar(red)

---

还要注意`.bold.red {}`和`.bold .red {}`之间的细微区别......

---

请注意,IE6不支持多个类,并且只会应用最后一个 - GoldBg.

---

为什么我认为你只能用两个班级来做这个......

---

但如果可以的话,尽量避免命名类似'.red'的类.有一天,客户端希望所有的红色文本都是蓝色的,现在你已经混淆了每个必须触及该代码的开发人员.

---

如果多个类具有冲突的属性(例如,如果`.red`和`.GoldBg`都指定了`color`属性),那么CSS特殊性规则适用; `class ="..."`属性中的类的顺序无关紧要.

3> Fenton..：

---

我真的很喜欢CSS sprites.

不是为所有站点按钮和徽标设置20个图像(因此20个http请求,每个图像的延迟时间),您只需使用一个图像,并每次定位,以便只显示您想要的位.

由于您需要查看组件图像和展示位置CSS,因此很难发布示例 - 但我在此处写了Google对其使用的博客:http://www.stevefenton.co.uk/Content/Blog/Date/ 200905 /博客/谷歌用途-图像-精灵/

---

您还可以使用spriting进行javascript控制的动画.只需在setInterval等上循环精灵.

4> Sophie Alper..：

---

事实上,float父元素将使其扩展以包含其所有floated子元素.

---

知道这个,但非常方便.另外不要忘记,如果这不是一个选项,你可以使用溢出属性而不诉诸丑陋的清除div.

5> Gumbo..：

---

可能是相对定位元素中的负边距和绝对定位元素.

看看你如何用CSS做到这一点？举些例子.

---

谨慎解释？也是plz维基吧

6> Steve Harris..：

---

您可以通过指定两者left和right属性来为绝对定位的元素设置可变宽度.与简单地设置width百分比相比,这可以提供更多控制.

例如:

#myElement {
    position: absolute;
    left: 5px;
    right: 10px;
}

另一个例子

#myElement{ /* fill up the whole space :) */
   background: red;
   position:absolute;
   left: 0;
   right:0;
   top: 0;
   bottom: 0;
}

---

我认为这一直支持到IE5.5

---

不过,我认为这不适用于IE.

7> Nikita Proko..：

---

看一下Webkit CSS Transformations,例如 -webkit-transform: rotate(9deg);

8> Marco Luglio..：

---

我的是:

像听觉表的所有属性azimuth,pitch...

打印模块的一些属性就像 page-break-after: avoid;

counter-increment: section 1;

border-collapse: collapse;

background-color: transparent;

outline: 1px solid...

9> VirtuosiMedi..：

---

虽然不是一个功能,但仍然有用:子选择器适用于除IE6之外的所有浏览器,允许您在不使用黑客或条件样式表的情况下隔离IE6或使代码无效.因此,以下代码中的链接在IE6中为红色,在其他浏览器中为蓝色.

CSS

/*Red for IE6*/
.link {color:#F00;}
/*Blue for everything else*/
#content>.link {color:#00F;}

HTML

    Link

以下是选择器列表(用于CSS2)和浏览器兼容性图表.

---

它们是一个功能,但您可以使用它们来隔离IE6这一事实更具诀窍.

10> kingjeffrey..：

---

上周我遇到了一个我从未听说过的非常有用的CSS属性:

text-rendering: optimizeLegibility;

Safari,Chrome和Firefox都了解此属性,并在设置时启用高级字距调整和连字.这是一个很棒的演示.

---

它使得汉字在某些浏览器/系统上看起来很糟糕

11> Hussein..：

---

IE6中的透明PNG 这修复了IE6中的PNG透明度.将背景设置为非背景并将图像包含在过滤器中.不需要任何javascript或htc.

.whatever {
   background: none; /* Hide the current background image so you can replace it with the filter*/
   width: 500px; /* Must specify width */
   height: 176px; /* Must specify height */
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}

在元素之后设置分页行为 - 跨浏览器

table {
   page-break-after:always
} 

您可以始终使用属性,避免,自动,左,右,固有.阅读http://www.w3schools.com/CSS/pr_print_pageba.asp上的文档

使用"Section 1","1.1","1.2"等对部分和子部分进行编号的方法 - 跨浏览器

h2:before 
{
   counter-increment:subsection;
   content:counter(section) "." counter(subsection) " ";
}

http://www.w3schools.com/CSS/pr_gen_counter-increment.asp

折叠表格边框为单边框或分离,如标准HTML - 跨浏览器

table
{
   border-collapse:collapse;
}

http://www.w3schools.com/css/pr_tab_border-collapse.asp

从按钮或输入字段中删除选择边框或虚线.还有其他很棒的用途 - 跨浏览器

button{
   outline:0;
}

http://www.w3schools.com/CSS/pr_outline.asp

*IE6中100%高度的html

* html .move{
   height:100%;
}

允许长字断开并换行到下一行 - CSS3 Cross浏览器

.whatever {
   word-wrap:break-word;
}

http://www.w3schools.com/css3/css3_pr_word-wrap.asp

速记

之前

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif 

后

font: 1em/1.5em bold italic serif;

之前

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

后

background: #fff url(image.gif) no-repeat top left;

之前

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif) 

后

list-style: disc outside url(something.gif);

之前

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px 

后

margin:2px 1px 3px 4px; /*also works for padding*/
margin:0; /*You can also do this for all 0 borders*/
margin:2px 3px 5px; /*  you can do this for top 2px, left/right 3px, bottom 5px and ;    

---

`outline:0;`不要这样做!http://outlinenone.com/

12> Joey Adams..：

---

您可以使用CSS的overflow属性创建滚动区域而无需使用框架.例:

div.foo {
    border:   1px solid;
    width:    300px;
    height:   300px;
    overflow: auto;
}

overflow: auto 表示如果内容不适合div,则会根据需要显示水平和/或垂直滚动​​条.

overflow: scroll表示两个滚动条始终存在.如果您只想要一个滚动条,请使用overflow-x或overflow-y(现代浏览器和IE6支持).

你们中的一些人可能会想到"duuuh",但我很惊讶地发现可以在没有框架的情况下创建滚动区域.

---

iOS,或者更准确地说,移动Safari支持这一点很好.但他们不做的是显示滚动条.你必须双指滚动.所以,并不总是直观的.不确定苹果为什么做出这个决定.

---

小心,我最近发现iPad(可能是iPhone和iPod)不支持这个,我的意思是它不会显示滚动条并切断你的内容.

13> Hoque..：

---

的:前和:后伪元素

以下规则导致在每个H1元素之前生成字符串"Chapter:":

H1:before { 
  content: "Chapter: ";
  display: inline;
}

有关更多信息,请访问http://www.w3.org/TR/CSS2/generate.html

14> Paul Dixon..：

---

没有那么多隐藏的功能,但是每个初级开发人员应该知道的CSS提示

15> hasen..：

---

内联块(替代浮动div):

.inline_block
{
    display:-moz-inline-box;
    display:inline-block;
}  

不要将这个类应用于div!它不会起作用!将它应用于span(或内联元素)

16> Halil Özgür..：

---

内联@media作业:

/* Styles.css */
.foo { ... bar ... }
...
@media print{
    .ads{display:none}
}

这样你就可以摆脱另一个HTTP请求.

17> Salman von A..：

---

我们可以将样式标记显示为块元素,并使用HTML5 contenteditable属性动态编辑CSS .在这里演示.

致谢:CSS-Tricks

18> Sophie Alper..：

---

不是真的"隐藏",但理解盒子模型和定位模型将有很大帮助.

就像知道一个position: absolute元素相对于它的第一个父元素一样position: relative.

---

不,它相对于最近的父母有*any*'position:'而不是默认,'static'

19> alex..：

---

目前仅适用于WebKit但非常有趣:CSS动画

20> Hoque..：

---

我从未想过使用css'border'属性我可以制作不同形状的三角形.这是要去的链接,

(编辑) 以下链接不再起作用. http://www.dinnermint.org/blog/css/creating-triangles-in-css/

从现在开始,您可以尝试以下方法, http://jonrohan.me/guide/css/creating-triangles-in-css/

21> sumanchalki..：

---

使用css可以轻松完成自动换行,无需服务器端技术的任何帮助.

word-wrap: break-word;