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

本文共 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定位的使用
下一篇:导航栏代码例子及注意事项

发表评论

最新留言

感谢大佬
[***.8.128.20]2024年04月09日 05时55分54秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

08 【多线程高并发】Java线程间通信的方式 2019-04-26
【数据结构与算法】什么是跳表?通俗易懂来理解跳表 2019-04-26
【数据结构与算法】什么是图?图是什么?快速带你回顾图有关的知识点 2019-04-26
【数据结构与算法】什么是串?什么是KMP算法?字符串匹配是什么? 2019-04-26
【数据结构与算法】什么是布隆过滤器?如何防止缓存穿透的问题? 2019-04-26
【Java锁体系】CopyOnWriteArrayList是什么?线程安全的arraylist是哪个? 2019-04-26
【面试题目】Java设计模式你有哪些了解?说几个常用的。 2019-04-26
【计算机操作系统】常说的死锁是什么?死锁产生的必要条件是什么?死锁的解决策略是什么? 2019-04-26
【计算机操作系统】进程管理详解?进程与线程区别是什么?进程调度的算法有哪些?进程通信有哪些? 2019-04-26
【计算机操作系统】虚拟内存是什么?分页系统地址映射?页面置换算法有哪些?分段地址映射又是什么? 2019-04-26
【计算机操作系统】设备管理?磁盘结构是怎么样的?磁盘调度算法有哪些? 2019-04-26
【多线程高并发】为什么要使用多线程?创建多少个线程合适呢? 2019-04-26
【多线程与高并发】 Java两个线程轮流打印1-100两个数?多线程轮流打印数字? 2019-04-26
【多线程与高并发】 Java两个线程轮流打印字符串? 2019-04-26
【Linux命令篇】Linux命令实践 2019-04-26
【Leetcode单调队列】Leetcode239 滑动窗口最大值 2019-04-26
【Leetcode-单调栈】单调栈相关的题目-下一个更大的元素I 每日温度 2019-04-26
【Leetcode单调队列】- 洛谷P1714切蛋糕 2019-04-26
【Leetcode优先级队列】- 数据流的中位数 2019-04-26
【Leetcode优先级队列】-合并K个升序链表 2019-04-26