引入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 ...
随机推荐
- Python 简单入门指北(二)
Python 简单入门指北(二) 2 函数 2.1 函数是一等公民 一等公民指的是 Python 的函数能够动态创建,能赋值给别的变量,能作为参传给函数,也能作为函数的返回值.总而言之,函数和普通变量 ...
- CobaltStrike3.12/13 破解
更新3.13破解版 链接: https://pan.baidu.com/s/14e0tpVPzUhiAhYU2_jvBag 提取码: d9uf MacOS客户端: 链接: https://pan.ba ...
- 【iCore4 双核心板_uC/OS-II】例程三:任务的挂起与恢复
一.实验说明: 当一个任务正在运行的时候,由于某种情况可能需要终止运行一段时间,终止的这段时间就是 所谓的任务的挂起,可以由该任务自身或者其他任务来挂起一个任务.当被挂起的任务需要再次运 行的时候,可 ...
- Unity调用安卓Android的Toast
需求:在游戏中弹窗消息,调起安卓的Toast 项目中需要做Unity和安卓交互时,经常需要通过安卓Toast来做简单的输出,以便于测试. 方法一:Unity中,C#主导 // Unity调用安卓的土司 ...
- C语言 · 猜算式
题目:猜算式 看下面的算式: □□ x □□ = □□ x □□□ 它表示:两个两位数相乘等于一个两位数乘以一个三位数. 如果没有限定条件,这样的例子很多. 但目前的限定是:这9个方块,表示1~9的9 ...
- 【转】Flask入门之上传文件到服务器
#Sample.py # coding:utf-8 from flask import Flask,render_template,request,redirect,url_for from werk ...
- python -- Pythonic
所谓Pythonic,就是极具Python特色的Python代码(明显区别于其它语言的写法的代码) 总结如下: 两变量的内容交换 Python:a,b = b,a 非Python:t=a;a=b;b= ...
- Thread类的join()方法
public class Demo { /** * Thread类的join()方法 * -------------------------------- * 1)join() * 2)join(lo ...
- error: cannot lock ref 'refs/remotes/origin/master': unable to resolve reference 'refs/remotes/origin/master': reference broken...
之前在自己的项目中添加了一个分支,然后做了一些操作,比如同步本地的分支情况到远程仓库中,然后在远程仓库中完成分支合并,以及 Pull request 等等操作,后来,在本地仓库中进行 git fetc ...
- Ext-JS-Modern-Demo 面向移动端示例
基于Ext Js 6.5.2 面向移动端示例,低于此版本可能存在兼容问题,慎用 已忽略编译目录,请自行编译运行 Sencha Cmd 版本:v6.5.2.15 git地址:https://github ...