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. 适配器设计模式初探（Java实现）

    本篇随笔主要介绍Java实现设配器设计模式. 先来看下待解决的问题: (图片转自http://blog.csdn.net/jason0539) 由上图的情况可知,欧洲壁式插座只有三足插口,如果我们想要 ...

  2. 【NOIP 2013】积木大赛

    描述 春春幼儿园举办了一年一度的“积木大赛”.今年比赛的内容是搭建一座宽度为 n 的大厦,大厦可以看成由 n 块宽度为1的积木组成,第

  3. 洛谷 P1028 数的计算

    嗯... 首先这道题想到的就是递推.... 但是递推失败 (不知道自己是怎么想的 然后又想打一个暴力,但是数的最高位太难存储了,所以又放弃了(并且好像这个暴力大约500就会炸... 然后看了题解,才发 ...

  4. mysql 字段类型VARCHAR转换成DECIMAL

    在我们写代码的实际业务中,有时候实体类用的是String,数据库中自然是VARCHAR类型,但是如果这个实体的属性值放的是数字类型,你查询的时候又需要对它进行排序.sql怎么写呢. 别担心mysql提 ...

  5. json遍历，List<Map<String,Object>>遍历

    js怎样给input对象追加属性,如disabled $(":textbox").attr({"disabled":true}); List<Map< ...

  6. 记录下自己安装cuda以及cudnn

    之前已经装过一次了,不过没有做记录,现在又要翻一堆博客安装,长点记性,自己记录下. 环境 ubuntu16.04 python2.7 商家送过来时候已经装好了显卡驱动,所以省去了一大麻烦. 剩下的就是 ...

  7. apache 压缩 gzip

    配置 编辑httpd.conf文件 去掉 #LoadModule headers_module modules/mod_headers.so 前面的注释# 去掉 #LoadModule deflate ...

  8. C语言中Extern用法

    extern用在变量或函数的声明前,用来说明“此变量/函数是在别处定义的,要在此处引用”. extern修饰变量的声明. 举例:若a.c中需引用b.c中的变量int v,可以在a.c中声明extern ...

  9. Helvetic Coding Contest 2016 online mirror A1

    Description Tonight is brain dinner night and all zombies will gather together to scarf down some de ...

  10. 表格排序插件datatables

    之前用过表格排序插件tinytables,用到后面,随着需求的更改,发现这个插件真的low到爆了,不适合用于多表格,只有一个表格的页面可以凑合着用,有很多局限性. 之后发现了一款表格排序插件datat ...