一、CSS概述
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化，CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。
二、css样式的引入方法
1、行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <a style="background-color: aqua;color: brown;">我正在学习一门python语言</a> 11 12 </body> 13 </html>
图示：
2、嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head>
<style type="text/css">
...此处写CSS样式
</style>
</head>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 a{ 10 background-color: red; 11 font-size: 20px; 12 } 13 </style> 14 </head> 15 <body> 16 <a>我正在学习一门python语言</a> 17 18 </body> 19 </html>
图示：
3、导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
<style type="text/css">
@import"index.css"; 此处要注意.css文件的路径
</style>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 @import "index.css"; <!--注意引入css的文件路径 --> 10 </style> 11 </head> 12 <body> 13 <a>我正在学习一门python语言</a> 14 15 </body> 16 </html>
图示：
4、链接式
也是将一个.css文件引入到HTML文件中 <link href="index.css" rel="stylesheet" type="text/css"/>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link href="index.css" rel="stylesheet" type="text/css"> 9 </head> 10 <body> 11 <a>我正在学习一门python语言</a> 12 13 </body> 14 </html>
图示：
注意事项：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
三、css选择器
1、基础选择器
匹配任何元素用*，包括body元素
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{ 10 font-size: 40px; 11 background-color: salmon; 12 } 13 </style> 14 </head> 15 <body> 16 <a>我正在学习一门python语言</a> 17 18 </body> 19 </html>
图示：
2、标签选择器
匹配所有P标签，格式如下:a{}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 a{ 10 font-size: 40px; 11 background-color: salmon; 12 } 13 </style> 14 </head> 15 <body> 16 <a>我正在学习一门python语言</a> 17 18 </body> 19 </html>
图示：
3、id选择器和class选择器
css样式id调用里用： #id名字调用； class调用用：.类名{}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 #a1{ 10 font-size: 40px; 11 background-color:royalblue; 12 } 13 .mydiv{ 14 font-size: 20px; 15 16 } 17 </style> 18 </head> 19 <body> 20 <a id=‘a1‘>我正在学习一门python语言</a> 21 <div class=‘mydiv‘>yusheng_liang</div> 22 23 </body> 24 </html>
图示：
4、多元素选择器
同时匹配所有E元素或F元素，E和F之间用逗号分隔
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 a,p{ 10 font-size: 40px; 11 background-color:royalblue; 12 } 13 14 </style> 15 </head> 16 <body> 17 <a id=‘a1‘>我正在学习一门python语言</a> 18 <p class=‘mydiv‘>yusheng_liang</p> 19 20 </body> 21 </html>
图示：
5、后代选择器
后代选择器匹配所有值得元素的后代元素。以下实例选取所有 <p> 元素插入到 <div> 元素中:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 div p{ 10 font-size: 40px; 11 background-color: seagreen; 12 } 13 14 </style> 15 </head> 16 <body> 17 <div> 18 <p>段落 1。 在 div 中。</p> 19 <p>段落 2。 在 div 中。</p> 20 </div> 21 22 <p>段落 3。不在 div 中。</p> 23 <p>段落 4。不在 div 中。</p> 24 </body> 25 </html>
图示：
6、子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。以下实例选择了<div>元素中所有直接子元素 <p> ：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 div>p{ 10 font-size: 40px; 11 background-color: seagreen; 12 } 13 14 </style> 15 </head> 16 <body> 17 <h1>Welcome to My Homepage</h1> 18 <div> 19 <h2>My name is Donald</h2> 20 <p>I live in Duckburg.</p> 21 </div> 22 23 <div> 24 <span> 25 <p>I will not be styled.</p> 26 </span> 27 </div> 28 29 <p>My best friend is Mickey.</p> 30 </body> 31 </html>
只改变了div下p子元素，效果图如下：
7、相邻元素选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 div+p{ 10 font-size: 40px; 11 background-color:blueviolet 12 } 13 14 </style> 15 </head> 16 <body> 17 <h1>Welcome to My Homepage</h1> 18 <div> 19 <h2>My name is Donald</h2> 20 <p>I live in Duckburg.</p> 21 </div> 22 23 <div> 24 <span> 25 <p>I will not be styled.</p> 26 </span> 27 </div> 28 29 <p>My best friend is Mickey.</p> 30 </body> 31 </html>
图示：
注意嵌套规则：
8、伪类选择器：
伪类选择器： 专用于控制链接的显示效果，伪类选择器：
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 a:link{ 10 color: red; 11 } 12 a:visited { 13 color: blue; 14 } 15 a:hover { 16 color: green; 17 } 18 a:active { 19 color: yellow; 20 } 21 </style> 22 </head> 23 <body> 24 <a href="01-hello-world.html">hello-world</a> 25 </body> 26 </html>
原文：https://www.cnblogs.com/june-L/p/11854181.html