一、CSS概念
CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
Css是用来美化html标签的，相当于页面化妆。
样式表书写位置：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
样式表内容
</style>
</head>二、选择器
选择器是一个选择谁（标签）的过程。
写法：选择器{属性：值；属性：值}
属性：
属性
扫描二维码关注公众号，回复：
2775583 查看本文章
|
解释 |
Width:20px; |
宽 |
Height:20px; |
高 |
Background-color:red; |
背景颜色 |
font-size:24px; |
文字大小 |
text-align:left | center| right |
内容的水平对齐方式 |
text-indent:2em; |
首行缩进 |
Color:red; |
文字颜色 |
1、基础选择器
(1) 标签选择 标签{ 属性：值；}
特点：所有的标签全部生效类选择器
(2) 类选择器 .自定义类名{ 属性：值；}
特点：谁调用，谁生效
一个标签可以调用多个类选择器（中间用空格隔开）
一个类选择器可以被多个标签调用
类选择器命名规则：不能使用纯数字或者数字开头来定义类名
不能使用特殊符号(_除外)
不推荐使用汉子来定义类名
不推荐使用标签名，属性，属性值来定义类名
(3) Id选择器 #自定义名{ 属性：值；}
特点：谁调用，谁生效
一个标签只能调用一个ID选择器
一个id选择器在一个页面只能被调用一次
(4) 通配符选择器 *{属性：值；}
特点：整个页面所有标签调用
2、复合选择器
(1) 集选择器 标签+类（id）选择器{ 属性：值；}
注：中间不可以有空格
特点：既是某个标签，而且这个标签调用了类（id）选择器
(2)后代选择器 选择器+空格+选择器{ 属性：值；}
基本要求：包含（嵌套）关系
特点：父在前，子在后。
无限制隔代。
标签选择器，类选择器，ID选择器可以自由组合。
(3)子代选择器 选择器>选择器 { 属性：值；}
特点：选择的是直接下一代
(4)并集选择器 选择器+，+选择器+，+选择器{ 属性：值；}
注：中间是逗号
三、样式表书写位置
(1)内嵌式写法
<head>
<style type=”text/css”>
样式表写法
</style>
</head>
(2) 外链式写法
<link rel=”stylesheet” href=”1.css”>
(3)行内样式表
<h1 style=”font-size:30px;color:red;”>今天周五</h1>
总结：
内嵌式写法：样式只作用于当前文件，没有真正实现结构表现分离。
外链式写法：作用范围是当前站点，范围广，真正实现结构表现分离。
行内样式表：作用范围仅限于当前标签，范围小，结构和表现完全混为一谈，不推荐使用。
四、标签分类（显示方式）
1、块元素
典型代表：div, h1-h6, p, ul, li
特点：独占一行
可以设置宽高
嵌套包含下，资款元素宽度（没有定义的情况下和父块元素默认一致）
2、行元素
典型代表：span, a, strong, em, del,ins
特点：在一行上显示
不能直接定义宽高（宽高为内容撑开宽高）
3、行内块元素（实际上没有，自己总结）
典型代表： input， img
特点：在一行上显示
可以设置宽高
4、块元素、行元素之间的转化
(1)块元素转行内元素：display:inlline
<style type=”text/css”>
Div,p{
Display:inline;
}
</style>
<div>周五</div>
<p>18岁！</p>
(2)行内元素转块元素：display：block
(3）块和行内元素转行内快元素：display：inline-block
特点：将块元素，行元素一起转为行内块元素
原来的块元素和行元素都在一行，可以设置宽高。
<style type="text/css">
div,span,input{
display: inline-block;
}
</style>
<body>
<div>张娇娇</div>
<span>努力学习</span>
<input type="text" value="一定会找到好工作！">
</body>
五、CSS三大特性
1、层叠性
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后面的代码。
2、继承性
发生的前提：包含、（嵌套）关系
文字颜色、大小、字体、字体粗细、风格、行高可以继承
总结：文字的所有属性都可以继承
特殊情况：h1-h6不能继承文字大小（浏览器内核单独给他大小）
A标签颜色不能继承（浏览器内核单独给他一个颜色）
3、优先级
默认选择器 < 标签选择器 < 类选择器 < ID选择器 < 行内选择器 < !important
0 1 10 100 1000 1000以上
Important用法：div{
corlor:red !important;
}
优先级特点：继承的权重为0
权重会叠加 （100个标签干不过一个类）
六、链接伪类
1、a:link{ 属性：值 } a{ 属性：值 } 两者效果一样
方法：a:link { 属性：值 } 链接默认状态
a:visited { 属性：值} 链接访问之后的状态
a:hover { 属性：值} 鼠标放到链接上显示的状态
a:active { 属性：值} 链接激活的状态（点击，一直按着）
:focus { 属性：值} 获取焦点
用法：a:active{
color:red;
}
<a>这是点击后的状态，是红色</a>
2、文本修饰
链接默认情况下有下划线，可通过以下方法修饰
text-decoration : none | underline | line-through
无下划线 有下划线 删除线
七、背景属性
1、属性
background-color 背景颜色
background-image 背景图片
.box{
background-image : url (“1.png”);
}
background-repeat 背景平铺
默认平铺repeat
设值no-repeat | repeat-x |repeat-y
background-position 背景定位
设值：left | right | center | top | bottom
background-position:right;
方位值只写一个时，另外一个值默认居中。
background-position:right,bottom;
写两个方位值时，顺序没有要求
background-position:20px,30px;
写两个具体指的时候，第一个值代表水平方向，第二个值代表垂直方向
background-attachment 背景是否滚动 scroll | fixed
Scroll:背景滚动
Fixed：背景固定
注：背景的位置是相对于浏览器而言，不是相对于盒子而言。
2、背景连写
background：red url(1.png) no-repeat bottom scroll;
图片不可以省，其他都可以省，
顺序不作要求