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. loj #108. 多项式乘法

    #108. 多项式乘法   题目描述 这是一道模板题. 输入两个多项式,输出这两个多项式的乘积. 输入格式 第一行两个整数 n nn 和 m mm,分别表示两个多项式的次数. 第二行 n+1 n + ...

  2. php屏蔽错误消息

    定义和用法: error_reporting() 设置 PHP 的报错级别并返回当前级别. 函数语法: error_reporting(report_level) 如果参数 level 未指定,当前报 ...

  3. 牛客国庆集训day6 B Board （模拟标记思维或找规律或分块？？？）

    链接:https://www.nowcoder.com/acm/contest/206/B来源:牛客网 题目描述 恬恬有一个nx n的数组.她在用这个数组玩游戏: 开始时,数组中每一个元素都是0. 恬 ...

  4. Codeforces Round #526 (Div. 2) D. The Fair Nut and the Best Path 树上dp

    D. The Fair Nut and the Best Path 题意:给出一张图 点有权值 边也要权值 从任意点出发到任意点结束 到每个点的时候都可以获得每个点的权值,而从边走的时候都要消耗改边的 ...

  5. react 部分语法补充

    jsx语法 todolist.js import React, { Component,Fragment } from 'react'; import './style.css' class Todo ...

  6. uva11361 特殊数的数量（数位dp）

    题目传送门 题目大意:给你一个n-m的区间,问你这个闭区间内的特殊数有几个,特殊数的要求是 数的本身 和 各位数字之和  mod k 等于0. 思路:刚接触数位dp,看了网上的题解,说用dp[i][j ...

  7. Java String 字符串操作小结

    // 转载加编辑 -- 21 Apr 2014 1. Java字符串中子串的查找 Java中字符串中子串的查找共有四种方法,如下: 1.int indexOf(String str) :返回第一次出现 ...

  8. 数据分析之Anaconda安装

    Anaconda概述 Anaconda是一个用于科学计算的Python发行版,支持 Linux, Mac, Windows系统,提供了包管理与环境管理的功能,可以很方便地解决多版本python并存.切 ...

  9. logback日志简记

    %date{HH:mm:ss.SSS} [%thread] %-5level %logger{20}:%line - %msg%n 输出: 09:54:09.657 [main] INFO  c.e. ...

  10. 修改jupyter notebook的默认浏览器

    1.打开命令行 2.输入jupyter notebook --generate-config 3.显示出jupyter_notebook_config.py 文件所在的目录.按文件目录找到这个文件. ...