CSS3 概述
CSS3确实非常非常强大,基本规则十分简单,但是使用起来确实千变万化。而且从动画这个角度来讲m确实可以省去很多js代码。利用css3可以做出很多非常有意思的效果
学习CSS3之前必须要说明的几个问题
-
浏览器支持问题(IE6789都别想了)
-
厂商前缀问题(涉及到内核-webkit-,-moz-,-ms-,-o-)
-
在JS中的写法:
- -webkit-transtion ==>WebkitTranstion;
- -o-transtion ==>OTransition
- -moz-transtion ==>MozTranstion
CSS3属性选择器但是记住了不能是数字开头
- E[attr] 只使用属性名,但没有确定任何属性值
- E[attr=value] 指定属性名,并指定了该属性的属性值
- E[attr=value]指定属性名,并有属性值.此属性值是一个词列表,并且以空格隔开,其中词列表包含了一个value词,而且等号前面的""不能不写
- E[attr^=value]指定了属性名,并且有属性值,属性值是以value开头的
- E[attr$=value]指定了属性名,并且有属性值,而且属性值是以value结束的
- E[attr*=value]指定了属性名,并且有属性值,而且属性中包含了value
- E[attr|=value]指定了属性名,并且属性值是value或者以"value-"开头的值比如说(zh-cn)
- 实例百度文库
- 备注:IE7以上支持
CSS属性代码基础版本
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>CSS3</title>
</head>
<style>
/*属性选择器*/
*{margin:0px;padding:0px;}
div{height:30px;border:1px solid black;}
/*div[aaa]{background:red;}*/
div[aaa=l1o]{background:blue;} /*特别注意属性值不能是数字开头，否则认不出来*/
div[aaa~=old]{background:black;} /*波浪号便是自定义属性里面有old这个词。但是他前面必然是分开的。必须有空格作为隔断。这样才找得到*/
div[aaa^=g]{background:pink;} /*^表示找到这个单词开头的，中间可以不用管分隔符，只要他开头就找得到*/
div[aaa$=m]{background:deepskyblue;}/*表示$以什么字母结束的。不用管是否分开*/
div[aaa*=a33]{background:yellow;}/*表示只要存在这个单词都能找的到*/
div[aaa|=b]{background:red;} /*表示以b-开头的或者就是单纯的一个单词开头*/
</style>
<body>
<div aaa="a11 old">1111</div>
<div aaa="b1o">2222</div>
<div aaa="malea33">3333</div>
<div aaa="malea44m">4444</div>
<div aaa="g a55">5555</div>
<div aaa="b-leo">2222</div>
<div aaa="g-leo">2222</div>
<div aaa="b">2222</div>
</body>
</html>
百度文库效果图
2017-05-02_164743.jpg
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>百度文库</title>
</head>
<style>
*{margin:0px;padding:0px;}
ul{list-style-type: none;}
li{height:30px;line-height:30px;font-size:24px;border: 1px solid #ccc;}
a{text-decoration: none;padding-left:30px;}
li a[href*=text]{background:url(images/text.gif) no-repeat left center;}
li a[href*=ppt]{background:url(images/ppt.gif) no-repeat left center;}
li a[href*=swf]{background:url(images/swf.gif) no-repeat left center;}
li a[href*=word]{background:url(images/w.gif) no-repeat left center;}
li a[href*=excel]{background:url(images/x.gif) no-repeat left center;}
</style>
<body>
<ul>
<li><a href="http://www.baidu.com/text/index.html">TEXT文档</a></li>
<li><a href="http://www.baidu.com/ppt/index.html">PPT文档</a></li>
<li><a href="http://www.baidu.com/swf/index.html">SWF文档</a></li>
<li><a href="http://www.baidu.com/word/index.html">w文档</a></li>
<li><a href="http://www.baidu.com/excel/index.html">x文档</a></li>
</ul>
</body>
</html>
