CSS简介
CSS的主要使用场景就是美化网页，布局页面的。
HTML的局限性
HTML只关注内容的语义，比如<h1>表明这是一个大标题，<p>表明这是一个段落，<img>表明这有一张图片，<a>表示此处有链接。
很早的时候，世界上的网站虽然很多，但是它们都有一个共同的特点：丑。
虽然HTML可以做简单的样式，但是会非常的臃肿和繁琐
CSS--网页的美容师
CSS是层叠样式表(Cascading Style Sheets )的简称.
有时我们也会称之为CSS样式表或级联样式表。
CSS是一种标记语言
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS让网页更加丰富多彩，布局更加灵活自如。简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。
总结：
HTML主要是做结构，显示元素内容
CSS美化HTML，布局网页
CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。
CSS语言规范
使用HTML时，需要遵从一定的规范，CSS也是如此。
CSS规则由两个主要的部分构成：选择器及一条或多条声明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验CSS语法规范</title>
<style>
/* 选择器｛样式｝ */
/* 给谁改样式｛改什么样式｝ */
p {
color:red ;
/* 修改了文字大小为12像素 */
font-size: 12px;
}
</style>
</head>
<body>
<p>还不错</p>
</body>
</html>
CSS代码风格
以下代码书写风格不是强制规范，而是符合实际开发书写方式
样式格式书写
第二种格式更直观
样式大小写风格
强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
样式空格风格
CSS基础选择器
CSS选择器的作用
选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说你，就是选择标签用的。
以上CSS做的两件事：
找到所有的h1标签。选择器（选对人）
设置这些标签的样式，比如颜色为红色（做对事）
选择器分类
选择器分为基础选择器和复合选择器两个大类
标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之标签选择器</title>
<style>
/* 标签选择器：写上标签名 */
p {
color: red ;
}
div {
color: green ;
}
</style>
</head>
<body>
<p>开心</p>
<p>开心</p>
<p>开心</p>
<div>难过</div>
<div>难过</div>
<div>难过</div>
</body>
</html>
作用：
标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。
优点：
能快速为页面中同类型的标签统一设置样式。
缺点：
不能设计差异化样式，只能选择全部的当前标签
类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示。
语法：
例如，将所有拥有red类的HTML元素均为红色
结构需要用class属性来调用class类的意思
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之类选择器</title>
<style>
/* 类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用 */
.red {
color: red;
}
</style>
</head>
<body>
<ul>
<li class="red">来生缘</li>
<li class="red">冰雨</li>
<li>李香兰</li>
<li>生僻字</li>
<li>江南style</li>
</ul>
</body>
注意：
记忆口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用
类选择器-多类名
多类名：简单理解就是一个标签有多个名字
多类名使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多类名的使用方式</title>
<style>
.pink {
color: pink;
}
.font35 {
font-size: 35px;
}
</style>
</head>
<body>
<div class="pink font35">谢宗才</div>
</body>
</html>
多类名开发中使用场景
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。
语法：
例如，将id为nav元素中的内容设置为红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之id选择器</title>
<style>
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">谢宗才</div>
</body>
</html>
注意：id属性只能在每个HTML文档中出现一次。
口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。
id选择器和类选择器的区别
通配符选择器
在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。
语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之通配符选择器</title>
<style>
* {
color: pink;
}
/* *这里把html body div span li 等等的标签都改为了粉色 */
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ul>
<li>xzc</li>
</ul>
</body>
</html>
基础选择器总结
CSS的引入方式
按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：
行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）
内部样式表
内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式表</title>
<style>
div {
color: pink;
}
</style>
</head>
<body>
<div>所谓内部样式表，就是在html页面内部写样式，但是是单独写到style标签内部。</div>
</body>
</html>
行内样式表
行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内样式表</title>
</head>
<body>
<p>晚风依旧很温柔</p>
<p>一个人慢慢走</p>
<p>在街道的岔路口</p>
<p>眺望银河与星斗</p>
<p>从来都没有理由</p>
<p>躲避纷扰的借口</p>
<p>不过另种相守</p>
<p>在你我分开后</p>
<p style="color: pink;">回忆保留</p>
</body>
</html>
外部样式表
实际开发都是外部样式表，适合样式比较多的情况。核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
引入外部样式表分为两步：
新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
在HTML页面中，使用<link>标签引入这个文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。</div>
</body>
</html>
/* 这css文件里面只有样式没有标签 */
div {
color: pink;
}
CSS引入方式总结
