CSS选择器的作用
CSS选择器是选择标签用的把我们想要的标签选择出来
h3{
color:red;
}
这段代码就是两件事,把h3选出来,然后把它变成红色。
选择分为基础选择器和复合选择器,我们说一下基础选择器
1.基础选择器
-
概念:
标签选择器(元素选择器)是指用HTML标签名称作为选择器,
按标签名称分类,为页面中某一类标签指定统一CSS样式。 -
语法:
标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
- 作用:
标签选择器可以把某一类标签全部选择出来 比如所有的div标签和所有的span标签 - 优点:
是能快速为页面中同类型的标签统一样式 - 缺点:
不能设计差异化样式
总结:
标签选择器,
页面同选起。
直接写标签,
全部不放弃。
2.类选择器
类选择起使用"."(英文下的点)进行标识,后面紧跟类名
- 语法:
类名选择器
.类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
标签
<p class='类名'></p>
-
优点
可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签 -
注意
类选择器使用"."(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)长名称或词组可以使用中横线来为选择器命名
不要纯数字、中文等命名,尽量使用英文字母来表示。
-
总结
差异化选择
一个或多个
上面点定义
类名别写错
谁用谁调用
class来做
2.id选择器
id选择器使用#进行标识,后边紧跟id名
- 其基本语法格式如下:
id选择器
#id名{属性1:属性值1;属性2:属性值2;}
- 标签、
<p id="id名"> </p>
- 元素的id值是唯一的,只能对应于文档中某一个具体的元素
- 用法基本和类选择器相同。