《精通CSS》——个人总结

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

【属性选择器】

属性选择器可以根据某个属性是否存在或属性的值来寻找元素。

只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

事例：将带有 title 属性的所有元素设置样式

[title]{

   color:red;

}

【盒模型】

在IE中，width中包括了内边距（padding），而在其他大多数浏览器中，width不包括内边距，所以在设置width时需注意兼容性。

当两个或者更多垂直外边距（margin）相遇时，它们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距的高度中较大者。

【定位】

CSS中有普通流、浮动和绝对定位三种基本的定位机制。除非专门所指，否则所有框都在普通流中定位。

有相对定位，绝对定位（使元素的位置与文档流无关，因此不占据空间）。

浮动：会让元素脱离文档流。

clear属性：清除浮动。

overflow属性：值为hidden或auto。也会自动的清理包含的任何浮动元素。

【背景图像效果】

不要将像素或百分数等单位与关键字混合使用。

投影方法：box-shadow（垂直和水平偏移，投影的宽度，颜色这四个值）。

【不透明度的设置】

css：opacity（除了对背景生效外，应用它的元素的内容也会继承它）。

RGBa:background-color:ragb();值为0代表完全透明，为1代表100%不透明。

PNG透明度：PNG文件支持alpha透明度。例;

.img-wrapper div{

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

    (src='图片地址',sizingMethod='crop');

    backgrnund:none;

}

【伪类】

伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。

实例：

//锚伪类

a:link {color: #FF0000}        /* 未访问的链接 */

a:visited {color: #00FF00}    /* 已访问的链接 */

a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */

a:active {color: #0000FF}    /* 选定的链接 */

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。

css2：:first-child伪类:表示第一个元素；:lang伪类：向带有指定 lang 属性的元素添加样式。

css3允许使用:target伪类，为目标元素设置样式。

【对链接应用样式】

突出显示不同类型的链接：使用属性选择器。

类似按钮的链接：链接应该只用于GET请求，决不要用于POST请求。

翻转：css3包含text-shadow、box-shadow和border-radius等属性。Safari 4 beta专有值-webkit-gradient，Safari还提供了一个box-reflect的专有属性。例：

a{

    display: block;

    width: 6.6em;

    line-height: 1.4;

    text-align: center;

    text-decoration: none;

    border:1px solid #66a300;

    color: #fff;

    -moz-border-radius:6px;

    -webkit-border-radius:6px;

    border-radius: 6px;

    background-image: -webkit-gradient(linear,left top,left bottom,from(#abe142),to(#67a400));

    background-color: #8cca12;

    text-shadow: 2px 2px 2px #66a300;

    -moz-box-shadow:2px 2px 2px #ccc;

    -webkit-box-shadow:2px 2px 2px #ccc;

    box-shadow: 2px 2px 2px #ccc;

    -webkit-box-reflect:below 2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.52,transparent),to(white));

}