一、CSS介绍
1、CSS（层叠样式表，Cascading Style Sheets）
是一种用于描述网页内容（HTML或XML等）外观样式的标记语言。它是一种样式表语言，用于控制网页的布局、字体、颜色、大小、间距以及其他与显示有关的属性。
2、css学习步骤
- 先学习选择器，作用就是如何找到标签
- 找到标签之后，给标签增加样式
3、css选择器
选择器的语法结构
选择器 {
属性名1：属性值1
属性名2：属性值2
属性名3：属性值3
属性名4：属性值4
}
4、CSS的三种引入方式
内部样式表（Internal CSS）
在html中直接写在style标签
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS样式代码 */
h1 {
color: blue;
font-size: 28px;
}
p {
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>这是段落文本。</p>
</body>
</html>
外部样式表（External CSS）
单独写一个CSS文件，然后通过link标签引入外部的css文件
<head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>
内联样式（Inline CSS）
直接写在标签上，行内式
<body> <p style="color: #666; font-size: 18px;">这是段落文本。</p> </body>
二、选择器
1、基本选择器
#p1 { # id选择器
color: red;
font-size: 30px;
}
.c1 { # 类选择器
color: #5e5e15;
font-size: 25px;
}
p { # p标签选择器
color: green;
}
* { # 通用选择器
color: orange;
}
2、组合选择器
ul li .c1 { # 层级选择标签
color: red;
}
div > p { 选择div下的直接子标签
color: red;
}
3、属性选择器
[username] {
color: red;
}
[username=kevin] {
color: red;
}
input[username=kevin] {
color: red;
}
4、分组和嵌套
div, p, span {
color: red;
}
5、伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*未访问时候显示的*/
a:link {
color: #FF0000;
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
input:focus {
outline: none;
background-color: #eee;
}
</style>
</head>
<body>
<a href="https://th.bing.com/th/id/R.710b1f9f2fa1799788bbb5abf080ba34?rik=%2behXZ27GYBUYkA&riu=http%3a%2f%2fimage.hnol.net%2fc%2f2018-12%2f09%2f13%2f201812091309509561-239867.jpg&ehk=VnxPBitnefIIO85WygHQiwD8AKSP29Y6ne3kfNN%2fozg%3d&risl=&pid=ImgRaw&r=0">点我看西藏</a>
<a href="https://cbgccdn.thecover.cn/FhqtFG-kwKJOUOhhceVFGVo-hR0O"></a>
<a href="https://www.bing.com/ck/a?!&&p=be6377121d25ec1bJmltdHM9MTY4OTcyNDgwMCZpZ3VpZD0zMDBjN2MwMS1iOTE0LTY0OWItMzUyNC02ZWYwYjhjNjY1MTImaW5zaWQ9NTQ4NA&ptn=3&hsh=3&fclid=300c7c01-b914-649b-3524-6ef0b8c66512&u=a1L2ltYWdlcy9zZWFyY2g_cT3nvo7lpbPlm74mRk9STT1JUUZSQkEmaWQ9MzZFQTNDQzcwNzA4NzRFNzZCMTZFNDdGRTFEMTYxNkYzRDJFOUYyNA&ntb=1">点我看美女</a>
<a href="https://www.bing.com/images/search?view=detailV2&ccid=xvyXerHv&id=4D8ABF6E14C4E679789B7C67804D0710D800E9C4&thid=OIP.xvyXerHv_C9XwbYeoLShCwHaNK&mediaurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR.c6fc977ab1effc2f57c1b61ea0b4a10b%3frik%3dxOkA2BAHTYBnfA%26riu%3dhttp%253a%252f%252fpic.3gbizhi.com%252f2016%252f0619%252f20160619103137648.jpg%26ehk%3dNulKD8j21Eu6wB9zuAYpgZ8H3J7vxPq8IiYqI%252bx%252fRy8%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=2208&expw=1242&q=%e7%be%8e%e5%a5%b3%e5%9b%be&simid=608018643482119098&FORM=IRPRST&ck=C9DB6D1F1BF97615074838D318ED4617&selectedIndex=25">点我看美女2</a>
<p>
<!-- 文本输入框 -->
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<!-- "name" 属性用于标识输入框的名称，用于在提交表单时识别输入的数据 -->
</p>
</body>
</html>
6、选择器的优先级
比较id、类、标签选择器的优先级 # style样式、外部引入的CSS、行内式 1. 选择器相同的情况下，谁的优先级更高 行内式的优先级是最高的!!!，选择器相同，除了行内式谁离标签越近就听谁的 2. 选择器不同的情况下，谁的优先级更高 # 比较id、类、标签选择器的优先级 行内式 > id选择器 > 类选择器 > 标签选择器
三、CSS属性相关
四、
标签：color,标签,前端,red,属性,选择器,CSS,三剑客 From： https://www.cnblogs.com/dgp-zjz/p/17565683.html