- HTML的局限性：
- HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐。
- HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐。
- CSS是什么：
- CSS层叠样式表（Cascading Style Sheets）,CSS也是一种标记语言，不仅可以设置丰富的样式，也可以实现结构和样式分离。
- CSS层叠样式表（Cascading Style Sheets）,CSS也是一种标记语言，不仅可以设置丰富的样式，也可以实现结构和样式分离。
- CSS的规则是由选择器和声明快来组成的
- 比如：
- h1 是选择器
- color 、 font-size是属性 red 和 30px是属性值
- h1 是选择器
- 注意点：
- 1、选择器是用于指定CSS样式的HTML标签，{}内部是对该对象设置的具体样式
- 2、多个属性之间用英文的分号“;”隔开
- 3、属性和属性值之间用英文的“:”隔开
- 4、属性和属性值之间是以键值对的形式来书写的4
- 5、所有的样式一般都写在<style></style>标签中，一般该标签写在<head></head>标签中
- 1、选择器是用于指定CSS样式的HTML标签，{}内部是对该对象设置的具体样式
- 例
- 标签选择器（元素选择器）
- 标签选择器是指用HTML标签名称作为选择器，按照标签名称进行分类，为页面中的某一类标签来指定样式。
- 优点：
- 能快速将页面中同类型的标签统一设置样式
- 能快速将页面中同类型的标签统一设置样式
- 缺点：
- 不能设计有差异化的样式，只能选中符合条件的所有同类标签
- 不能设计有差异化的样式，只能选中符合条件的所有同类标签
- 例
- 标签选择器是指用HTML标签名称作为选择器，按照标签名称进行分类，为页面中的某一类标签来指定样式。
- 类选择器
- 语法：
- 使用“.”来进行定义，使用class进行调用
- 使用“.”来进行定义，使用class进行调用
- 目的：
- 为了差异化选择不同的标签，选择一个或者多个标签都可以
- 为了差异化选择不同的标签，选择一个或者多个标签都可以
- 注意点：
- 1、类选择器使用“.”进行标识，后面要紧跟类名（类名是自定义的）
- 2、如果类名比较长，可以使用横线来将类名进行连接
- 3、不要使用纯数字、中文等内容进行类的命名，尽量使用英文字母来表示
- 4、命名一定要有意义、尽量使人一看就知道这个类代表什么意思
- 1、类选择器使用“.”进行标识，后面要紧跟类名（类名是自定义的）
- 多类名的使用
- 使用方法：
- 将样式里面的多个类名同时放在class属性中进行调用即可，多个类名之间要用空格隔开
- 将样式里面的多个类名同时放在class属性中进行调用即可，多个类名之间要用空格隔开
- 优势：
- 节省CSS代码，统一修改样式更加方便
- 给标签设置样式的时候比较自由，想用哪几个类就调用哪几个类即可。
- 节省CSS代码，统一修改样式更加方便
- 使用方法：
- 语法：
- id选择器
- 概念
- id是唯一的标识，所以id选择器主要是为了唯一的HTML标签指定特定的样式，虽然同一个id可以被调用多次，但是不允许这样去使用
- id是唯一的标识，所以id选择器主要是为了唯一的HTML标签指定特定的样式，虽然同一个id可以被调用多次，但是不允许这样去使用
- 语法：
- 在style标签中 是用“#”来进行定义， 在需要调用id选择器的标签中是用id属性进行调用即可
- 在style标签中 是用“#”来进行定义， 在需要调用id选择器的标签中是用id属性进行调用即可
- 例
- id选择器和类选择器的区别：
- 1、类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
- 2、同一个id选择器在一个页面中只允许被调用一次
- 3、id选择器经常和JS在一次进行搭配使用
- 1、类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
- 概念
- 通配符选择器
- 概念
- 在CSS中，通配符选择器使用“*”来进行定义，它表示选中页面中的所有元素
- 在CSS中，通配符选择器使用“*”来进行定义，它表示选中页面中的所有元素
- 注意点：
- 通配符选择器不需要进行调用，直接在style进行声明即可
- 只是特殊情况下才使用统配符选择器，比如：给所有的元素清除本身所带样式
- 通配符选择器不需要进行调用，直接在style进行声明即可
- 例
- 概念