CSS引用外部样式表的优点：一般的浏览器都带有缓存功能，所以用户不用每次都下载此CSS文件，所以外部引用相对于内部引用和内联引用来说是是节省资源的。

CSS使用内部样式表、内联样式表的优点：可以直观的看到CSS代码，可以方便的修改并观察更改后的效果。

一：引用外部样式表方式一，使用link标签引用CSS

<head>

    <link rel="stylesheet" type="text/css" href=http://www.yoursite.com/style.css />

</head>

文件路径可以使用相对路径或者绝对路径。

二：引用外部样式表方式二，使用@import引用CSS

<head>

        <style type="text/css">@import url(http://www.yoursite.com/style.css);</style>

</head>

文件路径可以使用相对路径或者绝对路径。

三：内部样式表

<style type="text/css">

    li{list-style-type: none;}

    a{text-decoration:none;}

    .red{color:#f00;}
</style>

style标签正常情况应该放在head标签内部。

四：内联样式表

<p style="font-size: 10px; color: #FFFFFF;">

        使用CSS内联引用表现段落.

</p>

CSS的引用方式（引用外部样式表、内部样式表、内联样式表）的更多相关文章

  1. CSS3——注释 id 和 class 选择器 css创建（外部、内部、内联样式表）

    注释 /*         注释内容          */ id 和 class 选择器 id   ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用 < ...

  2. DOM与元素节点内联样式

    获取.设置及移除单个内联 CSS 属性 每个 HTML 元素都有个 style 属性,可以用来插入针对该元素的内联 CSS 属性. <div style='background-color:bl ...

  3. CSS中的层叠、特殊性、继承、样式表中的@import

    CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...

  4. HTML&CSS基础-内联样式和内部样式表

    HTML&CSS基础-内联样式和内部样式表 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CSS(Cascading Style Sheets)简介 层叠样式表(Cas ...

  5. 如果使用引用方式引用了js后 则不能再本地写js 因为写了后不会有效果

    如果使用引用方式引用了js后 则不能再本地写js 因为写了后不会有效果

  6. 你真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？

    css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...

  7. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  8. JS获取内联样式

    JS获取内联样式 //获取内联样式 function getCss(obj,attr){//obj:对象,name:style属性 if(obj.currentStyle) { return obj. ...

  9. JavaScript 获取和修改 内联样式

    JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...

随机推荐

  1. （剑指Offer）面试题60：把二叉树打印成多行

    题目: 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. 思路: 很明显,采用广度优先遍历来解决,但因为需要按行输出,所以需要判断每一层的开始和结束,因此需要两个变量,一个表示当前层尚 ...

  2. （C++）i++和++i，哪个效率高一些

    在看<程序员面试笔试宝典>时,发现了这样一个问题,书中只给出了++i的效率高一些,但并没有给出具体的解释和说明. 在网上找到下面的答案: 1.从高级层面上解释 ++i 是i=i+1,表达式 ...

  3. hadoop MultipleInputs fails with ClassCastException （get fileName）

    来自:http://stackoverflow.com/questions/11130145/hadoop-multipleinputs-fails-with-classcastexception F ...

  4. SecureCRT 命令行备注

    > 查出某个域名绑定的IP nslookup api.kaixin001.com Non-authoritative answer: Name:    a.kaixin001.com Addre ...

  5. 算法笔记_123:蓝桥杯第七届省赛(Java语言B组部分习题)试题解答

     目录 1 凑算式 2 方格填数 3 四平方和   1 凑算式 凑算式 B DEF A + --- + ------- = 10 C GHI (如果显示有问题,可以参见[图1.jpg]) 这个算式中A ...

  6. 设计模式之适配器模式（Adapter Pattern）C++实现

    适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁.这样的类型的设计模式属于结构型模式.它结合了两个独立接口的功能. 意图:将一个类的接口转换成客户希望的另外一个接口.适配器 ...

  7. MVC第一次访问比较慢的解决方案

    一.NGen优化 %WINDIR%\Microsoft.NET\Framework64\v4.0.30319\ngen install EntityFramework.Core.dll %WINDIR ...

  8. EXCEPTION-SQL语句

      CreateTime--2017年1月12日14:37:52Author:Marydon 声明:异常类文章主要是记录了我遇到的异常信息及解决方案,解决方案大部分都是百度解决的,(这里只是针对我遇到 ...

  9. 变量名解析：LEGB原则

    # -*- coding: cp936 -*- #python 27 #xiaodeng #变量名解析:LEGB原则 ''' L-----local 局部名字空间 E-----enclosing 直接 ...

  10. Loadrunner脚本编程（1）-大体思路

    http://www.360doc.com/content/10/0806/13/1698198_44076570.shtml 就目前的了解.Loadrunner的脚本语言其实和C没什么区别.他内部的 ...