一、css的引入方式
css --- 层叠样式表。 定义如何显示HTML元素。
引入方式
1：行内样式
如 ：<p style = "color:red"> Hello world</p>
2: 内部样式
在html中head头部加入<style>样式</style>
如：<style>
p{color:red}
</style>
3: 外部样式
外部样式就是将css单独写在一个独立的文件中，然后再页面头部引入即可。
如：<link href = "my.css" rel = "stylesheet" type="text/css" />
这三种样式的优先级
1. 行内样式优先级最高
2. 选择器都一样的情况下，谁靠近标签谁就生效
3. 选择器不同时，通过计算权重来判断。
二、CSS选择器
1. 基本选择器
元素选择器 p{color:red;}
ID选择器 #p1 {font-size:16px;}
类选择器 .c1{color:green;}
通用选择器 *{color:blue;}
2.组合选择器
后代选择器 p span{color:red;} /*用空格表示p内部的span标签，然后对这个span标签设置字体颜色*/
儿子选择器 div>p{color:blue;} /*选择所有父级是<div>元素的<p>元素*/
毗邻选择器 div+p{color:red;} /*选择所有紧挨着<div>元素之后的<p>元素*/
弟弟选择器 div~p{border:1px solid red;} /*选择div后面所有的p标签*/
3.属性选择器
p[title]{color:red;} /*用于选取带有指定属性的元素*/
p[title='213']{color:green;} /*用于选取带有指定属性和值的元素*/
[title^="hello"]{color:red;} /*找到所有title属性以hello开头的元素*/
[title$='hello']{color:red;} /*找到所有title属性以hello结尾的元素*/
[title*="hello"]{color:red;} /*找到所有title属性中包含（字符串包含）hello的元素*/
[title~="hello"]{color:red;} /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
4.分组
div,p{color:red;} /*div标签和p标签统一设置字体为红色*/
5.嵌套
多种选择器可以混合起来使用，跟后代选择器一样
.c1 p{color:red;} /*.c1类内部所有p标签设置字体颜色为红色*/
6.伪类选择器
a:link{} /*未访问的链接*/
a:visited{} /*已访问的链接*/
a:hover{} /*鼠标移动到链接上*/
a:active{} /*选定的链接（鼠标按下的链接）*/
input:focus{} /*input输入框获取焦点时样式*/
7.伪元素选择器
first-letter 常用给首字母设置特殊样式
p:first-letter {
font-size: 18px;
color: red;
}
before 在指定元素前插入内容
/*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; }
after 在指定元素之后插入内容
/*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; }
其中，before和after多用于清除浮动。
.clearfix:before,.clearfix:after{
content: "";
display: block;
clear:both;
}
三、选择器的权重
内联样式：1000
ID选择器：100
类选择器：10
元素选择器：1
注意：权重计算永不进位
四、CSS属性相关
1. 字体属性
font-family 文字字体
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
/*如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。*/
font-size:14px; 设置字体大小
font-weight 设置字体的粗细
font-weight的值有：
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal,而700等同于bold
inherit 继承父元素字体的粗细值
color 文本颜色
十六进制 - 如 color:#ff00ff;
RGB表示 - 如 color:rgb(255,0,0);
颜色的名称 - 如 color:red;
此外，还可以通过rgba(255,0,0,0,5) 方式来设置，第四个值为alpha,颜色的透明度，范围为0.0~1.0之间。
2.文字属性
text-align 文本的水平对齐方式
text-align 的值有：
left 左对齐（默认）
right 右对齐
center 居中对齐
justify 两端对齐
text-decoration 给文字添加特殊效果
text-decoration 的值有：
none 默认。定义标准的文本
underline 下划线
overline 上划线
line-through 删除线
inherit 继承父元素的text-decoration属性的值
a {
text-decoration: none;
}
/*常用给超链接去掉默认的下划线*/
text-indent 首行缩进
3.背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: right top（20px 20px）;
简写方式 ：background:#fff url('1.png') no-repeat right top;
4.边框属性
border-width 边框线粗细值 如：border-width：2px;
border-style 边框线型样式 如：border-style：solid;
border-color 边框线型颜色 如：border-color：red;
简写方式： border:1px solid red;
border-style的值有：
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
5.display属性
用于控制HTML元素的显示效果。
display:none 和visibility:hidden的区别：
visibility:hidden 这个可以隐藏某个元素。但是隐藏的元素扔需占用与未隐藏之前一样的空间。换句话说就是，该元素虽然被隐藏了，但其所占空间位置仍然保留。
display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏，而且原本所占用的空间也会从页面布局中消失。
6.CSS盒子模型
margin 外边距（元素与元素之间的距离）
padding 内边距（内容与边框之间的距离）
border 围绕在内边距和内容外的边框
content 盒子的内容，显示文本和图像
margin:5px 10px 15px 20px; 顺序：顺时针（上、右、下、左）
margin:5px 10px 15px ; 顺序：上、左右、下
margin:5px 10px 15px; 顺序：上下、左右
margin:5px ; 上下左右都是5px
padding顺序同margin
7.float浮动
浮动元素会产生一个块级框，二不论它本身是行内标签还是块级标签。
浮动的两个特点：
a.浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
b.由于浮动框不在文档的普通流中，所以文档的普通流中的边框表现的就像浮动框不存在一样。
float:left; 向左浮动
float:right; 向右浮动
float:none; 默认值，不浮动
clear 属性规定元素的哪一侧不允许其他浮动元素。
以下是解决浮动带来的塌陷问题
.clearfix:before,
.clearfix:after{
content:"";
display:block;
clear:both;
}
8. overflow溢出属性
overflow:visible; 默认值。内容不会被修剪，会呈现在元素框之外。
overflow:hidden; 内容会被修剪，并且其余内容是不可见的。
overflow:scroll; 内容会被修剪，但是浏览器会显示滚动条，可以查看其余的内容。
overflow:auto; 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:inherit; 规定应该从父元素继承overflow属性的值。
overflow 水平和垂直均设置
overflow-x 设置水平方向
overflow-y 设置垂直方向
9. position 定位属性
position:static 默认值，无定位，不能当做绝对定位的参照物，并且设置标签对象的left,top等值是不起作用的。
position:relative; 相对定位。以自己原始位置为参照物。
position:absolute; 绝对定位。以靠自己最近的已定位的祖宗元素作为参照物定位的。如果元素没有已定位的祖宗元素，那么它就以body元素作为参照物。
position:fixed; 固定定位。对象脱离文档流，以窗口为参考点 进行定位。
10. z-index属性
设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。z-index仅能在定位元素上奏效。
11.opacity (定义透明度)
范围是0.0~1.0
和rgba()的区别：
a: opacity改变元素、子元素的透明度效果
b: rgba() 只改变背景颜色的透明度效果。