本文介绍了CSS的基础知识，包括其作用、语法结构以及选择器的使用。CSS用于美化HTML页面，实现样式与结构的分离。文中详细讲解了标签选择器、类选择器、ID选择器和通配符选择器的用法，并通过实例展示了如何使用它们来设置样式。类选择器特别强调，可以用于差异化选择和节省代码。最后，对比了ID选择器与类选择器的区别，以及通配符选择器在特殊情况下的应用。
学习内容：CSS简单了解，CSS语法，CSS选择器
学习笔记
CSS作用：
CSS的主要使用场景是美化网页，布局页面的
CSS是层叠样式表的简称，也是一种标记语言
HTML主要做结构，显示元素内容
CSS美化HTML，布局页面
CSS最大价值:使样式和结构分离
CSS 语法
<style></style>样式标签在<head></head>标签里
CSS 规则主要由选择器和一条或多条声明组成：
h1（选择器） { color: red; (color为属性，red为属性值，二者和为声明)
font-size: 25px;
}
属性和属性值以键值对形式存在
选择器指向需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。
实例
在此例中，所有 <p> 元素大小为25像素，并带有红色文本颜色：
p {
color: red;
font-size: 25px;
}
CSS选择器（开发最常用）：
CSS选择器作用，根据不同需求把不同的标签选出来（用来选择标签）
选择器分为基础选择器和复合选择器两大类
基础选择器是由单个选择器组成的；基础选择器包括标签选择器、类选择器、id选择器、通配符选择器
1、标签选择器：把某一类标签选择器全部选择出来，例如把所有<div>标签选择出来
优点：能快速为某一类同类标签统一设置样式
缺点：不能差异化设置，只能选择全部同类标签
实例：
类选择器：
差异化选择不同的标签，单独选一个或某几个标签
类选择器选择有特定 class 属性的 HTML 元素。
语法
.类名 {
属性1: 属性值1;
......
}
注意：1、这里的类名是我们自己取的
2、可以理解为给这个标签起了一个名字，来表示
3、长名字或词组可以用中横线来为选择器命名
4、不能使用纯数字、中文等命名，尽量使用英文字母来表示
5、命名要有意义，尽量让别人一眼就能知道这个类名的目的
结构需要用class属性来调用；如：
<div class="green">变绿色</div>
类选择器口诀：样式“点”定义,结构“类”调用
实例
在此例中第一个<div>字体变绿色，三个<p>字体都变粉色
类选择器应用：
类选择器-多类名
1、多类名使用
<div class=" red font20">多类名</div> （在class属性中写多个类名，各个类名用空格隔开）
多类名开发中使用场景：
（1）可以把一些标签元素相同的样式（共同的部分）放到一个类里
（2）这些标签都可以调用共有的类然后再调用自己独有的类
（3）从而节省CSS代码，统一修改非常方便
id选择器（可以为特殊id的HTML元素指定特定的样式）：
HTML以id属性来设置id选择器，CSS中id选择器以“#”来定义
语法：
#id名 {
属性1：属性值1；
......
}
调用：
id选择器和类选择器的区别：
1、类选择器好比人的名字，人的名字可以有多个，同一个名字也可以被多个人使用
2、id选择器好比人的身份证，全球是唯一的，不得重复
3、id选择器和类选择器最大的区别在于使用次数上
4、类选择器在修改样式中用的最多，id选择器一般用于网页唯一性的元素上，经常与JavaScript搭配使用
id选择器口诀：样式#定义，结构id调用 ，只能调用一次，别人切勿使用
通配符选择器：
通配符选择器用“*”定义，他表示选取页面中所有元素（标签）
语法
* {
属性1： 属性值1；
......
}通配符选择器不需要调用，自动就给所有的元素使用样式
选择器总结：
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
| 标签选择器 | 可以选出所有相同的标签， 比如p | 不能差异化选择 | 较多 | p{color：red；} |
| 类选择器 | 可以选出1个或多个标签 | 可以根据需求选择 | 非常多 | .nav {color: red；} |
| id选择器 | 一次只能选择一个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和Js搭配 | #nav {color： red；} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况要用 | * {color： red；} |
1722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
