CSS3.0基础知识
- 格式：doc
- 大小：52.00 KB
- 文档页数：4
CSS3基础知识20121006-1
常见网页排版引擎
Gecko是套开放原始码的、以C++编写的网页排版引擎。目前为Mozilla家族网页浏览器以及Netscape 6以后版本浏览器所使用。
WebKit 是chrome浏览器也是苹果浏览器网页排版引擎版本的名称。
Trident 微软IE浏览器网页排版引擎。
Presto是一个由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用
以下是针对不同网页排版引擎识别CSS3.0的前缀标识
Gecko(火狐): -moz-
WebKit(谷歌浏览器): -webkit-
Trident(IE浏览器)：暂不支持
Presto(Opera)：不需要前缀
以下使用火狐浏览器前缀，编写笔记，今后使用时如果全部浏览器支持需要各种前缀都写
-moz-border-radius:30px;
-webkit-border-radius:30px;
-khtml-border-radius:30px;
border-radius:30px;
边框
圆角边框定义
-moz-border-radius:30px;
-moz-border-top-left-radius:30px;
-moz-border-top-right-radius:30px;
-moz-border-bottom-left-radius:30px;
-moz-border-bottom-right-radius:30px;
边框颜色过渡
-moz-border-bottom-colors:#300 #600 #700 #800 #900 #A00;
-moz-border-top-colors:#300 #600 #700 #800 #900 #A00;
-moz-border-left-colors:#300 #600 #700 #800 #900 #A00;
-moz-border-right-colors:#300 #600 #700 #800 #900 #A00;
设置边框背景为图片
border-image:url("./images/css.gif");
CSS3基础知识20121006-2
背景
设置背景图片大小
-moz-background-size:50px 50px;
不同位置剪切背景图片
-moz-background-clip:content-box;
border-box：边框内显示图片。
padding：内边距内显示图片。
content：内容内显示图片。
不同位置显示背景图片
-moz-background-origin:border-box;
border-box：从border区域开始显示背景。
padding：从padding区域开始显示背景。
content：从content区域开始显示背景。
伪类
在内容的前面插入内容
.test:before{
content:"您使用的浏览器支持content属性";
}
在内容的后面插入内容
.test:after{
content:"CC使用的浏览器支持content属性";
}
文本
文字阴影
text-shadow: 5px 5px 1px #AAA;
文字内容是否截断
text-overflow:clip|ellipsis;
clip:单词操作边界直接切断
ellipsis:单词操作边界使用省略号
设置内容是否换行
word-wrap:break-word;
文本换行 normal
连续内容边界内换行 break-word
基础盒模型
轮廓
outline-width:10px; 轮廓边框宽度
outline-style:solid; 轮廓边框风格
outline-color:red; 轮廓边框颜色
outline-offset:100px; 轮廓距离边框的距离
内容
文字列显示
-moz-column-count:3; 将内容分成几列
-moz-column-gap:20px; 列和列的间距
-moz-column-rule-style:solid; 列分隔线风格
-moz-column-rule-width:1px; 列分隔线宽度
-moz-column-rule-color:red; 列分隔线颜色 CSS3基础知识20121006-3
过渡
旋转角度
-moz-transform:rotate(180deg);
旋转基点设置 x y
-moz-transform-origin:50px 50px;
水平垂直移动
-moz-transform:translate(12px,20px);
水平垂直缩放
-moz-transform:scale(0.3);
水平垂直扭曲
-moz-transform:skew(10deg,-30deg);
渐变
-moz-transition-property:width; //设置改变的宽度
-moz-transition-duration:1s; //动画执行时间
-moz-transition-delay:0s; //动画开始时延迟执行
-moz-transition-timing-function:ease;
动画变化算法
ease：逐渐慢下来，函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
linear：线性过度,函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in：由慢到快,函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out：由快到慢, 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out：由慢到快在到慢, 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
能够启动动画效果的伪类
:link 只有链接 未访问的链接
:visited 只有链接 访问过的链接
:hover 所有元素 鼠标经过元素
:active 所有元素 鼠标点击元素
:focus 所有可被选中的元素 元素被选中
动画
-moz-animation-name:toto; //使用动画circle
-moz-animation-duration:1s; // 1次动画的时间为1s,keyframes中的100%即1s
-moz-animation-iteration-count:10; //循环播放的次数
定义动画效果
@-moz-keyframes toto{
from{ width:0px; }
to{ width:400px; }
}
@-moz-keyframes feifei{
0% { width:10px; }
25% { width:20px; }
50% { width:30px; }
75% { width:40px; }
100%{ width:50px; }
} CSS3基础知识20121006-4
选择器
匹配元素具有name属性，并且属性值以for开头
div[name^="for"]{
background-color:red;
}
匹配tag=DIV元素,属性为name，属性值以Name结尾的标签
div[name$="Name"]{
background-color:green;
}
匹配tag=DIV，元素的属性名为name，元素的属性值中含有abe字样的元素
div[name*="abe"]{
background-color:tomato;
}
匹配HTML根元素，等同于body{}
html:root{background-color:red;}
遍历文档中的全部li匹配第二个子节点
li:nth-child(2){
background-color:red;
}
遍历文档中的全部li匹配倒数第二个子节点
li:nth-last-child(2) {
background-color:red;
}
遍历li相同的类型，匹配第3个li节点
li:nth-of-type(3) {
background-color:red;
}
遍历li相同的类型，匹配倒数第1个li节点
li:nth-last-of-type(1) {
background-color:red;
}
遍历li相同的类型，匹配倒数第1个li节点
li:last-child{
background-color:darkred;
}
遍历li相同的类型，匹配第1个li节点
li:first-of-type{
background-color:darkred;
}
匹配子元素，改子元素是父元素的唯一元素
li:only-child{
background-color:red;
}
匹配相同类型Tag标签集合中，是唯一子节点的标签
li:only-of-type{
background-color:green;
}
匹配元素内部不存在子元素的空标签,含文字不属于空标签
div:empty{ background-color:red; }
