- 1CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
p{
color: red;
font-size: 12px;
}
CSS代码风格
- 样式格式书写
- 紧凑格式
h3 {color: deeppink;font-size:20px}
- 展开格式
h3 {
color: deeppink;
font-size:20px
}
- 推荐展开格式书写，因为直观
- 样式大小写风格
h3 {
color: deeppink;
}
h3 {
COLOR: deeppink;
}
- 推荐样式选择器、属性名，属性值关键字全部使用小写字母，特殊情况除外
- 样式空格风格
h3 {
color: deeppink;
}
- 属性值前面，冒号后面，保留一个空格
- 选择器（标签）和大括号中间保留空格
CSS基础选择器
- CSS选择器的作用
<div>我是div</div> <p>我是段落</p>
- 根据不同的需求把不同的标签选出来这就是选择器的作用。简单来说就是选择标签用的
- CSS做两件事
- 找到所有选择的标签
- 设置这些标签的样式
- 选择器分类
- 选择器分为基础选择器 和复合选择器 两大类
- 基础选择器是由单个选择器组成
- 基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器
- 标签选择器
标签名{
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
}
- 作用：可以把某一类标签全部选择出来。
- 优点：能快速为页面中同类型的标签统一设置样式
- 缺点：不能设计差异化样式，只能选择全部的当前标签
- 类选择器
.类名{
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
}
- 类选择器口诀：
- 样式点定义，结构类（class）调用，一个或多个，开发最常用
- 【注意】
- 类选择器使用"."进行标识，后面紧跟类名（自定义）
- 可以理解为给这个标签起一个名字
- 长名称或者词组可以使用中横线来为选择器命名
- 不要使用纯数字、中文等命名，尽量使用英文字母来表示
- 命名要有意义，尽量使别人一眼就知道这个类名的目的
- 类选择器——多类名
- 多类名使用方式
<div class="red font20">艾希</div>
- 【注意】：
- 在标签class属性中写 多个类名
- 多个类名中间必须用空格分开
- 这个标签就可以分别具有这些类名的样式
- 使用场景
- 可以把一些标签相同的元素放在一个类里
- 这些标签就可以调用这个公共的类，然后在调用自己独有的类
- id选择器
- HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义
- 语法：
#id{
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
}
- 【注意】样式#定义，结构id调用，只能调用一次，不能被别的标签调用
- 与类选择器的区别
- 类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
- id选择器好比人的身份证号码，全国唯一
- id选择器和类选择器最大的区别在使用次数上
- 类选择器在修改样式中用得最多，id选择器一般用于页面唯一性元素上，经常和js搭配调用
- 通配符选择器
- 在CSS中，通配符选择器使用“*”定义，他表示选取页面中所有的元素
- 语法
*{
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
}