总所周知,css可以为网页设置多种多样的样式,那怎么样可以精确为每一个html标签设置相应的样式呢?
tips:小白初学,如有错误,还请各位大佬指教
<h1> css选择器 </h1>
这在里,我们列举了一个简单的例子来讲解css选择器。 首先h1
就是我们所说的选择器,然后这个{}
里面的的代码我们称之为声明块,color:aqua;
就是声明,声明里面的color
是属性,也就是我们要为这个html标签设置的属性,接下来属性后面的aqua
就是属性值。 当然这是一个最基本的选择器,css里面的选择器有很多,基本选择器分为一下几种:通配符选择器、类选择器、id选择器、伪类选择器。 首先是通配符选择器:
<h1> 通配符选择器 </h1>
可以看到,通配符选择器这里,它的选择器是*
,这个意思就是自动选择html页面所有的标签,并且为所有标签设置属性。 然后就是类选择器:
<h1 class="h1_color"> 类选择器 </h1>
可以看到类选择器在定义的时候,选择器前面有一个".",这就是类选择器的一个特征,然后在使用类选择器的时候,我们可以看到在html标签里面有一个“class”属性,通过这个class属性里面的值,我们找到css里面相应的声明块,然后这个标签就被相应的声明块设置了相应的属性。 我们需要注意的是:
- 每一个html标签都有class属性,也就是说每一个html标签都可以有类名。
- 在写css样式的时候,一定要在选择器名称的前面加上"."
- 在html中,一个标签里面可以同时绑定多个类名,多个类名之间,我们使用“,”隔开,例如
<标签名 class = "类名1,类名2,类名3···">
接下来就是id选择器:
<h2 id="h2_color"> id选择器 </h2>
在id选择器里面,和前面选择器有一个很大的不同,就是id选择器前面有一个#,然后在html标签里面使用这个选择器,需要id属性,后面的属性值就是选择器的名字。 id属性需要注意的地方:
- 在书写id选择器的时候,一定要记得在选择器名字前面加“#”
- id选择器只可以使用一次,也就是说在html页面里面,id选择器只能被调用一次。 伪类选择器我们会在后面详细讲解。