HTML三种样式引入方式

  HTML有三种样式引入方式：行内样式(inline Styles)、嵌入式样式表(Embedded Style Sheets)、外部样式表(External Style Sheets)。

一、行内样式(Inline Styles)

  又称内联表单样式，它直接写在标签内部，用style属性声明。行内样式不能实现所有的样式，比如hover和@import。

<p style="color: red; background: yellow;">Look out!This text is alarmingly presented!</p>

二、嵌入式样式表(Embedded Style Sheets)

  又称内部样式表，必须写在<head>标签中，用<style>标签申明。需要注意，XML语言有可能不支持嵌入式表单的写法，一定要检查语言的DTD。

<html>

<head>

<title>Stylin'!</title>

<style type="text/css">

h1 {color: purple;}

p {font-size: smaller; color: gray;}

</style>

</head>

...

</html>

三、外部样式表(External Style Sheets)

  外部样式表较其他两种方式，优势在于：1. 利用通用样式表，减少重复样式的冗余编码和修改；2. 内容与样式分开存储，加快了编码的效率，同时增加了文档的可读性；3.外部样式表可以被缓存，减少了带宽的使用，加快了网页打开的速度。

  外部样式表有三种引入格式，具体如下：

  1. @import 指令

     @import url(site.css);

  2. link 元素

     <link rel="stylesheet" type="text/css" href="web.css" media="screen">

  rel表示文档与被链接文档之间的关系，比如rel="stylesheet"表示链接文档为文档的外部样式表，rel="contents"表示链接文档为文档的目录；type表示文档的MIME类型，href表示被链接文档的位置；media表示被链接文档可显示的设备类型。

  1. XML样式表处理指令:只适用于XML文档

     <?xml-stylesheet type="text/css" href="basic.css" media="all"?>

  2. HTTP链接：有些浏览器不支持这种方式

  注意：样式表的加载顺序应当满足：a)被引用的样式表要在引用它的样式表前面；b)样式优先级高的样式表在优先级低的样式表的后面，比如局部定义表单section.css要在全局样式定义表单mian.css的后面。

参考资料：

[1] CSS Pocket Reference

HTML三种样式引入方式的更多相关文章

  1. css样式引入方式，及常用设置标签样式

    一. 三种样式引入方式   1. 内联式-直接写在div标签中,不推荐用 <div style="color:red;font-size:20px;font-family:'Micro ...

  2. CSS选 择器 三种样式

    一.CSS三种样式 代码 宽度 高度 实线 颜色  A内联样式是优先级最高的方式 px必须写 A:内联式  弊端:代码多很乱 <body> <div class="divc ...

  3. .NET中的三种接口实现方式

    摘自:http://www.cnblogs.com/zhangronghua/archive/2009/11/25/1610713.html 一般来说.NET提供了三种不同的接口实现方式,分别为隐式接 ...

  4. Binding 中 Elementname，Source，RelativeSource 三种绑定的方式

    在WPF应用的开发过程中Binding是一个非常重要的部分. 在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的. 这里将实际中碰到过的问题做下汇总记录和理解. 1. so ...

  5. VMware的三种网络连接方式区别

    关于VMware的三种网络连接方式,NAT,Bridged,Host-Only ,在刚接触的时候通常会遇到主机Ping不通虚拟机而虚拟机能Ping得通主机:主机与虚拟机互不相通等等网络问题.本文就这三 ...

  6. Apache Spark探秘：三种分布式部署方式比较

    转自:链接地址: http://dongxicheng.org/framework-on-yarn/apache-spark-comparing-three-deploying-ways/     目 ...

  7. [转]详述DHCP服务器的三种IP分配方式

    DHCP就是动态主机配置协议(Dynamic Host Configuration Protocol),它的目的就是为了减轻TCP/IP网络的规划.管理和维护的负担,解决IP地址空间缺乏问题.这种网络 ...

  8. CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级

    从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=" ...

  9. windows phone 三种数据共享的方式(8)

    原文:windows phone 三种数据共享的方式(8) 本节实现的内容是数据共享,实现的效果描述:首先是建立两个页面,当页面MainPage通过事件导航到页面SecondPage是,我们需要将Ma ...

随机推荐

  1. [51nod1220] 约数之和（杜教筛+莫比乌斯反演）

    题面 传送门 题解 嗯--还是懒得写了--这里 //minamoto #include<bits/stdc++.h> #define R register #define IT map&l ...

  2. python web开发之flask框架学习(2) 加载模版

    上次学习了flask的helloword项目的创建,这次来学习flask项目的模版加载: 第一步:创建一个flask项目 第二步:在项目目录的templates文件夹下创建一个html文件 第三步: ...

  3. loj #6235. 区间素数个数 min_12.5筛

    \(\color{#0066ff}{ 题目描述 }\) 求 \(1\sim n\) 之间素数个数. \(\color{#0066ff}{输入格式}\) 一行一个数 n . \(\color{#0066 ...

  4. 最短路【洛谷P1841】 [JSOI2007]重要的城市

    P1841 [JSOI2007]重要的城市 题目描述 参加jsoi冬令营的同学最近发现,由于南航校内修路截断了原来通向计算中心的路,导致去的路程比原先增加了近一公里.而食堂门前施工虽然也截断了原来通向 ...

  5. 数据结构6: 静态链表及C语言实现

    本节继续介绍线性表的另外一种链式表示——静态链表.(前面介绍的链表称为 动态链表 ). 逻辑结构上相邻的数据元素,存储在指定的一块内存空间中,数据元素只允许在这块内存空间中随机存放,这样的存储结构生成 ...

  6. getTasksWithCompletionHandler的用法

    最近在学习iOS的NSSession的后台下载,使用getTasksWithCompletionHandler获取下载任务时候,发现一些问题,希望分享一下: 第一次写博客有点乱,大家不要见怪-- NS ...

  7. jeesite 框架的简单应用

    个人觉得比较完善的一个讲解jeesite的网站 https://www.w3cschool.cn/jeesite/ jeesite官网 http://jeesite.com/ 公司项目都是基于jees ...

  8. ubuntu下vnc部署安装

    ubuntu下vnc部署安装,参考如下博客:https://www.cnblogs.com/xuliangxing/p/7642650.html https://jingyan.baidu.com/a ...

  9. 工具类_GsonUtils

    import java.lang.reflect.Type; import com.google.gson.Gson; /** * Gson工具类 2015-02-01<br/> * 1, ...

  10. shell 获取hive表结构

    hive -S -e "select * from db_name.table_name limit 0"|grep table_name|xargs -n1|sed 's/tab ...