CSS3笔记
一：什么是css3？
它是用来进行网页的风格设计的，是网页看起来更美观，很清晰
css3是css的升级版本
二：CSS的优势？
1.内容与表现分离
2.网页的表现形式更统一，更用于灵活修改
3.丰富的样式，使得页面布局更灵活
4.减少代码量，增加浏览速度，节省宽带流量
5.运用独立的CSS，有利于网页被搜素引擎收录
三：css3的基本语法是什么？
html中的注释：<!-- 这是html中的注释 -->
css3中的注释：/* 这是css3中的注释 */
语法：
????选择器{
声明1;
???????????????声明2;
......
????}
eg:
??h1{
????font-size:12px;(1)
????color:red（#000000）;(2)
???}
（1）（2）叫声明
注意：css的最后一条声明可以不用写“;”，但是基于W3C标准规范考虑，建议写上
样式标签<style></style>
语法：
<style type="text/css">------->风格/文本或css样式
h1{
????font-size:12px;(1)
???color:red（#000000）;(2)
????}
</style>
四：css3的基本选择器有哪几种？语法规则是什么？
1：ID选择器：#header{}
2：类选择器：.header{}
3：元素选择器：h1{}
4：子类选择器：ul > li{}
5：后代选择器：div p{}
6：伪类选择器：a:hover{}
7：属性选择器：input[type="text"]{}
1）id选择器 优先级高于 类选择器
2）后面的样式会覆盖前面的样式 id前 ?class后
3）指定的高于继承
ID选择器
<title>CSS3</title>
<style type="text/css">
#p{
text-align:center;
color:#3F0}
p{
color:
#C0F;}
</style>
</head>
<body>
<p id="p">Hello World!</p>
<p>这个标签不手影响</p>
</body>
注意：ID属性不要以数字开头，数字开头在浏览器中（Firefox）不起作用
Class（类）选择器
<title>类选择器</title>
<style type="text/css">
.center{text-align:center;
color:#F00;
}
.center1{
font-size:36px;
color:#0F0;
}
body{
background-color:#CF0;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center1">段落居中</p>
</body>
注意：类名的第一个字符不要以数字开头，数字开头在浏览器中（Firefox）不起作用
基本选择器的优先级
1.ID选择器 > 类选择器 > 标签选择器
2.标签选择器是否也遵循“就近原则”：不遵循
3.无论用那种方式引用css样式，一般都遵循id > class > 标签
五：css3的高级选择器有哪些？
层次选择器
??类型 ?????????????选择器 ??描述 ?????????????????????????????????语法
??后代选择器 ?????????E F ??????????选择匹配的F元素，且匹配的F元素被包 ????????body p{background:red;}
??????????????????????????含在匹配的E元素内
??子选择器 ???????????E>F ??????????选择匹配的F元素，且匹配的F元素是匹 ?????body>p{background:red;}
????配的E元素的子元素
??相邻兄弟选择器 ?????E+F ??????????选择匹配的F元素，且匹配的F元素紧位 ????????body+p{background:red;}
???于匹配的E元素后面
??通用兄弟选择器 ?????E~F ???选择匹配的F元素，且位于匹配的E元素 ?????????body~p{background:red;}
???后的所有匹配的F元素
Demo：
<title>层次选择器</title>
<style type="text/css">
p,ul{
border:1px solid red;/*边框属性*/
}
/*后代选择器*/
/*body p{
background:red;
}*/
/*子选择器*/
/*body>p{
background:red;
}*/
/*相邻兄弟选择器*/
/*.ac + p{
background:red;
}
#bc + p{
background:#0F0;
}*/
/*通用兄弟选择器*/
/*.ac~p{
background:#0F0;
}*/
</style>
</head>
<body>
<p class="ac">1</p><!--演示相邻兄弟选择器，在这添加个class-->
<p>2</p>
<p id="bc">3</p>
<p>4</p>
<ul>
<li>
???<p>4</p>
???</li>
???<li>
???<p>5</p>
???</li>
???<li>
???<p>6</p>
???</li>
</ul>
</body>
结构伪类选择器
标签：first-child{}:第一个该标签，父元素中第一个子元素
<title>first-child</title>
<style type="text/css">
p:first-child{
background-color:#0F0;
}
</style>
</head>
<body>
<p>父亲 轻轻的我走了，
??? 正如我轻轻的来；
???我轻轻的招手，
??? 作别西天的云彩。</p>
<h1>再别康桥</h1>
<div>
<p>1
???那河畔的金柳
??? 是夕阳中的新娘
???波光里的艳影，
??? 在我的心头荡漾。</p>
<p>2
???寻梦？撑一支长篙，
??? 向青草更青处漫溯，
???满载一船星辉，
??? 在星辉斑斓里放歌
</p>
</div>
</body>
<body>
<p>我是天空里的一片云，
???偶尔投影在你的波心——
??? 你不必讶异，</p>
<p> 更无须欢喜——
???在转瞬间消灭了踪影。</p>
<p> 你我相逢在黑夜的海上，
???你有你的，我有我的，方向；</p>
<p>你记得也好，
??? 最好你忘掉
???， 在这交会时互放的光亮！</p>
</body>
</style>
</head>
<body>
<p>我是天空里的一片云，
???偶尔投影在你的波心——
??? 你不必讶异，</p>
<p> 更无须欢喜——
???在转瞬间消灭了踪影。</p>
<p> 你我相逢在黑夜的海上，
???你有你的，我有我的，方向；</p>
<p>你记得也好，
??? 最好你忘掉
???， 在这交会时互放的光亮！</p>
</body>
属性选择器
CSS3笔记
原文地址：http://www.cnblogs.com/SFHa/p/7859772.html