HTML三种样式引入方式
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.外部样式表可以被缓存,减少了带宽的使用,加快了网页打开的速度。
外部样式表有三种引入格式,具体如下:
@import 指令
@import url(site.css);
link 元素
<link rel="stylesheet" type="text/css" href="web.css" media="screen">
rel表示文档与被链接文档之间的关系,比如rel="stylesheet"
表示链接文档为文档的外部样式表,rel="contents"
表示链接文档为文档的目录;type表示文档的MIME类型,href表示被链接文档的位置;media表示被链接文档可显示的设备类型。
XML样式表处理指令:只适用于XML文档
<?xml-stylesheet type="text/css" href="basic.css" media="all"?>
HTTP链接:有些浏览器不支持这种方式
注意:样式表的加载顺序应当满足:a)被引用的样式表要在引用它的样式表前面;b)样式优先级高的样式表在优先级低的样式表的后面,比如局部定义表单section.css要在全局样式定义表单mian.css的后面。
参考资料:
HTML三种样式引入方式的更多相关文章
- css样式引入方式,及常用设置标签样式
一. 三种样式引入方式 1. 内联式-直接写在div标签中,不推荐用 <div style="color:red;font-size:20px;font-family:'Micro ...
- CSS选 择器 三种样式
一.CSS三种样式 代码 宽度 高度 实线 颜色 A内联样式是优先级最高的方式 px必须写 A:内联式 弊端:代码多很乱 <body> <div class="divc ...
- .NET中的三种接口实现方式
摘自:http://www.cnblogs.com/zhangronghua/archive/2009/11/25/1610713.html 一般来说.NET提供了三种不同的接口实现方式,分别为隐式接 ...
- Binding 中 Elementname,Source,RelativeSource 三种绑定的方式
在WPF应用的开发过程中Binding是一个非常重要的部分. 在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的. 这里将实际中碰到过的问题做下汇总记录和理解. 1. so ...
- VMware的三种网络连接方式区别
关于VMware的三种网络连接方式,NAT,Bridged,Host-Only ,在刚接触的时候通常会遇到主机Ping不通虚拟机而虚拟机能Ping得通主机:主机与虚拟机互不相通等等网络问题.本文就这三 ...
- Apache Spark探秘:三种分布式部署方式比较
转自:链接地址: http://dongxicheng.org/framework-on-yarn/apache-spark-comparing-three-deploying-ways/ 目 ...
- [转]详述DHCP服务器的三种IP分配方式
DHCP就是动态主机配置协议(Dynamic Host Configuration Protocol),它的目的就是为了减轻TCP/IP网络的规划.管理和维护的负担,解决IP地址空间缺乏问题.这种网络 ...
- CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级
从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=" ...
- windows phone 三种数据共享的方式(8)
原文:windows phone 三种数据共享的方式(8) 本节实现的内容是数据共享,实现的效果描述:首先是建立两个页面,当页面MainPage通过事件导航到页面SecondPage是,我们需要将Ma ...
随机推荐
- loj #2143. 「SHOI2017」组合数问题
#2143. 「SHOI2017」组合数问题 题目描述 组合数 Cnm\mathrm{C}_n^mCnm 表示的是从 nnn 个互不相同的物品中选出 mmm 个物品的方案数.举个例子, 从 ...
- kuangbin专题十二 HDU1074 Doing Homework (状压dp)
Doing Homework Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- poj3321(dfs序+树状数组)
题目链接:https://vjudge.net/problem/POJ-3321 题意:给一个普通树(不是二叉树),并且已经编号,每个结点为1或0,有两种操作,对单个结点修改和查询一个结点的子树的所有 ...
- 封装下Excel导出
1. 使用方法 1.1 对象使用注解 @ExcelColumn(name = "页面1",freeze = "0,1,1,2",autoWidth=true) ...
- 主席树的各类模板(区间第k大数【动,静】,区间不同数的个数,区间<=k的个数)
取板粗 好东西来的 1.(HDOJ2665)http://acm.hdu.edu.cn/showproblem.php?pid=2665 (POJ2104)http://poj.org/probl ...
- POJ2828 Buy Tickets(线段树之插队问题)
飞翔 问题是这样的:现在有n个人要买票,但是天黑可以随便插队.依次给出将要买票的n个人的数据信息.包含两项:pos,当前第i号人来了之后他肯定要插入到pos这个位置,如果当前pos无人,那最好了,直接 ...
- java/Android String.split 字符串分割
特殊符号分割时需加[].如下图
- MessageFormat 格式化String
public static String buildFailureString(AtomicInteger count, String cause) { return MessageFormat.fo ...
- hive参数设置
-- 设置hive的计算引擎为spark set hive.execution.engine=spark; -- 修复分区 set hive.msck.path.validation=ignore; ...
- 2.centos7 安装Mesos和marathon
master节点 节点名称 IP地址 master1 192.168.161.128 由于硬件资源有限,这里仅安装一个master节点,会存在单点问题.在实际生产中,尽量不要这样操作. 1.安装zoo ...