一、样式表书写位置
◇ 内嵌样式表
<head>
<style type="text/css">
/*书写样式*/
</style>
</head>
◇外链样式表
<link rel="stylesheet" href="1.css"/>
◇行内样式表
<h1 style="font-size:14px; color:red;">14期威武<h1>
2 标签分类(显示方式)
2.1 块元素
典型代表,Div,h1-h6,p,ul,li
特点: ★独占一行
★可以设置宽高
★嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
2.2 行内元素
典型代表 span ,a, ,strong , em, del, ins
特点：★在一行上显示
★不能直接设置宽高
★元素的宽和高就是内容撑开的宽高。
2.3 行内块元素(内联元素)
典型代表 input img
特点：★在一行上显示
★可以设置宽高
2.4 块元素、行内元素
◆块元素转行内元素
div,p{
display:inline;
}
◆行内元素转块元素
span{
display:block;
}
◆块和行内元素 转 行内块元素
div,span{
display:inline-block;
}
3、CSS三大特性
3.1 层叠性
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后面的代码。和标签调用选择器的顺序无关。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>层叠性</title>
<style type="text/css">
.box1{
color: green;
font-size: 20px;
}
.box2{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div class="box2 box1">14期威武</div>
</body>
</html>效果：
3.2 继承性
继承性发生的前提是嵌套（包含）关系
文字的属性都可以继承
特殊情况：
★h系列不能继承文字大小。（其实继承了，但是浏览器器给了倍数（2em,1.5em），比如h1 继承后，再乘以2）
★a 不能继承文字颜色。（浏览器给了默认颜色）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>继承性</title>
<style type="text/css">
.father{
color: red;
font: italic 700 40px/50px "microsoft yahei" ;
}
.box{
font-size:40px ;
color: yellow;
}
</style>
</head>
<body>
<!--文字的所有属性都可以继承-->
<div class="father">
<p>
高薪就业高薪就业高薪就业高薪就业高薪就业高薪就业高薪就业高薪就业高薪就业高薪就业高薪就业高薪就业高薪就业高薪就业高薪就业高薪就业
高薪就业高薪就业
</p>
</div>
<div class="box" >
<h1>标题1</h1>
<h2>标题2</h2>
<a href="#">高薪就业</a>
</div>
</body>
</html>
3.3 优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 1000以上
权重是估计值。严格来说100个标签选择器也抵不过一个类选择器。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>优先级</title>
<style type="text/css">
#con{
color: #999;
font-size: 60px;
}
.box{
color: red;
font-size: 40px;
}
div{
color: yellow !important;
font-size: 30px;
}
</style>
</head>
<body>
<div class="box" id="con" style="font-size:10px; color: pink ">高薪就业</div>
</body>
</html>
◆优先级特点
★继承的权重为0
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>继承的权重为0</title>
<style type="text/css">
p{
color: pink;
font: 30px "microsoft yahei";
}
.father{
color: green;
font: 60px "宋体";
}
#box{
color: yellow;
font: 60px "宋体";
}
</style>
</head>
<body>
<div class="father" id="box">
<p>高薪就业</p>
</div>
</body>
</html>
★权重会增加
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>权重会增加</title>
<style type="text/css">
/* 指向 p标签 权重为10+100=110*/
.father #baby{
color: orange;
font-size: 12px;
}
/* 指向 p标签 权重为10+10=20 （和继承没有关系）*/
.father .son{
color: pink;
font-size: 500px;
}
/*指向 p标签 权重为1+10=11*/
p.son{
color: yellow;
font-size: 120px;
}
/* 指向 p标签 权重为1*/
p{
color: red;
font-size: 30px;
}
/*指向 p标签 权重为10*/
.son{
color: blue;
font-size: 60px;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="baby">这行字会是什么颜色?</p>
</div>
</body>
</html>
结果：orange
练习1：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>权重相加</title>
<style type="text/css">
/*作用p标签，权重值为100+100=200*/
#father #son{
color: blue;
}
/*作用p标签，权重值为100+1+10=111*/
#father p.c2{
color: black;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
这行字是什么颜色？
</p>
</div>
</body>
</html>
答案：blue
练习2：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>权重相加</title>
<style type="text/css">
/*对于p，继承的权重为0*/
#father {
color: blue;
}
/*作用p标签，权重值为1*/
p{
color: black;
}
</style>
</head>
<body>
<div id="father">
<p >
这行字是什么颜色？
</p>
</div>
</body>
</html>
答案：black
练习3：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>权重相加</title>
<style type="text/css">
/*对于p标签，继承权重为0*/
#father {
color: red;
}
/*作用p标签，权重值为1+1=2*/
div p{
color: black;
}
/*作用p标签，权重值为1+10=11*/
p.c2{
color: yellow;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p class="c2">
这行字是什么颜色？
</p>
</div>
</body>
</html>
答案：yellow
4 链接伪类
a:link{属性:值;} 与a{属性:值;}效果是一样的。
a:visited{属性:值;} 链接访问之后的状态
a:hover{属性:值;} 鼠标放在链接上显示的状态
a:active{属性:值;} 链接激活的状态
:focus{属性:值;} 获取焦点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>链接伪类</title>
<style type="text/css">
a{
color: orange;
text-decoration: none;
}
a:hover{
color: red;
}
a:active{
color: black;
}
a:visited{
color: yellow;
}
</style>
</head>
<body>
<a href="#/">百度</a>
</body>
</html>
练习：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>导航</title>
<style type="text/css">
.title{
text-align: center;
height: 60px;
background-color: #aaaaaa;
}
a{
display: inline-block;
width: 80px;
height: 60px;
text-decoration: none;
color: black;
font-weight: 700;
}
.c1{
color: #ff4929;
}
a:hover{
text-decoration: underline;
background-color: white;
color: #ff4929;;
}
</style>
</head>
<body>
<div class="title" >
<a href="#" class="c1">天猫</a>
<a href="#" class="c1">聚划算</a>
<a href="#" class="c1">超市</a>
<a href="#" class="c1">头条</a>
<a href="#" >阿里旅行</a>
<a href="#">电器城</a>
<a href="#">苏宁易购</a>
<a href="#">智能生活</a>
</div>
</body>
</html>
5 背景属性
background-color 背景颜色
backgroud-image 背景图片
backgroud-repeat 背景平铺 repeat | no-repeat | repeat-x | repeat-y 默认repeat
background-postion 背景定位 left | right | center | top | bottom
★方位只写一个值的时候，另个值默认居中
★方位写两个值的时候，顺序没有要求
★写两个具体值的时候，第一个代码水平方向，第二个代表竖直方向
background-attachment 背景是否滚 scroll | fixed 默认scroll
背景属性连写:
backgroud: red url("1.png") no-repeat 30px 40px scroll;