1、CSS介绍
概念：
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行渲染
语法：每一个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每一个声明以后用分号结束
span {width: 1000px;background-color: red}
注释：/*注释内容*/
2、CSS的引入方式
一、行内样式
行内式是在标签的style属性中设定CSS样式。
<p style="color: red;font-size:20px">Hello World!</p>
二、内部样式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式以下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p {color:green;font-size:20px}
</style>
</head>
三、外部样式
外部样式就是将css写在一个单独的文件(.css文件)中，而后在HTML页面进行引入。
<link rel="stylesheet" href="Mystyle.css"> # 能够在任意位置声明，但通常在head标签内部声明
3、CSS基本选择器
一、元素选择器：直接赋予某元素一些样式，直接选中这个元素标签
p {color: "red";}
二、ID选择器：赋予某ID一些样式，#表明ID选择器选中这个ID
#i1 {background-color: red;}
三、类选择器：赋予某类class一些样式，.表明类选择器选中这个class
.c1 {font-size: 14px;}
p.c1 {color: red;} # 这个是表明有c1这个类的p元素
<p class="c1">我是有c1的p元素</p> # 样式生效
<i class="c1">我是有c1的i元素</i> # 样式不生效
注意：
样式类名不要用数字开头（有的浏览器不兼容）
标签中的class属性若是有多个，要用空格分隔。
四、通用选择器：全部的标签均可以使用这个样式(可是优先级高的会覆盖这个通用样式)
* {font-size:24px;}
4、组合选择器
一、儿子选择器：只找儿子，孙子不要
/*选择div下的a标签*/
div>a {font-size: 25px}
<div>
<a href="">我是儿子a</a>
<a href="">我也是儿子a</a>
<p>
<a href="">我是孙子a</a> <!-- 孙子a字体没有变大-->
</p>
</div>
二、后代选择器：子子孙孙
/*在ID值为d1的标签中找p标签*/
#d1 p {color: green}
<div id="d1">
<p>我是儿子P标签</p>
<p>我也是儿子P标签</p>
<a href="">
<p>我是孙子P标签</p>
</a>
</div>
三、毗邻选择器
/*选择紧接着<div></div>元素以后的一个<p></p>元素*/
div+p {color: deeppink}
<div></div>
<p>div下的第一个P</p> <!--变粉色-->
<p>div下的第二个P</p> <!--没有变粉色-->
四、弟弟选择器
/*ID值为d2的标签后面全部的兄弟p标签*/
#d2~p{color:purple}
<div id="d2">d2</div>
<p>我是d2的弟弟p</p> <!--样式生效-->
<a href="">我是d2的弟弟a</a> <!--样式不生效-->
<p>我也是d2的弟弟p</p> <!--样式生效-->
五、注意
儿子、孙子表明的是在某个标签内的其余标签，是被某个标签包含的，例如：
<div>
<p>div的儿子</p>
</div> 而毗邻和弟弟并非包含关系，是同级的，例如：
<div></div>
<p>div的弟弟(毗邻)</p>
<p>div的弟弟</p>
5、属性选择器
一、经常使用的：
/*用于选取带有指定属性的元素*/
/*找到全部带title这个属性的p标签*/
p[title] {color: red;}
<p title="">p1</p>
<p title="">p2</p>
<p title="123">p3</p>
p一、p二、p3都生效
/*用于选取带有指定属性和值的元素。*/
/*找到title属性值是'hello'的p标签*/
p[title="hello"] {color: green;}
<p title="">p1</p>
<p title="">p2</p>
<p title="hello">p3</p>
只有p3生效
二、不经常使用的
/*找到全部title属性以hello开头的div元素*/
div[title^="hello"] {
color: red;
}
/*找到全部title属性以hello结尾的div元素*/
div[title$="hello"] {
color: yellow;
}
/*找到全部title属性中包含（字符串包含）hello的div元素*/
div[title*="hello"] {
color: red;
}
<div title="helloworld">helloworld</div>
<div title="hello world">hello world</div>
都生效
/*找到属性值按照空格分割获得的列表中包含指定的值的div元素*/
div[title~="hello"] {
color: green;
}
<div title="helloworld">helloworld</div>
<div title="hello world">hello world</div>
只有第二个生效
6、分组和嵌套
一、分组
当多个元素的样式相同的时候，咱们没有必要重复地为每一个元素都设置样式，咱们能够经过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：
div, p {
color: red;
}
上面的代码为div标签和p标签统一设置字体为红色。
二、嵌套
多种选择器能够混合起来使用，好比：.c1类内部全部p标签设置字体颜色为红色。
.c1 p {
color: red;
}
7、伪类选择器
根据标签不一样状态给标签设置不一样样式
伪类选择器格式：标签:状态 {样式}
例如：
/* 未访问的连接 */
a:link {
color: red
}
/* 已访问的连接 */
a:visited {
color: blue
}
/* 鼠标移动到连接上 */
a:hover {
color: yellow
}
/* 点击连接的那一瞬间 */
a:active {
color: pink
}
/*鼠标移上去以后*/
span:hover {color: purple}
/*input输入框获取焦点时样式*/
input:focus {
background-color: green
}
8、伪元素选择器
经过CSS操做HTML内容
一、first-letter
/*经常使用的给首字母设置特殊样式*/
div:first-letter {
font-size: 48px;
color: red;
}
二、before
/*在每一个<p>元素以前插入内容*/
p:before {
content:"*";
color:red;
}
三、after
/*在每一个<p>元素以后插入内容*/
p:after {
content:"[?]";
color:blue;
}
before和after多用于清除浮动。
四、例如
/*css样式*/
<style type="text/css">
div:first-letter{
font-size: 28px;
color: red;
}
p:before {
content: "*";
color: red;
}
p:after {
content: "?";
color: deeppink;
}
</style>
/*body部分代码*/
<body>
<div>幽谷茶香，感叹生命的茁壮</div>
<div>幽谷茶香，感叹生命的茁壮</div>
<p>幽谷茶香，感叹生命的茁壮</p>
<p>幽谷茶香，感叹生命的茁壮</p>
<p>幽谷茶香，感叹生命的茁壮</p>
</body>
9、选择器的优先级
一、选择器的优先级：浏览器是根据不一样选择器的权重来决定选用哪一个样式的，具体的选择器权重计算方式以下 内联样式(1000) > id选择器(100) > 类选择器(10) > 元素选择器(1) > 继承(0)
内联样式的权重为：1000 --> <p style="color: red;">内联样式</p>
id选择器的权重为：100 --> <p id="d1">id选择器</p>
类选择器的权重为：10 --> <p class="c1">类选择器</p>
元素选择器的权重为：1 --> <p>元素选择器</p>
继承的权重为：0
例子：
/*css样式*/
<style>
/* p1权重100 */
#p1 {color: orange}
/* .c1>.c2权重10+10=20 */
.c1>.c2 {color: yellow}
/* c2权重10 */
.c2 {color: green}
/* p权重1 */
p {color: red}
</style>
/*body部分代码*/
<div class="c1">
<p class="c2" id="p1" >c1内部的p标签</p>
</div>
/*最终颜色是orange*/
注意：权重计算永不进位 也就是说想.c1>.c2这样每一个类选择器权重是10(两位数)，两个就是20，虽然权重能够相加， 可是权重计算不会进位，也就是说就算有11个类选择器相加，也不会进位，不会变成3位数， 所以不管多少个类选择器相加权重也是同样没有一个id选择器的权重大，只是能够在类选择器中占的权重大， 好比.c1>.c2>.c3权重比.c1>.c2权重大 不讲道理的important： 经过添加!important方式来强制让样式生效，但并不推荐使用。由于若是过多的使用!important会使样式文件混乱不易维护。 万不得已的状况下才使用!important
二、css继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。 继承是一种机制，它容许样式不只能够应用于某个特定的元素，还能够应用于它的后代。
例如一个div定义了的字体颜色值也会应用到div的后代中。
/*css样式*/
<style>
.c {color: red}
</style>
/*body部分代码*/
<body>
<div class="c">
abc
<p>def</p>
<div>
<p>gh</p>
</div>
</div>
<p>qwe</p>
</body>
上面的代码中abc def gh 都会变成红色
而qwe则不会变
然而CSS继承性的权重是很是低的，是比普通元素的权重还要低的0， 咱们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
/*css样式*/
<style>
.c {color: red}
p {color: blue;}
</style>
/*body部分代码*/
<body>
<div class="c">
abc
<p>def</p>
<div>
<p>gh</p>
</div>
</div>
<p>qwe</p>
</body>
上面的代码中只有abc会变成红色
而 def gh qwe则变成蓝色
注意： 继承是CSS重要的一部分， 但CSS继承也是有限制的， 有一些属性不能被继承， 如：border, margin, padding, background等。