CSS编写的位置 [CSS][web前端]

96岁对抗java

已于 2022-04-21 00:39:47 修改

阅读量847

点赞数

分类专栏： web前端文章标签： html5 css web

于 2022-04-21 00:37:38 首次发布

本文链接：https://blog.csdn.net/m0_57001006/article/details/124311212

版权

web前端专栏收录该内容

91 篇文章 1 订阅

订阅专栏

css编写的位置

分为三种编写的位置,我们也称之为三种方式:

方式一: 内联样式 (也称之为行内样式)

在标签的内部通过style属性设置元素的样式

我们在实际编程中不会去使用这种方式: 因为这种方式有以下的一些问题:
1. 如果希望影响到多个元素必须在这多个元素的内部中都复制一遍这个style属性
2. 当样式发生变化时: 我们必须通过一个一个的修改,非常的不方便

eg:

<p style="color:pink;font-size: 200%;">少小离家老大回,乡音无改鬓毛衰</p>

这种方式就是在标签内部使用style属性去设置标签的样式

注意: style属性的内部的格式是css的格式而非是html的格式

第二种方式 : 内部样式表

将样式编写到head标签中的style标签里,然后通过CSS选择器来选中元素(标签)并为其设置样式

可以同时为当前页面中的多个标签设置样式,并且修改的时候只需要修改一处即可修改全部的被选中标签的样式
内部样式表更加方便对样式进行复用
但是内部样式表的方式也还是有一些问题:
- 问题: 我们的内部样式表只能对一个网页起作用,我们的内部样式表的样式不能对多个页面同时起作用
  - 也就是不能跨页面进行复用

eg:

<head>
    <meta charset="utf-8">

    <!-- 内部样式表 -->
    <style>
        <!-- 这里的p就是一个元素选择器 -->
        p{
            color:pink;
            font-size: 50px;
        }
    </style>
</head>

这种方式就是一种内部样式表的形式,
- 注意: style标签是在head标签的内部

第三种方式: 外部样式表

可以将CSS样式编写到一个外部的CSS文件中,然后通过Link标签来引入外部的CSS文件

外部样式表需要通过link标签进行引入,意味着只要想使用外部样式表中的这些样式,我们的各个网页都能对其进行引用 --> 这样就使得我们的外部样式表中的样式可以跨页面进行复用了
- 那么我们如果通过link标签将外部CSS文件(外部样式表)引入到我们的html文件中来?
  - 我们将link标签的rel属性的值设置为"stylesheet" 然后将link标签的href属性的属性值设置为CSS文件地址即可
并且将样式编写到外部的CSS文件中 ( 也就是使用外部样式表的方式 ) 来编写网页样式,还可以使用到浏览器的缓存机制,从而加快网页的加载速度,提高用户体验
- 那么什么是浏览器的缓存机制?
  - 我们加载一个网页的时候,我们不是只加载一次,是要加载多次的(先将页面加载出来,然后加载图片等等),每次加载后浏览器就会将加载的内容暂存在本地,这个时候如果我们是使用的是外部样式表的形式编写的页面的样式,这个时候加载这个页面的时候就会将我们的页面对应的外部样式表也暂存到本地,那么如果我们接下来其他页面中也是用到了这个外部样式表的时候就不需要再加载这个外部样式表(也就是CSS文件 ) 了

eg:

我们先给出我们的外部样式表(CSS文件)

/* 
这个就是我们的一个外部样式表,在我们的外部样式表中编写的内容都是要符合我们的CSS语法的
 
 就比如现在的这个注释不是 <!-- -->了,而是/* */
 */
p{
	color:red;
	font-size: 50px;
}

然后这里我们再给出使用我们上面的外部样式表修饰的html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 外部样式表的名称叫做外部样式表1.css -->
		<link rel="stylesheet" href="./外部样式表1.css">
	</head>
	
	<body>
		<!-- 外部样式表 -->
		<p>少小离家老大回,乡音无改鬓毛衰</p>
	</body>
</html>

补充:

当link标签中的rel属性为"icon"的时候就是设置页面图标 ( 网页标题栏左侧的位置 ) ,然后我们可以将link标签的href属性值设置为我们想设置为图标的图片的地址就可以了

补充二:

stylesheet 就是样式表的含义

stylesheet就是link标签中的rel属性中的可选值之一(用于在HTML中与我们的CSS建立联系)

96岁对抗java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS编写的位置 [CSS][web前端]

css编写的位置分为三种编写的位置,我们也称之为三种方式:方式一: 内联样式 (也称之为行内样式)在标签的内部通过style属性设置元素的样式我们在实际编程中不会去使用这种方式: 因为这种方式有以下的一些问题:如果希望影响到多个元素必须在这多个元素的内部中都复制一遍这个style属性当样式发生变化时: 我们必须通过一个一个的修改,非常的不方便eg:<p style="color:pink;font-size: 200%;">少小离家老大回,乡音无改鬓毛衰</p&
复制链接

扫一扫