CSS简介
在昨天我学完HTML根本语法之后，我明天筹备减速学习CSS，加油！！！
CSS指的是Cascading Style Sheet（层叠样式表），是用来管制网页外观的一项技术。
首先咱们得晓得，HTML是用于管制网页的构造，而CSS用于管制网页的外观，JavaScript管制的是网页的行为。
CSS款式的引入形式
有三种形式：
- （1）内部样式表
- （2）外部样式表
- （3）行内样式表
(1)内部样式表
语法：
<link rel="stylesheet" type="text/css" href="文件门路" />在这里：rel、type、href都是固定的值。
(2)外部样式表
<style type="text/css"> …………</style>将style标签放在head标签外面
(3)行内样式表
语法：
<div style="color:red;">放松温习</div>在理论开发中，个别都是应用内部样式表。
还有设置款式时留神他的id和class，通过这两个属性能够精准管制每个局部的款式，id不能雷同，class能够雷同。
CSS选择器
选择器就是为了抉择你想要批改款式的中央的工具，相当于一个定位工具，精准定位。
有五种最实用的选择器：
（1）元素选择器
（2）id选择器
（3）class选择器
（4）后辈选择器
（5）群组选择器
（1）元素选择器
抉择不同的标签，来批改款式，如div、p、h1等
示例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS选择器练习</title> <style type="text/css"> p{ color: red; } </style> </head> <body> <p>元素选择器</p> <hr> <div> <p>这是一个段落</p> <h4>这是一个大题目</h4> <div>最初一行</div> </div> <p>元素选择器</p> <hr> <p>元素选择器</p> <hr> <p>元素选择器</p> <hr> <p>元素选择器</p> <hr> </body></html>显示成果：
（2）id选择器
通过标签的属性的id来抉择，id名后面加上"#"来批改款式。
示例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS选择器练习</title> <style type="text/css"> #abc { color: red; } </style> </head> <body> <p>元素选择器</p> <hr> <div> <p>这是一个段落</p> <h4>这是一个大题目</h4> <div>最初一行</div> </div> <p id="abc">元素选择器</p> <hr> <p>元素选择器</p> <hr> <p>元素选择器</p> <hr> <p>元素选择器</p> <hr> </body></html>显示成果：
（3）class选择器
通过标签的属性的class来抉择，class名后面加上"."来批改款式。
示例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS选择器练习</title> <style type="text/css"> .name { color: red; } </style> </head> <body> <p>元素选择器</p> <hr> <div class="name"> <p>这是一个段落</p> <h4>这是一个大题目</h4> <div>最初一行</div> </div> <p id="abc">元素选择器1</p> <hr> <p class="name">元素选择器2</p> <hr> <p class="name">元素选择器3</p> <hr> <p>元素选择器4</p> <hr> </body></html>显示成果：
（4）后辈选择器
前面通过代码间接举例子
示例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS选择器练习</title> <style type="text/css"> .name p { color: red; } .name1 h4{ color: burlywood; } #name3 h3{ color: darkgoldenrod; } </style> </head> <body> <p>元素选择器</p> <hr> <div class="name"> <p>这是一个段落</p> <h4>这是一个大题目</h4> <div>最初一行</div> </div> <div class="name1"> <p id="abc">元素选择器1</p> <hr> <p class="name">元素选择器2</p> <h4>这是一个大题目1</h4> <h4>这是一个大题目2</h4> <hr> <p class="name">元素选择器3</p> <hr> <h4>这是一个大题目3</h4> <p>元素选择器4</p> </div> <div id="name3"> <p>这是一个段落</p> <h3>这是一个大题目</h3> <div>最初一行</div> </div> <hr> </body></html>显示成果：
（5）群组选择器
抉择多个，两头以逗号隔开。
示例：
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <title>CSS选择器练习</title> <style type="text/css"> div,p{ color:cadetblue; } </style></head><body> <p>元素选择器</p> <hr> <div class="name"> <p>这是一个段落</p> <h4>这是一个大题目</h4> <div>最初一行</div> </div> <!-- <div class="name1"> --> <p id="abc">元素选择器1</p> <hr> <p class="name">元素选择器2</p> <h4>这是一个大题目1</h4> <h4>这是一个大题目2</h4> <hr> <p class="name">元素选择器3</p> <hr> <h4>这是一个大题目3</h4> <p>元素选择器4</p> <!-- </div> --> <div id="name3"> <p>这是一个段落</p> <h3>这是一个大题目</h3> <div>最初一行</div> </div> <hr></body></html>
显示成果：
在这五种外面群组选择器效率最高了。