CSS3笔记
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>
标签：last-child{}:最后一个该标签，匹配父元素中最后一个子元素
<title>last-child</title>
<style type="text/css">
p:last-child{
background-color:#C0F;
}
</style>
</head>
<body>
<p>我是天空里的一片云，
偶尔投影在你的波心——
你不必讶异，</p>
<p> 更无须欢喜——
在转瞬间消灭了踪影。</p>
<p> 你我相逢在黑夜的海上，
你有你的，我有我的，方向；</p>
<p>你记得也好，
最好你忘掉
， 在这交会时互放的光亮！</p>
</body>
标签：nth-child{n}:第n个该标签,匹配父类元素中第n个子元素
n可以是一个数字，一个关键字，或者一个公式
<title>nth-child</title>
<style type="text/css">
p:nth-child(2){
background-color:#0F0;
}
</style>
</head>
<body>
<p>我是天空里的一片云，
偶尔投影在你的波心——
你不必讶异，</p>
<p> 更无须欢喜——
在转瞬间消灭了踪影。</p>
<p> 你我相逢在黑夜的海上，
你有你的，我有我的，方向；</p>
<p>你记得也好，
最好你忘掉
， 在这交会时互放的光亮！</p>
</body>
属性选择器
