css3.0基础知识

fanfanben 贡献于2016-09-04

作者 lenovo  创建于2012-10-06 03:45:26   修改者  修改于2012-10-06 08:31:02字数3477

文档摘要:Gecko是套开放原始码的、以C++编写的网页排版引擎。目前为Mozilla家族网页浏览器以及Netscape 6以后版本浏览器所使用。
关键词:

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

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享文档获得金币 ] 0 人已下载

下载文档