CSS：层叠样式表

HTML的局限性

• HTML只关注内容的语义，比如<h1>表明这是一个大标题；<p>表明这是一个段落；<img>表明这是一个图片；<a>表示此处有链接
• 很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点：丑
• 虽然HTML可以做简单的样式，但带来的是无尽的臃肿和繁琐...

---

CSS：页面美容师

• CSS是层叠样式表（Cascading Style Sheets）的简称：有时候我们也称为CSS样式表或级联样式表
• CSS也是一种标记语言
• CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片外形（宽高、边框样式、编剧等）以及版面的布局和外观显示样式
• CSS让我们的网页更加丰富多彩，布局更加灵活自如，简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单
• 结论：
  （1） HTML主要做结构，显示元素内容
  （2） CSS美化HTML，布局网页
  （3） CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构HTML与样式CSS相分离

---

CSS语法规范

• 使用HTML时，需要遵从一定的规范，CSS也是如此
• CSS规则由两个主要的部分组成：选择器以及一条或多条声明
  
• 选择器是用来定义HTML标签（元素）的
• 声明是由键值对形式出现的

---

CSS代码风格

• CSS代码风格有三种：但是书写风格不是强制规范，而是符合实际开发书写方式

样式格式书写

• 紧凑格式

<style>
    div {font-size: 14px; color: red; }
</style>

• 展开格式：强烈推荐使用这种方式，因为更直观

<style>
    div {
        font-size: 14px;
        color: red;
    }
</style>

样式大小写风格

<style>
    div {
        font-size: 14px;
        COLOR: RED;
    }
</style>

• 强烈建议选择器名称、属性名、属性值全部使用小写字母：特殊情况除外

样式空格风格

<style>
    div {
        font-size: 14px;
        color: red;
    }
</style>

• 属性值前面，冒号后面，保留一个空格
• 选择器与大括号之间保留一个空格

---

CSS基础选择器

CSS选择器的作用

• 选择器的作用：根据不同需求把不同的标签选出来
  
• 以上CSS做了两件事：
  （1） 找到所有的div标签：选择器：选中标签
  （2） 设置标签的样式：例如设置字体大小为14像素；字体颜色为红色

选择器分类

• 选择器分为基础选择器与复合选择器两个大类
• 基础选择器是由单个选择器组成的：标签选择器、类选择器、id选择器和通配符选择器
• 复合选择器：由基础选择器组合而成的选择器

---

基础选择器：标签选择器

• 标签选择器（元素选择器）是值用HTML标签名称作为选择器：按标签名称分类，为页面中某一类标签指定统一的CSS样式
• 作用：标签选择器可以把某一类标签全部选中出来，比如所有的<div>标签和所有的<span>标签
• 优点：能快速为页面中同类型的标签统一设置样式
• 缺点：不能设计差异化样式，只能选中全部的当前标签

---

基础选择器：类选择器

• 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
• 语法

.类名 {
	属性名: 属性值;
	......
}

• 类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."号显示
• 注意：
  （1） 类选择器使用"."进行标识，后面紧跟类名（自定义，我们自己命名的）
  （2） 可以理解为给这个标签起了个一个名字来表示
  （3） 长名称或词组可以使用中横线来为选择器命名
  （4） 不要使用纯数字、中文等命名：尽量使用英文字母来表示
  （5） 命名要有意义，尽量使别人一样就知道这个类名的目的
  （6） 命名要规范
• 类名选择器：多类名：我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选中这个标签：简单理解就是一个标签有多个名字
• 多类名使用方式

<div class="red font20">亚瑟</div>

• 在标签class属性中写多个类名
• 多个类名中间必须用空格分开
• 这个标签就可以分别具有这些类名的样式
• 多类名的使用场景：
  （1） 可以把一些标签元素相同的样式（共同的部分）放到一个类里面
  （2） 这些标签都可以调用这个公共的类，然后再调用自己独有的类
  （3） 从而节省CSS代码，统一修改也非常方便
  （4） 多类名选择器在布局比较复杂的情况下，还是较多使用的

---

基础选择器：id选择器

• id选择器可以为标有特定id的HTML元素指定特定的样式
• HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义
• id选择器与类选择器的区别：
  （1） 类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
  （2） id选择器好比人的身份证号码，全国是唯一的，不能重复
  （3） id选择器与类选择器最大的不同在于使用次数上
  （4） 类选择器在修改样式中用的最多，id选择器一般用于页面唯一的元素上，经常和JS搭配使用

---

基础选择器：通配符选择器

• 在CSS中，通配符选择器使用"*"定义，它表示选中页面中所有的标签（元素）
• 通配符选择器不需要调用，自动就给所有元素使用样式

---

基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选中所有相同的标签，比如p	不能差异化选中	较多	p {color: red;}
类选择器	可以选中1个或多个标签	根据需求选中	非常多	.nav {color: red;}
id选择器	一次只能选中1个标签	id属性只能在每个HTML页面文档中出现一次	一般搭配JS	#nav {color: red;}
通配符选择器	选中所有的标签	选中的太多，有部分不需要	特殊情况使用	* {color: red;}

• 每个基础选择器都有自己的使用场景，都需要掌握
• 如果是修改样式，类选择器是使用最多的