html引入css方式,HTML中引入CSS的方式
一、认识CSS
CSS:层叠样式表(Cascading Style Sheets)
样式表:如果把HTML比作人,那么样式表就是衣帽服饰,就是用来打扮HTML外观的(俗话说人靠衣服,网页靠CSS,才能变得漂亮)
内容与样式分离:HTML代码与CSS代码分离,让它们各自去做擅长的事情
HTML控制结构和内容;CSS控制样式
这样有利于代码的维护
举个栗子:存在已久的QQ空间的装扮功能就是内容与样式分离的最好体现
当我们点击切换不同的皮肤时,空间页面会显示不同的主题样式,这就是在给网页更换皮肤啊
既然将HTML与CSS分离,那么又如何让它们精诚合作呢?向下看
二、四种CSS的引入方式
1. 内联样式(行内式)
即:在html标签内的style属性中设定CSS样式,例如:
我是段落
注:这种方式不推荐使用,因为它只能改变当前标签样式,多处使用会导致代码的可维护性极差
2. 内部样式(嵌入式)
即:在html内的head头部内的style标签对中设定CSS样式,例如:
注:这种方式使html内容结构和css样式分开,便于阅读且代码比较集中,但CSS样式只对当前页面有效。
当多个页面需要引用同一个CSS样式时,修改CSS样式将十分麻烦,此时不利于代码维护,可维护性变差。
3. 外部样式(链接式:link)
即:使用html的link标签引入一个外部独立的 .css 文件
link标签放在html文件内的head头部中,例如:
注:这种方式,CSS代码存储在一个外部独立的文件中,若要更换网站样式,只需修改CSS文件即可,不需改动html文件,所以采用这种方式使代码具有良好的可维护性
4. 外部样式(导入式:@import)
即:使用CSS的语法规则引入一个外部独立的 .css 文件
@import放在html文件head头部里的style标签内(@import也可以放在导入样式表的开头,去引用其他样式),例如:
@import url("style.css"); /* @import放在导入样式表的开头 */
注:这种方式与链接式link一样,将CSS代码存储在一个外部独立的文件中,也具有良好的可维护性,但这种方式也有缺点:白屏和无样式内容闪烁
嘿,除了以上引用的样式外,不要忽略 “ 浏览器的默认样式 ” 哦
三、 引用外部样式时:link 和 @import 的区别
1. 从属关系
link属于HTML的标签,通过 link 标签的 href 属性来引入外部文件;link不仅可以引入CSS样式表,还可以定义RSS、rel属性等
@import属于CSS的语法,@import语法只有一项作用:导入样式表
2. 加载顺序
使用link标签引入的CSS样式在加载页面时被同时加载
使用@import导入的CSS样式将在页面加载完毕之后才被加载
3. 兼容性
link 属于HTML标签,不存在兼容性问题
@import 是 CSS2.1 是在CSS2.1提出的,低版本的浏览器不支持,只可在 IE5+ 才能被识别
4. DOM可控区
link 支持使用Javascript控制DOM去改变样式(通过 JS 操作 DOM ,插入link标签来改变样式)
@import不支持使用Javascript控制DOM去改变样式( 由于DOM 方法是基于文档的,所以无法使用@import的方式插入样式)
5. 权重(若有兴趣自行查询它的原因)
link引入的样式权重大于@import引入的样式
html引入css方式,HTML中引入CSS的方式相关推荐
- CSS——在HTML中引入CSS的四种方式
1.HTML标签内联样式 2.style标签内写css 3.link标签导入css样式 <link rel="stylesheet" type="text/css& ...
- 优化CSS在网页中的加载方式
点评:1.应该将 CSS 放置于结构的上方(一般放置于 head 元素内).CSS 是解释型语言,Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西.只有将 CSS 前置,才可在浏 ...
- ant引入html页面,antdesign 中 使用 iconfont symbol方式引入图标不展示
最近在写项目遇到了一个问题,我使用vue框架搭建了一个项目. 我创建了一个 index.js文件,内容为: import { Icon } from 'ant-design-vue'; const I ...
- js改变css样式_React 中使用CSS的7种方法
来源 | https://www.jianshu.com/p/74aa74484579 第一种: 在组件中直接使用style 不需要组件从外部引入css文件,直接在组件中书写. import Reac ...
- html怎么引入框架,html文件中引入bootstrap框架
bootstrap是让控件更加美观的前端框架,引用bootstrap框架能更好地展示网页.引入bootstrap之前需要先引入jQuery框架,因为bootstrap是基于jQuery实现的. jQu ...
- 如何修改zblog的css,修改Zblog中的CSS的方法
在初学CSS的时候应该都有用过Zblog的主题吧,那么你知道如何修改Zblog中的CSS吗?如果想了解的朋友们就跟爱站小编一起去了解下修改Zblog中的CSS的方法. 在学习应用css之前我们要先了解 ...
- php 引入echarts路径,angular4中引入echarts的方法(代码示例)
本篇文章给大家带来的内容是关于angular4中引入echarts的方法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.安装ngx-echarts npm insta ...
- java读文件几种方式_java中读取文件的方式有哪几种
java中读取文件的方式有哪几种 发布时间:2020-06-19 13:36:48 来源:亿速云 阅读:135 作者:鸽子 读取文件有多种方式,基于传统的输入流方式或基于nio的Buffer缓冲对象和 ...
- java数组初始化的方式,java中初始化数组的方式有几种
java中初始化数组的方式有几种 发布时间:2020-06-01 16:12:45 来源:亿速云 阅读:153 作者:鸽子 三种初始化方式: 1.静态初始化:创建+赋值 2.动态初始化:先创建再赋值 ...
最新文章
- 港科大硕士ICCV 论文涉嫌抄袭,导师回应,二作已申请撤稿
- 初识makefile
- kvm 网络配置之nat、用户模式
- Linux 下使用openSSL 生成RSA密钥对
- 《R语言实战》第3章
- python猴子补丁是什么_什么是Python的monkeypatch(猴子补丁)?
- App设计灵感之十二组精美的手机闹钟App设计案例
- http协议的完整组成
- 真正的门槛 - 全干工程师
- 从零开始刷Leetcode——数组(941.977)
- kettle 连接 Oracle 异常
- 反射认识_03_改变成员变量Fields
- DHT 爬虫的学习记录
- 使用R包barplot3d绘制3D条形图-2020-07-04Sat
- AppCan MVVM框架简单介绍
- 信息时代的“自由宣言”:处理信息膨胀的21条小贴士
- 在线免费完整PDF转PPT格式
- 【算法思考】三维视觉常见问题
- 赶紧收下这四个安卓手机通讯录丢失怎么恢复的技巧吧
- 模仿淘宝聚划算倒计时js,兼容各种浏览器
热门文章
- 杜笙Tulsimer抛光树脂MB-115+MB-106UP技术参数
- html文本框鼠标离开事件,html鼠标事件_文本框事件
- Sql Server 中 Order by排序(升序,降序)
- iconfont图标只显示方框的其中一种可能性
- 计算机中丢失openal32.dll无法启动游戏,缺少openal32period;dll 解决办法 | 手游网游页游攻略大全...
- 1.2.1 用继电器实现1+1=2
- 小蜜蜂网络电话 bt
- Cocos2dx使用ios内支付IAP具体流程-白白
- 从入坑到出坑,我对王者荣耀的看法
- HTML中让表单和提交按钮居中的方法