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. vue脚手架的搭建

    另一博客地址:https://segmentfault.com/a/1190000016451376 一.基础的知识 1.html 2.js 3.css二.搭建项目过程--windows系统1.nod ...

  2. 11、OpenCV Python 图像金字塔

    __author__ = "WSX" import cv2 as cv import numpy as np # 高斯金字塔 #金字塔 原理 ==> 高斯模糊+ 降采样 #金 ...

  3. CF912E Prime Gift 数学

    Opposite to Grisha's nice behavior, Oleg, though he has an entire year at his disposal, didn't manag ...

  4. Spring注解实现定时功能以及Quartz定时器

    一:Spring注解实现--------->Spring3.0以后自带的task,可以将它看成一个轻量级的Quartz 1:maven配置: <!-- quartz--> <d ...

  5. 使用npm发布自己的包

    记录一下大概步骤: 去npm官网注册一个账号 在文件夹下执行npm init 创建 package.json 执行 npm login,并根据提示输入你的npm账号,密码,和邮箱 执行 npm pub ...

  6. sharepoint_study_8

    描述:如何删除webPart无效文件? 图示: 有时候webpart的部署包虽然删除了,但是它的文件依然会留在这个类别中,怎样删除这些无效的文件呢? 解决: 在网站设置中打开web部件,里面列出了网站 ...

  7. stringstream的用法

    stringstream的基本用法 stringstream是字符串流.它将流与存储在内存中的string对象绑定起来. 在多种数据类型之间实现自动格式化. 1.stringstream对象的使用 # ...

  8. 毕业设计 python opencv实现车牌识别 矩形矫正

    主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuow ...

  9. django模型层之多表操作 增删改查

    多表操作之创建模型 这边以书为中心创建一个模型 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一的关系(on ...

  10. 阿里Java开发规约插件使用

    刚刚的云栖大会上,阿里巴巴公布了这款酝酿已久的Java开发规约插件,对于国内开发者来说是一次轻松提高自己代码规范的机会. 安装方法 IDEA安装方法: settings >> plugin ...