您现在的位置是:首页 > Javascript
当前栏目
层叠样式表(CSS)1
2023-04-18 15:20:09 时间
一、css的简介
1.层叠样式表的含义
层叠样式表:css是不仅是表现HTML的语言、还是进行样式修饰的语言
层叠:是对一个元素多次设置同一个样式,层层叠加覆盖,如不同的样式对一html标签进行修饰,若样式冲突,则冲突部分应用优先级高的;若不冲突,则共用
样式表:是css属性样式的集合
2.作用
丰富html、使html样式更多样
提高css的样式复用性
使html内容与css样式分离 便于维护
3.引入方式
内嵌样式
内嵌样式是直接把css的代码嵌入到标签中
<div style="color:green;font-size:70px;">
小老弟,针不戳
</div>
用法:
使用style属性将样式嵌入到html标签中、写法:属性:属性值
多属性之间用分号(;)隔开
**不建议使用**
内部样式
在head标签中使用style标签进行css的引入
<style type="text/css">
div{color:green;font-size:70px;}
</style>
用法:使用style标签、type属性将css的引入
<style type="text/css">
属性:type:让浏览器知道要使用css解析器去解析这个样式,写法:属性:属性值;多属性之间用分号(;)隔开
外部样式
link链接方式
把css样式做成一个单独css文件,需要便引用(jj01.css文件)
<link rel="stylesheet" type="text/css" href="jj01.css" />
用法:
创建css文件,把css样式写入文件中
在head中使用link标签进行引入
<link rel="stylesheet" type="text/css" href="路径"/>
rel:设置引入的文件对象与HTML之间的关系
type:让浏览器知道要使用css解析器去解析这个样式
href:css文件的路径
写法:属性:属性值;多属性之间用分号(;)隔开
@import方式(不推荐使用):
我们来聊聊为什么不推荐使用这个方式来引入外部样式(了解一下@import即可,不必学习)
在使用@import方式引入的时候,css是无法并行下载,浏览器首先下的引用的这个css文件,其他css文件需要等解析完成后再发现并下载,然后再解析再进行一系列操作才能把页面显示。这个问题直接说明了一个问题:网页加载时间变长,导致网页会有较长时间停留在空白页面。所以推荐使用link链接
@import方式其他缺点:
@import对部分低版本IE浏览器是不支持的
@import是等html加载完后再在加载
@import是不支持js的动态修改
注:未经同意请勿转载,仅作学习使用。以上有描述不正确之处,望大家能不吝指出,共同学习共同进步。谢谢
相关文章
- 如何卸载SQL Server Express
- Media Foundation播放器
- 掌握4C原则,设计高效的系统架构
- ECS架构分析
- Windows 11升级文件管理器:引入全新UI 优化触控体验
- 鸿蒙开源第三方组件—自定义图片缩放组件PinchImageView-ohos
- Windows11提前曝光!全新UI引发争议,网友:一股苹果味
- 8个强大的基于Bootstrap的CSS框架
- 手写简易浏览器之思路综述篇
- HarmonyOS官方模板学习 之 About Feature Ability(Java)
- Mozilla 开始向所有版本的 Firefox 推送站点隔离功能
- 曝Win10新版让人兴奋:诸多惊喜新功能来了
- HarmonyOS三方件开发指南(19)-BGABadgeView徽章组件
- 为什么Cloudera要创建Hadoop安全组件Sentry?
- Cloudera公司首席架构师谈Hadoop之变迁
- Cloudera将Spark划入Hadoop
- YARN动摇了MapReduce对Hadoop的掌控
- Hadoop 2:大数据演进中的一次大飞跃
- N卡驱动实在太头疼!这款神器帮你彻底解决
- OpenHarmony 1.1.0 LTS 正式发布