目录
一、CSS简介
1、CSS
2、CSS主要作用
3、CSS和HTML区别
二、CSS使用方法（3种）：style属性
1、行内嵌入式
由下面举例可知，行内嵌入式只对当前嵌入的表签有效。（不推荐使用，因为此方法失去了样式表的优点。)
2、页面嵌入式
3、导入css文件的方式（外部CSS)：推荐使用
三、CSS的选择器：在CSS中定位页面中的标签(控件)
1、简单选择器(基本选择器)
(1)元素选择器（标签名选择器）：优先级最低，涉及最广。
(2)类选择器：优先级次之
(3)id选择器：优先级最高
(4)通配符选择器 （通用选择器）：*，代表所有元素
(5)分组选择器
一、CSS简介
1、CSS
(1)CSS 是一种描述 HTML 文档样式的语言。
(2)什么是 CSS？
CSS指的是层叠样式表*(CascadingStyleSheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS节省了大量工作，它可以同时控制多张网页的布局外部样式表存储在CSS 文件中
*：也称级联样式表。
2、CSS主要作用
(1)对页面的外观进行美化
(2)统一网站页面的风格
(3)实现内容和样式的分离,适合团队开发
3、CSS和HTML区别
(1)创建 HTML 的目的是描述网页的内容，通俗来说HTML就是标签
(2)创建CSS的目的是制作网页的样式，CSS就是给标签添加样式
二、CSS使用方法（3种）：style属性
1、行内嵌入式
给标签添加style属性,用来设置样式。
可用于为单个元素应用唯一的样式。
由下面举例可知，行内嵌入式只对当前嵌入的表签有效。（不推荐使用，因为此方法失去了样式表的优点。)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p style="color:blueviolet;font-size:50px">这是一个标题</p><h3 style="color:cornsilk;font-size:100px">只有此元素有的样式</h3></body></html>
2、页面嵌入式
(1)在页面中使用<style></style>定义不同的样式规则
(2)属性继承：明明是父级上设置样式，结果后代标签也跟着发生变化，这就叫属性继承。color属性和font系列属性都可以被继承。
下面举例中body中的属性被body中p标签和h3标签继承，文本位置都居中。
(3）未曾对h3标签进行样式设置，所以它除了继承body的属性，并没有其他属性。
(4) 连接两个属性，用分号隔。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{text-align: center;}p{color: crimson;font-size: large;}</style></head><!-- <style>body{text-align: center;}p{color: crimson;font-size: large;}</style> --><body><p style="color: darkgreen;">文本居中</p><p>设置颜色和字号</p><h3>另一个文本</h3></body></html>
注：页面嵌入式中style属性放在head里和放在head和body之间都可以实现渲染，但是建议放在head中！
(5)style位置对渲染的影响：当同时给head和body都添加style属性时，执行body中的属性。说明body的优先级高于head。如下举例。
3、导入css文件的方式（外部CSS)：推荐使用
(1)第一步：创建扩展名为.css的样式文件
第二步：在页面中通过<link>标签将外部的css文件链接起来
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=pp, initial-scale=1.0"><title>css样式</title><link rel="stylesheet" href="../css/test.css"> <!--链接外部的css文件--></head><body><p>你好</p><p>世界</p></body></html>
test.css文件
body{text-align:center;}p {color:crimson;font-size:60px;}
结果：
(2) 外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。
外部 .css 文件不应包含任何 HTML 标签。
(3)注意：请勿在属性值和单位之间添加空格（例如margin-left: 35px;）。正确的写法是：margin-left: 35px;
三、CSS的选择器：在CSS中定位页面中的标签(控件)
1、简单选择器(基本选择器)
(1)元素选择器（标签名选择器）：优先级最低，涉及最广。
标签名（可以是一个或多个标签）{
样式规则(属性): 值;
}
eg:页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色：p {text-align: center;color: red;}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{text-align: center;color: darkgreen;}</style></head><body><p>红楼梦</p><!-- <br><br><h4>水浒传</h4><br><br><div>三国演义</div><br><br><span>西游记</span> --></body></html>
(2)类选择器：优先级次之
A、在页面中给标签添加class属性,标签的class属性值可以重复
.类名(标签的class属性值){
样式规则(属性): 值;
}
eg1:所有带有 class="center" 的 HTML 元素将为红色且居中对齐,class为类名。
.center {text-align: center;color: red;}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* p{text-align: center;color: darkgreen;} */.text{color: darkred;font-size: 100px;}</style></head><body><!-- <p>红楼梦</p><br><br> --><h4 class="text">水浒传</h4><br><br><div class="text">三国演义</div><!-- <br><br><span>西游记</span> --></body></html>
B、可以指定只有特定的 HTML 元素会受类的影响。
eg2:下面例子中，只有具有 class="center" 的 <p> 元素为红色且居中对齐：
p.center {text-align: center;color: red;}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* p{text-align: center;color: darkgreen;} */h4.text{color: darkred;font-size: 100px;}</style></head><body><!-- <p>红楼梦</p><br><br> --><h4 class="text">水浒传</h4><br><br><div class="text">三国演义</div><!-- <br><br><span>西游记</span> --></body></html>
C、HTML 元素也可以引用多个类。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* p{text-align: center;color: darkgreen;} */.text{color: darkred;font-size: 100px;}.font{text-align: center;}</style></head><body><!-- <p>红楼梦</p><br><br> --><h4 class="text">水浒传</h4><br><br><div class="text">三国演义</div><div class="text font">两个类</div><!-- <br><br><span>西游记</span> --></body></html>
D、类名不能以数字开头
(3)id选择器：优先级最高
在页面中给标签添加id属性,标签的id属性值不能重复
#id{
样式规则(属性): 值;
}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* p{text-align: center;color: darkgreen;} *//* .text{color: darkred;font-size: 100px;}.font{text-align: center;} */#d1{color: fuchsia;font-size: 150px;}</style></head><body><!-- <p>红楼梦</p><br><br> --><h4 class="text">水浒传</h4><br><br><div class="text">三国演义</div><div class="text font">两个类</div><br><br><span id="d1">西游记</span></body></html>
(4)通配符选择器 （通用选择器）：*，代表所有元素
*{
样式规则(属性): 值;
}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{text-align: center;color: blue;}p{text-align: center;color: darkgreen;} .text{color: darkred;font-size: 100px;}.font{text-align: center;}#d1{font-size: 150px;}</style></head><body><p>红楼梦</p><h4 class="text">水浒传</h4><div class="text">三国演义</div><div class="text font">两个类</div><span id="d1">西游记</span></body></html>
通过上面的示例我们还得到了如下结论：
优先级类名影响
id>class>标签名>通配符>默认样式
(5)分组选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{text-align: center;color: red;} h4{text-align: center;color: red;}div{text-align: center;color: red;}h3,h1{text-align: center;color:gold;}</style></head><body><p>红楼梦</p><h4 >水浒传</h4><div>三国演义</div><div >两个类</div><br><br><h3>李四</h3><h1>王五</h1></body></html>
