美文网首页
关于CSS 的加载方式

关于CSS 的加载方式

作者: 虾丸biu | 来源:发表于2018-04-05 20:25 被阅读0次

外部样式

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。

  • 使用 <link> 标签链接到样式表。如:
<head>
    <link rel="stylesheet" href="style.css"> 
</head>

N.引入style.css时,style.css必须在当前目录下,如果不在当前目录下,则要把路径标明出来。如:

<head>
    <link rel="stylesheet" href="CSS/style.css"> 
</head>

内部样式

当单个文档需要特殊的样式时,就应该使用内部样式表。

  • 可以使用 <style> 标签在文档头部定义内部样式表。如:
<style>
    p{
        font-size: 50px;   
    }
</style>
  • 当需要.html中引入一个.css的文件时。如:
<style>
    @import url(style.css); 
    p{
        font-size: 50px;   
    }
</style>

N.@impor还可以把两个.css的文件连接到一起,在其中一个.css中用@impor引入另一个.css文件。如:

#以下写法都可以
@import url(style2.css); 
@import url("style2.css");
@import url('style2.css'); 
@import "style2.css"; 
@import 'style2.css'; 

内联样式(不推荐)

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

<p style="background: orange; font-size: 24px">
    Hello CSS    
</p>

N.多重样式优先级:内联样式 > 内部样式 >外部样式 > 浏览器默认样式

相关文章

  • 关于CSS 的加载方式

    外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来...

  • html,css,js加载顺序

    1. 加载方式 css 异步加载(不阻塞)js 同步加载(阻塞) 2. 放置顺序 css 放置于 标签中原因:...

  • HTML_link与@import区别

    加载css的两种方式: @import 方式 @import url("b.css"); 对比解释 link属于...

  • 为什么通常情况下会把CSS资源放在头部而js放在尾部

    首先, 关于js和css资源加载时, 对文档解析渲染的阻塞情况如下: css css加载不会阻塞DOM树的解析 c...

  • CSS基础与选择器

    > 1、CSS 加载方式有几种? css加载方式主要有一下几种: 1. 在html中通过 引入当前文件夹下的xxx...

  • CSS 加载

    原文地址:CSS 加载新方式The future of loading CSS Chrome 浏览器有意改变 的加...

  • 关于CSS

    CSS 加载方式 css引用方式分为以下三种: 外部样式 内部样式 内联样式 外部样式 外部式css样式就是把cs...

  • CSS基础与选择器

    一、CSS加载方式 外部样式表(推荐) 通过 在html中引入CSS: 通过@import引入样式,放入CSS中,...

  • ife学习二,CSS介绍

    使用方式 一般在 标签中利用下面格式进行加载css文件 CSS如何工作

  • CSS基础与选择器

    一、CSS 加载方式有几种? 使用 标签,引入外部CSS文件 使用@import(但只能在css中用或者在styl...

网友评论

      本文标题:关于CSS 的加载方式

      本文链接:https://www.haomeiwen.com/subject/ngpdhftx.html