概要
总结
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的新增选择器及其用法
- CSS3属性选择器
- 匹配开头:Element[attribute^=”value”]
- 匹配结尾:Element[attribute$=”value”]
- 匹配包含:Element[attribute*=”value”]
- CSS3结构伪类
- :last-child选择器,:first-child选择器
- 交替效果:nth-child(even)
- :not否定选择器
- 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;
}