CSS基础选择器-1

138 阅读2分钟

这是我参与2022首次更文挑战的第5天
一、CSS选择器的作用
   选择器(选择符)就是根据不同的需求把不同的标签选出来,即选择器就是选择标签用的。以上CSS做了两件事:
1.找到所有的h1标签。选择器(选对人)
2.设置这些标签的样式,比如颜色为红色(做对事)。

二、选择器分类
    选择器分为基础选择器和复合选择器两个大类。
    1.基础选择器
     基础选择器是由单个选择器组成的。
     基础选择器包括:标签选择器、类选择器、id选择器和通配符选择器。 1)标签选择器
    标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
a.语法:
标签名{
           属性1:属性值1;
           属性2:属性值2;
属性3:属性值3;
           ...... }
b.作用:
  标签选择器可以把某一类标签全部选择出来,比如所有的div标签和所有的span标签。
c.优点:
  能快速为页面中同类型的标签统一设置样式。
d.缺点:
  不能设计差异化样式,只能选择全部的当前标签。

2)类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。
   类选择器在HTML中以class属性表示,在CSS中,类选择器以一个点“.”号显示。
   类选择器口诀:样式点定义,结构类(class)调用,一个或多个,开发最常用。
a.语法:
.类名{
        属性1:属性值1;
        ......
}
例如:将所有拥有red类的HTML元素设置为红色。
.red{
        color:red;
}
结构需要用class属性来调用classs类的意思。

b.注意:
类选择器使用“.”(英文点号)进行标识,后面紧跟类名(类名为自定义,我们自己命名)。
命名不能使用标签名字,如:p、div、span等,这些都属于标签选择器。
可以理解为给这个标签起了一个名字来表示。
长名称或词组可以使用中横线“-”来连接命名。
不要使用纯数字、中文等命名,尽量使用英文字母来表示。
命名要有意义,尽量使用别人一眼能够理解的。