2024年网页设计内联样式是什么(共3篇)

网页设计内联样式是什么 第1篇

上面我们知道了 HTML 加载 css 的几种方式和如何去加载,但是有没有想过如果我们同时写了一个属性,那么谁会执行谁的?

这里我们做一个实验,来验证一下

我们先来对比一下内联样式和内部样式,来看一下,HTML 会显示什么颜色

红色的哈,然后我们再对比一下外部样式和内部样式

这个外部样式的颜色是黄色,再来看看到底是啥颜色

是绿色啊,这就说明外部样式的优先级要低于内部样式

总结: 内联样式优先级 > 内部样式优先级 > 外部样式优先级

网页设计内联样式是什么 第2篇

我们知道啊,这个 css 样式可以写很多,好比让字体变大,变一个颜色啥的,如果我们把这些写在两个地方怎么样呢?现在我们来试一下

效果如下

我们可以发现,这个颜色使用的是内部样式表中的蓝色,而大小是用的外部样式表中的 50px ,这也就说明,这个东西是可以叠加的,如果碰到重复的,按照优先级进行选择

就先这么多,大家多练习一下~~

网页设计内联样式是什么 第3篇

我们这个 css 可以写在三个地方,不同的地方有不同的写法,我们根据写的地方进行区分,也就是下面的这三个

内联样式呢,就是和这个标签写在一起,大概写法这样:

可以看到啊,我们使用 HTML 中标签中带的这个 style 属性,然后将样式写在这里,并且用分号相隔

内部样式,就是写在所需要的 HTML 页面中,随着页面是一起的

可以看到啊,这个之前我们见过,这个就是内部样式,会跟随着 HTML 一起走动

内部样式的定义,是在这个 head 中进行定义,关键词是 style ,然后给一个 type 是 text/css 这个是固定写法,记住即可

然后我们将我们所需要写的样式填充在这个 style 标签中

外部样式我们之前没有说过,这个是引入外部的 css,因为有一些 css 可以是一些页面都去使用的,但是我们每个页面写一次,到时候维护也麻烦,如果使用这种外部引入的话,这样就方便多了,相当于一次封装。来看一下如何去使用

首先先弄一个 的文件

然后我们定义一些样式

接着我们将这个 引入到旁边的 中

引入呢,需要使用到另外一个标签,就是 link 标签,除去这个标签你之外,我们还需要使用到它里面三个主要的属性

1. rel :规定当前文档与被链接文档之间的关系(css 的 rel 是 stylesheet)

2. type :规定被链接文档的 MIME 类型(css 的 type 是 type/css )

3. href :规定被链接文档的位置

知道了这些之后,我们来引入一下

当然啊,可能有人不相信,我们这里呢再来添加一个声明,我们再来看一下

是OK的啊,说明我们引入了

猜你喜欢

热门内容