参考 https://www.cnblogs.com/yuanchenqi/articles/5977825.html
引入方式
方法一（标签里设置）
<!DOCTYPE html>
<html>
<head>
<title>Python</title>
<link rel="icon" href="https://common.cnblogs.com/favicon.ico"/>
<meta charset="utf-8">
</head>
<body>
<div style="color: #ffff77;background: crimson">你好</div>
</body>
</html>
方法二（head里面设置）
<!DOCTYPE html>
<html>
<head>
<title>Python</title>
<link rel="icon" href="https://common.cnblogs.com/favicon.ico"/>
<meta charset="utf-8">
<style>
#hello{
color: crimson;
background: cyan;
}
</style>
</head>
<body>
<div id="hello">你好</div>
</body>
</html>
方法三(引入link 主要使用方法)
<!DOCTYPE html>
<html>
<head>
<title>Python</title>
<link rel="icon" href="https://common.cnblogs.com/favicon.ico"/>
<meta charset="utf-8">
<link type="text/css" rel=stylesheet href="css_contrl.css"> <!--必须加rel 指定css引用-->
</head>
<body>
<div id="hello">你好</div>
</body>
</html>
css_contrl.css文件内容
#hello{
color: crimson;
background: cyan;
}
方法四（import导入，效果不好，会出现先无渲染界面，而且还有数量限制)
<!DOCTYPE html>
<html>
<head>
<title>Python</title>
<link rel="icon" href="https://common.cnblogs.com/favicon.ico"/>
<meta charset="utf-8">
<!--link type="text/css" rel=stylesheet href="css_contrl.css"> <!--必须加rel 指定css引用-->
<style type="text/css">
@import"css_contrl.css"; .css文件的路径
</style>
</head>
<body>
<div id="hello">你好</div>
</body>
</html>
css_contrl.css内容
#hello{
color:red;
background: skyblue;
}
选择器
基本选择器
*{ /*通用元素选择器，作用于所有标签*/
color:red;
background: skyblue;
font-size: 50px;
}
p{ /*标签选择器,作用于所有p标签*/
color:red;
background: skyblue;
}
#hello{ /*id选择器，作用于id=hello的标签*/
color:red;
background: skyblue;
}
.cl1{ /*类选择器*，作用于class=cl1的域标签，用的较多*/
color: red;
font-size: 45px;
}
组合选择器
<!DOCTYPE html>
<html>
<head>
<title>Python</title>
<link rel="icon" href="https://common.cnblogs.com/favicon.ico"/>
<meta charset="utf-8">
<link type="text/css" rel=stylesheet href="css_contrl.css" />
</head>
<body>
<p class="c1">字段</p>
<div id="outer">首页
<p id="p1">测试
<p class="c1">test</p>
</p>
<p class="c1">生产</p>
</div>
</body>
</html>
#outer p{ /*后代选择器，渲染div里面的p标签里面内容,不管子代还是孙子代p，也可以三层 div .c1 #a */
color:hotpink;
font-size: 40px;
}
#outer .c1{
color:hotpink;
font-size: 40px;
}
#outer>p{ /*子代选择器，与后代区别只渲染子代，不渲染孙带*/
color:hotpink;
font-size: 40px;
}
div,p{ /*多元素选择器，DIV与P标签内容都渲染*/
color:hotpink;
font-size: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Python</title>
<link rel="icon" href="https://common.cnblogs.com/favicon.ico"/>
<meta charset="utf-8">
<link type="text/css" rel=stylesheet href="css_contrl.css" />
</head>
<body>
<p class="c1">字段</p>
<span>head</span>
<div id="outer">首页</div>
<p >测试</p> <!--只渲染此行-->
<p >生产</p>
</body>
</html>
#outer + p{ /*毗邻选择器，渲染div下面紧挨的p标签里面内容*/
color:hotpink;
font-size: 40px;
}
嵌套规则：
- 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
- 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt (eg:p不能嵌套div)
- li内可以包含div
- 块级元素与块级元素并列、内联元素与内联元素并列。
属性选择器
[class="c2"]{ /*属性选择器。等于.c2*/
color:hotpink;
font-size: 40px;
}
p[class="c2"]{ /*属性选择器。匹配所有p标签里属性等于c2的元素*/
color:hotpink;
font-size: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Python</title>
<link rel="icon" href="https://common.cnblogs.com/favicon.ico"/>
<meta charset="utf-8">
<link type="text/css" rel=stylesheet href="css_contrl.css" />
</head>
<style>
.c1{
font-size: 45px;
}
[class~=c2]{ <!--匹配所有class属性具有多个空格分隔的值、其中一个值等于“c2”的E元素 -->
background: deeppink;
}
p[class^=c2]{} <!--匹配属性值以指定值开头的每个元素 -->
div[class$=c1]{} <!--匹配属性值以指定值结尾的每个元素 -->
p[id*=p1]{} <!--匹配属性值中包含指定值的每个元素 -->
</style>
<body>
<div class="c1 c2">字段</div>
<span>head</span>
<div class="c12">首页</div>
<p id="p1">测试</p>
<p class="c1">生产</p>
</body>
</html>
伪类：用来给选择器添加一些特殊效果
<!DOCTYPE html>
<html>
<head>
<title>Python</title>
<link rel="icon" href="https://common.cnblogs.com/favicon.ico"/>
<meta charset="utf-8">
<link type="text/css" rel=stylesheet href="css_contrl.css" />
</head>
<style>
a[id="baidu"]:link{ <!--未访问颜色 -->
color: deeppink;
}
a[id="baidu"]:hover{ <!--鼠标悬浮链接上颜色 -->
color: blue;
}
a[id="baidu"]:active{ <!--鼠标左键按下颜色 -->
color: chartreuse;
}
a[id="baidu"]:visited{ <!--访问后颜色 -->
color:black;
}
</style>
<body>
<a href="https://www.baidu.com" id="baidu">百度</a>
<a href="http://www.cnblogs.com/" id="boke">博客园</a>
</body>
</html>
来源：https://www.cnblogs.com/linxizhifeng/p/8677777.html