1.css介绍
css就是用来调整html的样式，它的专业名称层叠样式表。也可以这么理解css就是定义如何显示HTML元素。
2.css基本格式
每个css样式由两个部分组成：选择器和声明。声明又包含属性和属性值。每个声明之后用分号结束
可以这么理解把选择器当做一个人，声明就是给这个人添加什么，比如衣服（什么颜色的衣服），肉（那个部位的）什么的。
选择器{
属性1：值;
属性2：值;
}
3.css的几种引入方式
css的引入方式分为行内样式，内部样式，外部样式。
1.行内样式
行内样式是在标记的style属性中设定css样式。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行内样式-->
<div style="width: 110px;height: 20px;background-color: hotpink"></div>
</body>
</html>
2.内部样式
嵌入式是将css样式集中写在网页的 < head>< /head>标签对的< style>< /style>标签中。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<!--内部样式-->
<meta charset="UTF-8">
<title>Title</title>
<style>
#a{
width:10px;
height:20px;
background-color: lightpink;
}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
3.外部样式
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
例子：
先生成一个叫color的css文件代码如下
#a{
background-color: blue;height:100px; width:100px;color: aqua;
}
然后就是html的文件代码如下：
<!--外部样式-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="color.css" type="text/css">
</head>
<body>
<p id="a">hello</p>
</body>
</html>
在html代码中给段落标签p的id赋值给a与css里面的样式互相对应
效果如图
css选择器
基本选择器
基本选择器共有：元素选择器、id选择器、类选择器、通用选择器
1.元素（标签）选择器
语法：标签名{属性：属性值；}
说明：标签选择器就是使用结构中元素名称直接作为选择符。
代码如下
p {color: "red";}
这里来上实例
<!--元素选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
p{
background-color: red;height: 100px;width: 100px
}
</style>
</head>
<body>
<p>hello</p>
</body>
</html>
效果如下
2.id选择器
语法：#id名{属性：属性值；}
说明：id选择器是使用元素身上的id属性作为选择符。所以想要使用id选择器，需要先为元素上定义id属性。
代码如下
<div id="box"></div>
#box { background-color: red; }
实例代码如下
<!--id选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
background-color: red;
}
</style>
</head>
<body>
<div id="box">GGBOY</div>
</body>
</html>
效果如下
3.类选择器
语法：.class名{属性：属性值；}
说明：当我们使用类选择器时，需要先为相应的元素添加class属性。他的属性值就是我们要使用类名。
代码如下
<div class="box">GGBOY</div>
.box{background-color: red;}
实例代码如下
<!--类选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background-color: red;
}
</style>
</head>
<body>
<div class="box">GGBOY</div>
</body>
</html>
效果如图
通用选择器
通用选择器，也叫初级选择器，通配符*
语法：*{属性：属性值；}
说明：*表示页面中所有的元素（标签），我们常用来重置样式。
基本代码如下：
* { color: red; }
例子代码如下
<!--通用选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
color: red;
}
</style>
</head>
<body>
<h1>3333</h1>
<p>4444</p>
<span>555</span>
</body>
</html>
这里用通用选择器将body里面的内容都变成红色。
效果如图
注意一下这个选择器适合用来重置使用。
组合选择器
组合选择器共有：后代选择器、子元素选择器、相邻兄弟选择器、弟弟选择器
1.后代选择器
选择指定元素内部所有符合条件的后代元素。后代选择器使用空格分隔选择器
这里以div块级标签为例将这个标签里面的p标签都进行修改
代码
div p {
/* 选择 div 元素内部的所有 p 元素 */
}
实际例子代码如下
<!--后代选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div p{
color: red;
}
</style>
</head>
<body>
<div>
<p>第一个后代</p>
<p>第二个后代</p>
<p id="a">第三个后代</p>
<h4>分支</h4><!--这里搞一个不一样的用于区分-->
</div>
</body>
</html>
实际效果
2.子元素选择器
选择指定元素的直接子元素。子元素选择器器使用>符号分隔选择器
假设要修改列表下所有li的元素就可以使用子元素选择器
代码
ul > li {
/* 选择 ul 元素内部的直接子元素 li 元素 */
}
实例代码如下
<!--子元素选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul>li{
color:blue;
}
</style>
</head>
<body>
<ul type="circle">
<li>第一子元素</li>
<li>第二子元素</li>
<li>第三子元素</li>
</ul>
</body>
</html>
效果如图
3.相邻兄弟选择器
选择与指定元素在同一层级且紧接在它后面的元素。相邻兄弟选择器使用+符号分隔选择器。
这里以h2和p标签为例
代码
h2 + p {
/* 选择紧接在 h2 元素后面的 p 元素将此元素进行修改 */
}
实例代码如下
<!--相邻兄弟选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h2 + p{
color: mediumblue;
}
</style>
</head>
<body>
<h2>不变</h2>
<p>变</p>
</body>
</html>
效果如下
这个选择器的功能就是给被选择元素紧贴的元素进行修改。
通用兄弟选择器
选择与指定元素在同一层级的所有后续兄弟元素。通用兄弟选择器使用~符号分隔选择器
这里以h2和p为例子
代码
h2 ~ p {
/* 选择所有与 h2 元素在同一层级的 p 元素 */
}
实例代码如下
<!--通用兄弟选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h2~p{
color: red;
}
</style>
</head>
<body>
<h2>66666</h2>
<p>55555</p>
<p>4444</p>
<p>333</p>
<p>22</p>
<p>1</p>
</body>
</html>
效果如图
然后有一个特殊的情况就是当添加class这个属性时的情况
代码如下
<!--通用兄弟选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h2~.jun{
color: red;
}
</style>
</head>
<body>
<h2>66666</h2>
<p class="jun">55555</p>
<p class="jun">4444</p>
<p class="jun">333</p>
<p class="jun">22</p>
<p>1</p>
</body>
</html>
这个代码里面有一个p的标签没有添加class属性，用于区分
效果如图
属性选择器
属性选择器是通过元素的属性以及属性值来选择对应元素的，属性名我们可以自己定义
语法：选择器[属性名]{属性：属性值；}
说明：只要选择器元素中有当前属性就会被选中。
这里将body里面的div都添加属性name
代码
div[name]{
/* 将所有具有name属性的div标签 */
}
实例代码如下
<!--属性选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div[name]{
color: mediumblue;
}
</style>
</head>
<body>
<div name="123">div</div>
<div name="456">div</div>
<div>没有name属性的div</div>
</body>
</html>
这个代码里面有一个div标签没有添加name的属性
效果如下
然后就是其它情况
1.只修改name为123的div标签
代码如下
<!--属性选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div[name="123"]{
color: mediumblue;
}
</style>
</head>
<body>
<div name="123">div</div>
<div name="456">div</div>
<div>没有name属性的div</div>
</body>
</html>
这个代码里面只修改name属性值为123的div标签
效果如图
分组选择器
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式
代码
div, p {
/* 将div和p标签样式给修改修改 */
}
实例代码如下
<!--分组选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,p{
color: mediumblue;
}
</style>
</head>
<body>
<div>123456</div>
<p>789101112</p>
</body>
</html>
效果如图
伪类选择器
伪类用于定义元素的特殊状态
例如，它可以用于：
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
实例代码
/* 未访问的链接 */
a:link { color: #FF0000 }
/* 鼠标移动到链接上 */
a:hover { color: #FF00FF }
/* 选定的链接 */
a:active { color: #0000FF }
/* 已访问的链接 */
a:visited { color: #00FF00 }
/*input输入框获取焦点时样式*/
input:focus { outline: none; background-color: #eee; }
第一个实例给未访问的链接添加颜色
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{
color: red;
}
</style>
</head>
<body>
<a href="伪类选择器.html">点击</a>
</body>
</html>
效果如图
但是如果这个网站被点开过就会无法修改颜色了。
第二个实例当鼠标移动到链接上有颜色变化
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:hover{color: greenyellow}
</style>
</head>
<body>
<a href="伪类选择器.html">点击进入下一面</a>
</body>
</html>
效果如下
第三个实例选定的链接
就是在点击链接是瞬间变色
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:active{color: greenyellow}
</style>
</head>
<body>
<a href="伪类选择器.html">点击进入下一面</a>
</body>
</html>
效果就无法展示了。
第四个实例给已访问的链接添加颜色
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:visited{color: blueviolet}
</style>
</head>
<body>
<a href="伪类选择器.html">点击进入下一面</a>
</body>
</html>
效果如图
第五个实例input输入框获取焦点时样式
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input:focus{
background-color: blueviolet;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
效果如图
伪元素选择器
伪元素用于设置元素指定部分的样式。
1.first-letter
常用于给首字母设置特殊样式：
这里以p标签为例子
p:first-letter { font-size: 48px; color: red; }
实例代码
<!--first-letter-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p:first-letter{font-size: 48px;color: blue}
</style>
</head>
<body>
<p>supper</p>
</body>
</html>
效果如图
2.before
此元素用于给指定的标签前面插入内容
这里以p标签为例子
/*在每个<p>元素之前插入内容*/ p:before { content:"6666"; color:red; }
content是要被插入内容
实例代码
<!--before-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p:before{content:"6666";color:red}
</style>
</head>
<body>
<p>supper</p>
<p>sleep</p>
<p>eat</p>
</body>
</html>
效果如图
3.after
此元素用于给指定的标签后面插入内容
以p标签为例子
代码
/*在每个<p>元素之后插入内容*/ p:after { content:"？？？？"; color:blue; }
content是要被插入的内容
实例代码
<!--after-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p:after{content:"6666";color:red}
</style>
</head>
<body>
<p>supper</p>
<p>sleep</p>
<p>eat</p>
</body>
</html>
效果如图
注意点：before和after多用于清除浮动。
选择器的优先级
上面的很多选择器，在一个html页面中有很多种方式找到一个元素并且为其设置样式，那浏览器会根据不同选择器的权重来决定
如图
但是如果有的样式还是没有效果可以使用!important方式来强制让样式生效，但并不推荐使用。因为如果过多使用会造成样式文件混乱不易维护。
具体代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: blueviolet!important;
}
</style>
</head>
<body>
<p style="color: red">JUN WAN</p>
</body>
</html>
上面代码的情况是我给p的颜色先定义为红色，然后我用!important来强制将颜色变成紫色
效果如下
不到没办法的时候不要用这个。
CSS继承
继承是CSS的一个主要特征，它是依赖于后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了字体的颜色值也会应用到段落的文本中。
但是CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
标签的嵌套
关于标签的嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
比如p标签不能包含块级标签，p标签也不能包含p标签。