引入css的两种方式
摘自:https://www.cnblogs.com/gyjWEB/p/4831646.html
在HTML中引入css的其中的两个方法:
1.如果使用链接式,需要使用如下的语句引入外部css文件:
2.如果使用导入式,则需要使用如下语句:
@import "style.css"
使用链接式时,会在装载页面主体部分 之前装载css文件,这样现实出来的页面从一开始就是带有样式效果的,
而使用导入式时,会在整个页面装载完成之后再装载css文件,
对于有的浏览器来说,在一些情况下,如果页面文件的体积比较大,则会出现先现实无样式的页面,闪烁一下之后再出现设置样式的效果。
从浏览者的感受来说,这是使用导入式的一个缺陷。
对于一个较大的网站,为了便于维护,可能会希望把所有的css样式分别放在几个 css文件中,这样如果使用链接式引入,就需要几个语句分别导入css文件。
如果要调整css文件的分类,就需要同时调整html文件。这对于维护工作来 说,是一个缺陷。
如果使用导入式,则可以只引进一个总的css文件,在这个文件中再导入其他独立的css文件;而链接式则不具备这个特征。
````因此这里给大家的建议是,
如果仅引入一个css文件,则使用链接方式;如果需要引入多个css文件,则首先用链接式引入一个“目录”css文件,这个“目录”css文件中再使用导入式引入其他css文件。
但是如果希望通过JavaScript来动态决定引入哪个css文件,则必须使用链接方式才能实现。
如何将多个CSS文件导入到一个CSS文件中?
答案:
你可以写了三个css样式表
css_red.css , css_blue.css , css_green.css
这样你就可以写一个主样式 style.css 把三个样式表都装进去:
@import "css_red.css";
@import "css_blue.css";
@import "css_green.css";
调用的时候只调用 style.css 就行了。
具体代码:
字体属性
红色
蓝色
绿色
style.css
@charset "utf-8";
@import "css_red.css";
@import "css_blue.css";
@import "css_green.css";
css_red.css
@charset "utf-8";
.red {
color:red;
}
css_blue.css
@charset "utf-8";
.blue{
color:blue;
}
css_green.css
@charset "utf-8";
.green{
color:green;
}
引入css的两种方式的更多相关文章
- vue引入css的两种方式
方案1.在main.js中引入方式 import '@/assets/css/reset.css' 方案2.在.vue文件的<style/>标签里面引入 @import &qu ...
- 引入springboot的两种方式以及springboot容器的引入
一.在项目中引入springboot有两种方式: 1.引入spring-boot-starter-parent 要覆盖parent自带的jar的版本号有两种方式: (1)在pom中重新引入这个jar, ...
- 引入外部CSS的两种方式及区别
1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...
- 服务容错保护断路器Hystrix之一:入门示例介绍(springcloud引入Hystrix的两种方式)
限流知识<高可用服务设计之二:Rate limiting 限流与降级> 在微服务架构中,我们将系统拆分成了一个个的服务单元,各单元间通过服务注册与订阅的方式互相依赖.由于每个单元都在不同的 ...
- WordPress引入css/js两种方法
WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...
- 引入CSS的三种方式
虽然入职已经大半年,并自诩前端工程师,但是我真的不会……(有一种我有罪我该死的感觉 从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 1.内联式 内联式css样式表就 ...
- 引入css的几种方式
使用CSS样式的几种方式 CreateTime--2017年10月11日16:45:26 Author:Marydon a.外部样式 a1.链接式(推荐使用) <link href=&quo ...
- CSS&JS两种方式实现手风琴式折叠菜单
<div class="accordion"> <div id="one" class="section"> < ...
- 引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 <li ...
随机推荐
- [sh]top添加到crontab不生效问题解决
今天遇到个小问题 top结果赋值给变量,放到文件做处理, 但是不生效问题. https://www.phpbulo.com/archives/509.html cat top.sh NAME=&quo ...
- 【iCore4 双核心板_ARM】例程三十三:SD_IAP_ARM实验——更新升级STM32
实验现象及操作说明: 1.本例程共有两个代码包,APP和IAP,IAP程序功能实现将APP程序升级至STM32中. 2.直接上电或烧写程序将执行升级的APP应用程序. 3.按下按键上电或写程序将进行升 ...
- 使用winsw部署spring boot jar 项目
参考:用winsw让任何Windows程序都能运行为服务 简介在linux下部署springboot项目是一件很简单的事,直接后台运行就行了,最多写个shell脚本开机自启就行了.我们最近做的项目需要 ...
- “Java是编译执行的语言”这句话对吗?
现在让你谈谈对Java平台的理解,你是否会感觉内容过于庞大?这个问题是比较宽泛的,Java发展到现在已经不仅仅是语言这么简单了,Java平台涉及的,包括但不仅限于下面提到的这些内容: Java语言本身 ...
- linux 安装svn客户端
安装命令:yum install -y subversion 客户端使用命令: svn help 帮助命令 svn checkout --help 子帮助命令
- springboot-aop面向切面编程
需求: 项目中需要记录用户操作信息,例如用户登陆系统后做了那些操作,需要有具体的日志记录. 解决办法: 1.编写操作记录日志业务类,在使用的方法中调用(一般记录方式). 2.使用面向切面方式记录日志, ...
- Centos7 启动脚本
Centos7 启动脚本 启动脚本.如果进程已存在,输出错误信息后退出: #! /bin/bash PIDS=`ps -ef | grep '/usr/bin/node ./index.js' | g ...
- shell中uniq与sort -u 两种去重的对别
sort -u 和 uniq都能起到删除重复信息的功能,那么他们的区别究竟在哪呢?$ cat test jasonjasonjasonfffffjason 下面分别执行三个命 ...
- 简单工厂模式(Java与Kotlin版)
Kotlin基础知识的学习,请参考之前的文章: Kotlin入门第一课:从对比Java开始 Kotlin入门第二课:集合操作 Kotlin入门第三课:数据类型 初次尝试用Kotlin实现Android ...
- 【转载】C++中替代sprintf的std::ostringstream输出流详解
一.简单介绍 ostringstream是C++的一个字符集操作模板类,定义在sstream.h头文件中.ostringstream类通常用于执行C风格的串流的输出操作,格式化字符串,避免申请大量的缓 ...