html弄个实心的远点,HTML-css样式选择器

style简介

这篇介绍style，style有三种方式：

1、在head中加style标签，在标签中写css样式；

2、在body的标签中添加style属性，在属性中增加css样式；

3、在link标签中引入写好的css样式表 

一、在head中添加style标签

1、id选择器

在一个HTML页面中，不存在相同的id。

id选择器用#来定位

举例：

Title

#i1{

height: 100px;

width: 100px;

background-color: red;

}

分析：

(1)在head部分，用style标签写css样式；

(2)#i1指向了id为“i1”的标签，样式是长和宽为100像素，背景颜色是红色；

(3)body中div标签的属性 id="i1"，运行后会按照标签的样式展示，如下图。

通过浏览器可以看到div的修饰。按F12打开开发者模式。

2、class选择器

在一个HTML页面中，可以存在重复的class。

class标签用点来定位。

举例：

Title

height: 100px;

width: 100px;

background-color: pink;

}

运行结果：

3、标签选择器

如果我们在style里给div添加css样式，那么所有的div标签都会按照这个样式显示。

举例：

Title

height: 100px;

width: 100px;

background-color: yellow;

}

分析：

在style里给div标签添加一定的样式，那么body中所有的div标签都会按照这个样式显示。

运行结果如下：

4、标签层级选择器

上面介绍的都是只有一级的标签，如果在div标签下有一个span标签，那么怎么给span标签添加样式呢。非常简单，看下面的例子。

Title

height: 100px;

width: 100px;

background-color: green;

}

博客园

分析：

只要在修饰的时候，一级标签+空格+二级标签即可

运行结果为：

5、id层级选择器

原理同上，只需在定位标签是，在id后面+空格+下一级标签

Title

#i1 span{

height: 100px;

width: 100px;

background-color: red;

}

博客园

运行结果为：

因为span标签不是块级标签，只占本行内容的大小，因此实际看起来只有背景颜色生效了。

6、class层级选择器

同上，不再具体描述，样式如下图

7、对不同id标签进行同一种修饰

对id为i1,i2和i3的进行相同的修饰，如下。在style中用逗号隔开。

Title

#i1,#i2,#i3{

height: 100px;

width: 100px;

background-color: red;

}

运行结果为：

8、对不同class标签进行同一种修饰

同上，如下图

9、对标签中的属性进行修饰

例如，

博客园

，要求对name这个属性进行修饰。在div后面用中括号把属性括起来即可，如下。Title

background-color: lawngreen;

}

博客园

运行结果：

二、在body的标签中添加style属性

如下所示，在div标签中添加style属性，不同的修饰之间用分号分隔。

Title

运行结果为：

三、在link标签中引入写好的css样式表

1、首先介绍css样式表，在相应的文件夹下点击右键，选择new--stylesheet

在css文件中填写样式也非常简单，和前面的介绍的一样，如下图

2、建好了css样式表，下面导入

我的css文件名字为：博客.css

导入方式就是link的属性rel="stylesheet",href=css的地址，如下

Title

运行结果为：

四、标签优先级

如果上面3钟方式都设置了css属性，那么该按照哪个样式展示呢？

答案是以标签为基准，从下到上依次查找。也就是从近到远。

举例：

Title

background-color: red;

height: 100px;

width: 100px;

}

分析：上述代码在3个位置设置了css样式，那么从标签div开始，从上到下依次是：

(1)在div中添加的属性，蓝色

(2)style标签中设置的样式，红色

(3)link标签导入的样式，粉色(仍为前面的博客.css，三1中的样式)

那么运行结果也就是蓝色，如下：

我们可以通过以下方法直观的查看展示顺序。

可以看到，如果把蓝色去掉，展示红色，把红色去掉会展示粉色，按照由近至远的顺序。