1、css介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
2、css语法
2.1 css组成
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
2.2 css注释
/*这就是注释*/
3、css的引入方式
3.1 行内引入
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: blue">css</p>
3.2 内部样式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3.3外部样式
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<link href="text.css" rel="stylesheet" type="text/css"/>
4、基本选择器
4.1标签选择器
p {color: "red";}
注：直接设定该标签，body内部的该类型标签都会遵循此设定，需要注意，在块儿级标签内部的其他标签会遵循块儿级标签的设定，除非自身也设定了，这样才优先满足自身设定
4.2 id选择器
#i1 {
background-color: red;
}
注：使用id时，需要在前面加上#
4.3 类选择器
.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}
注：1.样式类名不要使用数字开头，即使浏览器不报错，其样式效果也无法实现
2.标签里的class属性存在多个，需要用空格分隔
4.4 通用选择器
* {
color: white;
}
注：如果存在其他类型的选择器时，优先满足这些选择器的样式设定
5、组合选择器
5.1后代选择器： div span
div内部的span都会存在效果
<div>
<span>div内部的第一个span</span>
<p>div内部的第一个p
<span>div内部里第一个span里的span</span>
</p>
<span>div内部第二个span</span>
</div>
5.2儿子选择器 div>span
在div内部与其直接相关的span才存在样式效果
5.3毗陵选择器 div+span
div下面若存在一个紧挨着的span标签，则该标签存在效果，有且只有这一个会起作用
5.4弟弟选择器 div~span
div下面只要存在span标签，无论有多少，则span标签都会存在效果
6、属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
不常用的属性选择器：
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
color: green;
}
7、分组与嵌套
7.1分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：
div,span,p {color:red;}
上面的代码为div标签和p标签统一设置字体为红色。通常，我们会分两行来写，更清晰
div,
p {
color: red;
}
7.2嵌套
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色
.c1 p {
color: red;
}
这种效果与组合选择器类似，可以回顾一下
8.1、伪类选择器
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
b
8.2伪元素选择器
first-letter
常用的给首字母设置特殊样式：
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;
}
after
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
before和after多用于清除浮动。?????
9、选择器的优先级
先介绍一下css的继承：
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
body {color:red;}
此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式
p {color:blue;}
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
选择器的优先级：
相同的选择器 不同的引入方式
如果body内部通过style设置了样式，则以该样式为准
body内部没设置样式，则在head里哪种引入方式谁更靠近标签，谁的样式就有效
不同的选择器 同样的引入方式
行内样式 > id选择器 > 类选择器 > 标签选择器
除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
!important 的使用补充
作用：在别的样式内部使用它，可以强制让该元素继承父元素的样式，自身的样式废弃
注：一个！important只对其下的一个样式起作用，使用多个，才能达到改变多种样式的效果！
p {
!important
font-size: 34px;
!important
color: green;
}
div {
font-size: 28px;
color: blueviolet;
}
<body>
<div>div1
<p>我是div里的p
<span>我是p里的span</span>
</p>
<div>我是div里的div2号
</div>
</div>
</body>
结果：标签p,span,div均共用div的文本字体与颜色！
解析：div是p , span 的父元素， span自身没有选择器作用，默认用父元素p的，可是使用了！important 强制使得p继承父元素div的样式，span也随波逐流了！
10、样式修改
10.1 宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
10.2 字体属性
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
10.3 字体大小
p {font-size:24px;}
如果设置成inherit表示继承父元素的字体大小值。
10.4 字重（粗细）
font-weight用来设置字体的字重（粗细）。
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
10.5 文本颜色
颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间
10.6 文字属性
text-align 属性规定元素中的文本的水平对齐方式。
值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
10.7文字装饰
text-decoration 属性用来给文字添加特殊效果。
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。
补充：常用的为去掉a标签默认的自划线：
a {text-decoration:none}
首行缩进：将段落的第一行缩进48像素：
p {text-indent:48;}
11.背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
简写：background:#336699 url('1.png') no-repeat left top;
应用场景：使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
12、边框 border
边框属性：
border-width 边框宽度
border-style 边框样式
border-color 边框颜色
#i1 {
border- 2px;
border-style: solid;
border-color: red;
}
简写：#i1 { border: 2px solid red;}
边框样式
值 描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。
补充：除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
#i1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
利用边框画一个圆
#i1 {
border-400px;
border-height:400px;
border-color:green;
border-radius:50%;
}
注：用这个属性能实现圆角边框的效果。将border-radius设置为长或高的一半即可得到一个圆形。超出50%效果是一样的
display属性：用于控制html的元素的显示效果。
display:none; 在文档中存在。但是在浏览器中不显示。一般配合javascript代码使用
display:block; 默认占满整个页面宽度 。若指定了宽度，则会用margin填充剩下的部分。
display:inline; 将块级元素当成行内元素显示， 此时若设置块级元素的属性，基本上是没作用。
display:inline-block; 使元素同时具有行内元素和块级元素的特点。
display:none 与 visibility:hidden 的区别：
前者可以隐藏某个元素，且该元素不会占用任何空间。即该元素 不仅被隐藏，而且原本占用的空间也从页面布局中消失。
后者也可以隐藏某个元素，但是隐藏的元素任需占用与未隐藏之间一样的空间，任然会被隐藏布局。