Html引进css的三种方法 相对路径和绝对路径

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、导入式

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

导入式

链接式

在这里插入图片描述

在这里插入图片描述

运行结果:

在这里插入图片描述

导入式

在这里插入图片描述

运行结果:

在这里插入图片描述

相对路径和绝对路径

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

在这里插入图片描述

在这里插入图片描述

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML路径可以分为相对路径绝对路径两种。 1. 相对路径相对路径是相对于当前文件所在位置的路径相对路径可以根据文件所在的位置来确定目标文件的位置。常见的相对路径有以下几种形式: - 相对于当前文件所在目录:可以直接使用文件名或者文件夹名来表示目标文件的位置。例如,如果当前文件所在目录下有一个名为"image.jpg"的图片文件,可以使用"image.jpg"来引用该图片。 - 相对于当前文件所在目录的上级目录:可以使用"../"来表示当前文件所在目录的上级目录。例如,如果当前文件所在目录的上级目录下有一个名为"styles.css"的样式文件,可以使用"../styles.css"来引用该样式文件。 - 相对于当前文件所在目录的子目录:可以使用子目录名加上斜杠来表示子目录下的文件位置。例如,如果当前文件所在目录下有一个名为"images"的子目录,该子目录下有一个名为"logo.png"的图片文件,可以使用"images/logo.png"来引用该图片。 2. 绝对路径绝对路径是从根目录开始的完整路径绝对路径可以直接指定目标文件的位置,不受当前文件所在位置的影响。常见的绝对路径有以下几种形式: - 完整URL路径:可以使用完整的URL地址来引用网络上的文件。例如,可以使用"https://www.example.com/image.jpg"来引用一个网络上的图片文件。 - 从根目录开始的路径:可以使用斜杠加上文件路径来表示从根目录开始的路径。例如,如果根目录下有一个名为"index.html"的文件,可以使用"/index.html"来引用该文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值