《响应式Web设计-HTML5和CSS3实战》阅读笔记第五章

概要

总结

CSS3给前端开发带来了什么

提供各种效果：圆角、背景渐变、文字阴影、盒阴影、自定义字体以及多重背景图片。IE6-8不支持CSS3，有需要可以使用腻子脚本。

CSS规则解析

规则由选择器和声明组成，声明由属性和值组成。

私有前缀及其用法

私有前缀即是各浏览器对未批准样式的实现，用于测试使用情况。使用未批准样式时应保持前缀样式在前，无前缀样式在后的习惯，这样在浏览器支持后也无需修改样式。

可以使用前缀自动补全功能。1.通过JS添加；2.通过WebStorm添加插件autoprefixer添加；3.通过定义Sass方法添加；

HTML5+CSS3浏览器支持程度查询(http://caniuse.com/)。

快速而有效的CSS技巧

• CSS多栏布局
• 文字换行

<div class="column1">
    今天，一场春雨把我带进了另一个美丽的春的世界，雨中踏春别有一翻情趣在其中。
    ......
    http://localhost:63342/WebProject/Chapter5/column.html
</div>
<div class="column2">
    今天，一场春雨把我带进了另一个美丽的春的世界，雨中踏春别有一翻情趣在其中。
    ......
</div>

.column1, .column2 {
    padding: 10px;
    margin: 10px;
    border: 1px solid #cccccc;
}
.column1 {
    /*固定栏位宽度*/
    -webkit-column-width: 20em;
    column-width: 20em;
    /*文字换行-直接单词内换行*/
    word-break: break-all;
    /*文字换行-末尾超长单词新行显示，还显示不下单词内换行*/
    word-wrap: break-word;
}
.column2 {
    /*固定栏位数量*/
    -webkit-column-count: 3;
    column-count: 3;
    /*间隙和分割线*/
    -webkit-column-gap: 2em;
    -webkit-column-rule: thin dotted #999999;
    column-gap: 2em;
    column-rule: thin dotted #999999;
}

CSS3的新增选择器及其用法

1. CSS3属性选择器
   
   • 匹配开头：Element[attribute^=”value”]
   • 匹配结尾：Element[attribute$=”value”]
   • 匹配包含：Element[attribute*=”value”]
2. CSS3结构伪类
   
   • :last-child选择器，:first-child选择器
   • 交替效果:nth-child(even)
   • :not否定选择器
3. CSS3对伪元素的修正，即伪元素比伪类元素多一个冒号

<div title="div1">div1，使用CSS1，2都支持的属性选择器将边框变红，使用包含特定字符串的属性选择器添加内外边距</div>
<div title="rdiv2">rdiv2，使用匹配开头的属性选择器将文字变红，使用包含特定字符串的属性选择器添加内外边距</div>
<div title="rdiv3">rdiv3，使用匹配开头的属性选择器将文字变红，使用包含特定字符串的属性选择器添加内外边距</div>
<div title="div4">div4，使用匹配结尾的属性选择器将文字变绿，使用包含特定字符串的属性选择器添加内外边距</div>
<ul>
    <li>li</li>    <li>li</li>
    <li>li</li>    <li>li</li>
    <li>li</li>    <li>li</li>
    <li>li</li>    <li>li</li>
</ul>

div[title='div1'] {
    border: 1px solid red;
}
div[title^='r'] {
    color: red;
}
div[title$='4'] {
    color: green;
}
div[title*='div'] {
    padding: 10px;
    margin: 10px;
}
/*间隔一个*/
li:nth-child(even) {
    color: #b4b472;
}
/*倒数第2个*/
li:nth-last-child(2) {
    border: 1px solid #000;
}
/*从第2个开始，每到3的倍数即应用*/
li:nth-child(3n+2) {
    border: 1px solid #fe9c00;
}
/*第一列字体为红色*/
.column1::first-line {
    color: red;
}

自定义网页字体

@font-face规则曾在CSS2中就有了，在2.1中删除，现CSS3又重新启用。

不同浏览器对字体格式的兼容不同（SVG,TTF,EOT,WOFF）。

使用自定义字体导致文字模糊怎么办：通常这种情况是因为字体font-weight默认为700，改成400就可以了

        @font-face {
            font-family: 'happy';
            src: url('../images/happy.eot');
            src: url('../images/happy.eot?#iefix') format('embedded-opentype'),
            url('../images/happy.woff') format('woff'),
            url('../images/happy.ttf') format('truetype'),
            url('../images/happy.svg#happy') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        span {
            text-decoration: none;
            text-transform: uppercase;
            font-family: 'happy';
            font-size: 5em;
            font-weight: 400;
            /*color: #fe0208; 兼容IE9以下*/
            color: hsl(359, 99%, 40%);
        }

新的CSS3颜色格式和透明度

RGB（红绿蓝），例：color:rgb(254,2,8)；HSL（色相、饱和度、亮度），例：color:hsl(359,99%,40%)
IE9以下不支持RGB和HSL，所以使用时需要在样式前加备用的16进制色。

span{
    color: #fe0208; /*兼容IE9以下*/
    color: hsl(359, 99%, 40%);
    color: rgb(255,255,255);
}

透明度设置：
background-color: rgba(255,255,255, 0.5); background-color: hsla(0, 0%, 100%, 0.5);
opacity方式设置会影响元素中的所有内容。

        div {
            /* hsl颜色模式设置透明度*/
            background-color: hsla(0, 0%, 100%, 0.5);
            /* rgb颜色模式设置透明度 */
            background-color: rgba(255,255,255, 0.5);
            /* 设置透明度，会连元素内容一起透明*/
            opacity:0.1;
            height: 300px;
            width:880px;
        }