下面我们就介绍一下,如何将大量的CSS从HTML页面结构中分离。
分离的方式有两种,一种是依然放置在HTML文件中,另一种是单独存放在一个文件中。我们以此来介绍一下。
我们写在HTML标签的属性中的CSS是可以全部提取出来放在一个HTML标签里面的。
就是标签。
标签必须被放置在HTML的标签中。(这里说明一下,有一种情况是可以放在中的,我们将在之后的文章中介绍。)
标签必须带有一个属性,这个属性的值目前只能是。这个属性表示这个标签里面的代码是CSS代码。
那么问题来了,所有标签的样式代码都放在一起,我们怎么区分哪个样式对应哪个标签呢?
别着急,先看下面的代码:
注意到,我们对标签和标签中增加了一个名为的属性。属性的值我们可以在标签中找到,并且前面还带了一个点()。
写在标签中的CSS代码不再是和属性中的一样了。标签中的CSS代码在键值对的写法基础上,外面再括了一个大括号()。并且大括号外面还有一段文字。这表示,我们对不同的样式做了分组,大括号外面的这段文字表示了这个分组的名称。
上面代码中,标签中的CSS代码被分为了两组,一组名字叫做,一组名字叫做。
这里你可能也明白了,下面标签的属性对应的值为,标签的属性对应的值为,意味着这两个标签对应的样式分别为标签中的两个不同的组。
另外的疑问出现了,标签中的组名前面的点()是什么意思呢?这个点()表示,现阶段你可以理解为这个只会匹配属性中同名的HTML标签。即,只有HTML标签的属性中的值 与 点()后面的组名一样时,才会把组中的样式添加到对应的HTML标签中。
就好比,给你一个条件,让你在人来人往的广场上找人,找人的条件是带着一个,并且这个人的名字中还得包含““字,找到之后你需要给他,化成女的。这里面,代表的就是HTML标签的属性——也就是那个点();““字代表的就是HTML标签的属性的内容——也就是组名;给他代表的就是将组内CSS样式添加给对应的HTML标签。
咳咳,不要在乎上面例子中的细节。
同理,我们除了之外,还有其他的选择器。下面我们介绍几个常用的:
id选择器
顾名思义,和类似。
只选取HTML标签的属性的值中相同的。
只选取HTML标签的属性的值中相同的。
在CSS中使用井号()表示。
有人又要问了,这俩除了写法上不一样,其他的效果不是一样的嘛。为什么还要有两种呢?
首先,我们要说明一下和的区别。
属性是HTML标签的身份识别,一个HTML文档中,每个标签上的属性的值是唯一的。属性是HTML标签专门用来处理CSS选择的,不同的标签,属性的值可以相同。
其次,我们根据属性和属性的区别可以推断出:
属性值是唯一的,属性值不是唯一的。
当然不是说,一个HTML标签上面可以出现两个属性,而是一个属性,里面可以有多个值,多个值之间通过空格分隔。
注意:这就意味着,属性的值中不可以出现空格。
注意:属性,属性中都不允许出现除 和 之外特殊字符。
所以这就是我们使用和的区别了。如下:
上面的代码中,我们使用为标签设置了CSS样式。
使用为两个标签都设置了下面的CSS样式,并且为第一个标签设置了样式,为第二个标签设置了样式。
并且,我们可以看到,第二个标签的和样式里面都设置了字体粗细(),那么以哪个为准呢?
当属性的值中有多个CSS组名,并且多个组的样式中有重复键()时,以靠后的CSS组中的样式为准(即靠后的优先级更高)。所以,第二个标签的实际样式为:颜色()是蓝色(),字体大小()为,字体粗细()为。
所以说,CSS样式是可以被覆盖的。
可能有人又会问了:那如果一个标签上同时有和,以哪个为准呢?你可真是个小机灵鬼。
当标签上同时有和时,的优先级最高。
标签选择器(element选择器)
大量的对同一个名字的标签设置同样的CSS样式,你肯定会感觉到厌烦。那么就需要我们的(也可以叫做)登场了。
这个选择器可以对同名的标签做统一的设置。
上面的代码中,我们使用()对所有标签做了样式设置,设置内外边距都为0。
对,就是标签里面的第一行。
所以可以说,组名前面没有任何特殊字符的就是()。也就是说组名前面什么都不写就是()。
()只会匹配标签名称和组名相同的标签。上面代码中,换成则会对所有标签做样式设置。
并且优先级: > > ()
当你需要的样式越多,HTML文件将会越长。这个时候为了方便阅读(其实更方便于互相引用,之后会解释),我们更希望将CSS样式独立出来。
那么我们在你项目的HTML文件(根据第一篇文章,文件名应该叫做)的同级创建一个新的文件,取名为。VSCode中应该是这样的:
然后我们将上面代码中的标签中的CSS代码移到这个文件中(别忘了点保存(mac版本的VSCode的保存快捷键:)):
回到文件中,删掉标签:
接下来我们介绍一个新的标签——。标签将会把这两个文件联系到一起——即,将文件链接到文件中。
是的,你没看错,标签只有前面的开始部分,而没有后面的结束部分。这种标签叫做,所有都是在开始部分中结束的:,对,在开始标签的标签名称后面跟一个空格加上斜杠(),就表示这个标签结束了。
上面的代码中就有标签的使用方法:
:这个属性定义了当前文档与被链接文档之间的关系,的意思就是这个被链接进来的文档是用来搞样式的。:被链接文档的类型。这玩意之后会讲到。:被链接文档的路径(位置)。即,文件的相对于文档的位置。
刷新一下浏览器中的,你会看到跟之前一样的效果。
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h59961.shtml