CSS3
一.CSS
Cascading Style Sheet 级联样式表
1.表现HTML或XHTML文件样式的计算机语言
2.包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
二.css的优势：
1.内容与表现分离
2.网页的表现统一，容易修改
3.丰富的样式，使得页面布局更加灵活
4.减少网页的代码量，增加网页的浏览速度，节省网络带宽
5.运用独立于页面的CSS，有利于网页被搜索引擎收录
三.css语法基本结构：
选择器{
声明1;
声明2;
}
h1 {
font-size:12px;
color:#F00;
}
四.三种样式：
1.行内样式
<h1 style="color:blue;font-size: 10px;">今天可能下冰雹，大家每人回家准备一口锅，盖头上</h1>
行内样式有style属性控制，双引号中间的内容就是样式列表，且内个样式用分号分割
2.内部样式表
在<head></head>标签中写<style type="text/css"></style>
<head lang="en">
<meta charset="UTF-8">
<title>内部样式效果</title>
<style type="text/css">
h1{
color: green;
font-size: 100px;
}
</style>
</head>
注意：将全部符合条件的标签全部变样式
3.外部样式表
需要创建.css文件
style.css
h1{
color: aqua;
font-size: 15px;
}
在HTML文件当中引用样式
链接式：<link href="文件路径" rel="stylesheet" type="text/css"/>
导入式：<style type="text/css">
@import "文件路径";
</style>
4.链接式和导入式的区别
4.1<link/>标签属于XHTML，@import是属于CSS2.1
4.2使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
4.3使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4.4@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
5.样式优先级
1.行内样式>内部样式表>外部样式表
2.就近原则
6.三种基本选择器
6.1 标签
<h1>支佳宁说p和h1有什么区别</h1>
h1 {
color: green;
}
6.2 class选择器
<h1 class="ZJN">支佳宁说p和h1有什么区别</h1>
.ZJN{
color:yellow;
}
6.3 id选择器
<h1 id="ZJNHH">支佳宁说p和h1有什么区别</h1>
#ZJNHH{
color：black;
}
遵循id>class>标签，注意，id不能重复
7.层次选择器
7.1 /*后代选择器*/
body p{
background: yellow;
}
body标签下的所有p标签都要变
7.2 /*子类选择器*/
body>p{
background: blue;
}
只有body下的p变，其他包含p的不变
7.3/*相邻兄弟选择器*/
.active+p{
background: green;
}
定位class为active相邻的第一个p变
7.4/*通用选择器*/
.active~p{
background: red;
}
8.结构伪类选择器
<style type="text/css">
/*定位ul下的第一个li*/
ul li:first-child{
background: yellow;
}
/*定位ul下的最后一个li*/
ul li:last-child{
background: blue;
}
/*定位第三个p*/
p:nth-child(3){
background: green;
}
/*定位第一个p*/
p:first-of-type{
background: red;
}
/*定位指定位置的p*/
p:nth-of-type(2){
background: blueviolet;
}
</style>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
9.属性选择器
<style type="text/css">
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
text-align: center;
background: #aac;
color: blue;
font: bold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
/*属性*/
a[id]{
background: red;
}
/*属性值*/
a[href=efc]{
background: yellow;
}
/*属性开头*/
a[href^=s]{
background: orange;
}
/*属性结尾*/
a[target$=k]{
background: palevioletred;
}
/*属性包含*/
a[href*=a]{
background: purple;
}
</style>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first" >1</a>
<a href="" class="links active item" title="test website" target="_blank" >2</a>
<a href="sites/file/test.html" class="links item" >3</a>
<a href="sites/file/test.png" class="links item" > 4</a>
<a href="sites/file/image.jpg" class="links item" >5</a>
<a href="efc" class="links item" title="website link" >6</a>
<a href="/a.pdf" class="links item" >7</a>
<a href="/abc.pdf" class="links item" >8</a>
<a href="abcdef.doc" class="links item" >9</a>
<a href="abd.doc" class="linksitem last" id="last">10</a>
</p>
E[attr] 选择匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配
