CSS基础(一)

一、标签基础 选择器

1、 标签选择器

• 标签选择器的作用时为页面中某一类标签指定统一的CSS样式
• 优点是能快速为页面中同类型的标签统一设置样式
• 缺点时不能设计差异化样式，只能选择全部的当前标签

标签名 {
    属性1: 属性值1;
}

ul {
         
}

• 规范：
• 属性值前面，冒号后面，保留一个空格
• 标签名和大括号中间保留空格

2、 类选择器

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

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

.red {
    color: red;
}

• 结构需要用class属性来调用

<div class='red'>  变红色 </div>

注意： 

1.   类选择器在 HTML 中以 class 属性表示，在CSS中，类选择器以一个点 . 号表示
2.   记忆口诀：样式点定义，结构类调用

2.1、类选择器多类名

• 我们可以给一个标签指定多个类名，简单理解就是一个标签有多个名字

<div class="red font20">林晓</div>

• 在标签class 属性中写多个类名
• 多个类名中间必须用空格分开
• 这个标签就可以分别具有这些类名的样式