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. CSS之字体样式

    css字体样式 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对单位使用 ...

  2. BA 认证

    IIBA-CBAP https://www.iiba.org/standards-and-resources/core-standard/ PMI-PBA https://www.pmi.org/ce ...

  3. CF959D Mahmoud and Ehab and another array construction task 数学

    Mahmoud has an array a consisting of n integers. He asked Ehab to find another array b of the same l ...

  4. vue.js使用elemnetUi

    安装: npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 引入 Element 你可以引入整个 Element,或是 ...

  5. PXE刷机，存储节点失败

    最近刚刚帮客户对一台满配的X6-2刷机初始化,尝试了下PXE方式,但刷完机后,发现计算节点的imagehistory输出的状态都是成功的,而所有的存储节点状态都为failure,具体如下: [root ...

  6. Luogu5324 BJOI2019删数（线段树）

    考虑无修改怎么做.对于1~n的每个数,若其存在,将最后一个放在其值的位置,剩余在其前面依次排列,答案即为值域1~n上没有数的位置个数.带修改显然记一下偏移量线段树改一改就好了. #include< ...

  7. Xshell连接不上Ubuntu解决方式

    1—— 首先检查一下自己的网络是否正常,如果是插上网线就能用的,就很好:如果是校园网拨号方式上网的,请检查自己是否建立拨号连接. [编辑连接] [添加] PPPOE上网方式选择[DSL]   2—— ...

  8. POJ1055 BULK MAILING

    题目来源:http://poj.org/problem?id=1055 题目大意: 每封信都有一个zip-code, 由5位数字构成,可以通过将zip-code相同或相近的信件打包来节省成本.打包规则 ...

  9. IDEA 文档注释 乱码 终极... 解决方案

    idea bin 目录 下           phpstorm64.exe.vmoptions  最后一行添加  : -Dfile.encoding=UTF-8

  10. CSS+jQuery实现轮播

    CSS+jQuery实现轮播 CSS jQuery 前端  实现功能: 自动轮播: 鼠标放在上面停止轮播: 鼠标放在上面显示左右切换的按钮: 鼠标放在小圆圈上显示对应的图片: 轮播效果图 style. ...