Html引进css的三种方法 相对路径和绝对路径
发布日期:2022-02-06 00:27:09 浏览次数:31 分类:技术文章

本文共 602 字,大约阅读时间需要 2 分钟。

Html引进css的三种方法

CSS的引入方式共有三种:行内样式、内部样式表、外部样式表。

一、行内样式

使用style属性引入CSS样式。示例:

梦工场牛逼!

我是p标签

实际在写页面时不提倡使用,在测试的时候可以使用。

在这里插入图片描述

运行结果:

在这里插入图片描述

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

示例:![在这里插入图片描述](https://img-blog.csdnimg.cn/20200117211640625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjE4Mjc3MA==,size_16,color_FFFFFF,t_70

在这里插入图片描述

运行结果:

在这里插入图片描述

三、外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式。

语法:

1、链接式

2、导入式

示例(就用我做网站头部导航栏时的例子,顺便可以小白可以看看导航栏的代码):链接式

导入式

链接式

在这里插入图片描述

在这里插入图片描述

运行结果:

在这里插入图片描述

导入式

在这里插入图片描述

运行结果:

在这里插入图片描述

相对路径和绝对路径

我觉得网上的那些解释的太复杂了,我在一本书上看到他解释的挺清楚的,而且有举例子容 易懂,所以我就直接把书上内容的图片直接奉上。

在这里插入图片描述

在这里插入图片描述

转载地址:https://blog.csdn.net/weixin_46182770/article/details/104024907 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:子元素浮动导致父元素坍塌的原因和规避方法以及Position定位的使用
下一篇:导航栏代码例子及注意事项

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.219.124.196]2023年11月27日 06时19分23秒