IT兄弟连 HTML5教程 CSS3揭秘 在HTML文档中放置CSS的几种方式
有很多方法将样式表加入到HTML中，每种方法都有自己的优点和缺点。新的HTML元素和属性已被加入，以允许样式表与HTML文档更简易地组合起来。将样式表加入到HTML中的常用方法有内联样式表、嵌入一张样式表或链接到一张外部的样式表。
1 内嵌样式表
样式可以使用style属性内联，该属性可以应用于任意body元素（包括body本身），除了basefont、param和script标记。这个属性将任意数量的CSS声明当作自己的值，而每个声明用分号隔开，如下所示：
<p style="color: red; font-family: ‘微软雅黑’"> 此段落的样式是红色的“微软雅黑”字体</p>
内联的样式比其他方法更加灵活，但需要和展示的内容混合在一起，这样会失去样式表的一些优点。例如在本例中，如果有多个段落<p>标记都需要输出相同的样式，则在每个<p>标记中都需要使用style属性声明相同的样式，不仅需要的代码量比较多，而且不利于更新。
2 嵌入一张样式表
一张样式表可以使用<style>元素嵌入到HTML文档中使用，<style>元素需要放在HTML文档的head部分，如下所示：
其中，<style>和</style>之间是样式的内容（不要在这个标记中写HTML语句），type属性表示使用的是文本中层叠样式表书写的代码。“｛｝”前面是样式的选择器，“｛｝”中是声明的样式属性。嵌入样式表对整个HTML文档都有效，可在一个HTML文档具有独一无二的样式时使用。
3 链接到一张外部的样式表
如果多个文档都使用同一样式表，那么外部样式表会更适用。一张外部的样式表可以通过HTML的link元素链接到HTML文档中。<link />标签放置在文档的head部分，可以通过多个<link />标签链接多个样式文件到同一个HTML文档中，如下所示：
<link rel="StyleSheet" href="style.css" type="text/css" /> <!-- 在HTML中链接一个外部样式文件 -->
可选的type属性用于指定媒体类型，允许浏览器忽略它们不支持的样式表类型。rel属性用于定义链接的文件和HTML文档之间的关系，该属性的值StyleSheet指定一个固定或首选的样式。而href属性则用来指定样式文件的位置，可以是相对的也可以是绝对的URL。外部样式表文件要以扩展名.css命名，并且在样式表文件中不能含有任何像<head>或<style>这样的HTML标记，样式表仅仅由样式规则或声明组成，如下所示：
p { margin: 2em } /* style.css文件中的样式代码 */
在样式文件style.css中，一个单独由本例一条样式语法规则组成的文件，就可以用作外部样式表了。当样式被应用到很多的网页时，一张外部样式表是理想的。开发者使用外部样式表可以改变整个网站的外观，而仅仅通过改变一个文件。同样，大多数浏览器会在缓冲区保存外部样式表，这样如果样式表在缓冲区，就避免了在展示网页时的延迟。
注意、如果同时使用内联样式表和嵌入样式表，并设置了相同属性，则内联样式表的优先级高；而同时使用嵌入样式表和外部样式表并设置相同属性时，则优先级由出现的先后顺序决定。
IT兄弟连 HTML5教程 CSS3揭秘 在HTML文档中放置CSS的几种方式的更多相关文章
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性1
通过CSS选择器找到元素,就要使用CSS属性给找到的元素设置样式.尽管现在的浏览器已经支持了众多的CSS3属性,但作为初学者,最应该关注的就是一些“主流”的属性,如border-radius.box- ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性4
7 多列布局属性 通过CSS3,开发人员能够创建多列来对文本进行布局.在CSS2时代,对于多列布局的设计,大多采用浮动布局和绝对定位布局两种方式.浮动布局比较灵活,但是需要编写大量的附加样式代码,而 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器2
4 结构性伪类选择器 在学习结构性伪类选择器之前,先了解两个概念:伪类选择器和伪元素选择器.伪类选择器是CSS中已经定义好的选择器,不能随便命名.常用的伪类选择器是使用在a元素上的几种,如a:lin ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1
要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成
CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3 ...
- IT兄弟连 HTML5教程 CSS3揭秘 小结及习题
小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性5
9 透明属性 元素透明也是我们常用的样式,在CSS2中使用滤镜属性opacity实现透明效果.现在有了CSS3的rgba属性,就不用这么麻烦了,当然这也得要浏览器支持才行.通常我们定义颜色都是用十六 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性3
5 用户界面属性 在CSS3中,新的用户界面特性包括重设元素尺寸.盒尺寸及轮廓等.本小节着重介绍一下resize属性,只有Firefox 4和Safari 3浏览器支持此属性.resize属性可用于重 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性2
3 背景属性 在CSS3中提供了多个背景属性,这里只介绍两个比较常用的属性,其他属性可以从手册中获取帮助.在CSS3中,通过background-image或者background属性可以为一个容器 ...
随机推荐
- 001_Java概述与环境搭建
Java由来: SUN公司开发,95年推出,96年推出JDK1.0版本 09年被Oracle(甲骨文)收购 詹姆斯·高斯林被称作“Java之父” JavaSE:Java Standard Editoi ...
- 10分钟理解BFC原理
10 分钟理解 BFC 原理 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照 ...
- centos7 启动停止命令
apache启动systemctl start httpd停止systemctl stop httpd重启systemctl restart httpd mysql启动systemctl start ...
- 微信团队分享：极致优化，iOS版微信编译速度3倍提升的实践总结
1.引言 岁月真是个养猪场,这几年,人胖了,微信代码也翻了. 记得 14 年转岗来微信时,用自己笔记本编译微信工程才十来分钟.如今用公司配的 17 年款 27-inch iMac 编译要接近半小时:偶 ...
- 牛客练习赛34 little w and Segment Coverage （差分区间）
链接:https://ac.nowcoder.com/acm/contest/297/C来源:牛客网 题目描述 小w有m条线段,编号为1到m. 用这些线段覆盖数轴上的n个点,编号为1到n. 第i条线段 ...
- hdu 1255 覆盖的面积 (扫描线求矩形交)
覆盖的面积 Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- Pycharm 解释器的快捷键
Ctrl+shift+Z 反撤销 Ctrl +/ 注释 ctrl+d 复制粘贴选中 Ctrl+y 删除默认一行 Ctrl+shift+r 全局搜索 Ctrl+alt+/ 代码整理 compare w ...
- Leetcode题解 - 贪心算法部分简单题目代码+思路（860、944、1005、1029、1046、1217、1221）
leetcode真的是一个学习阅读理解的好地方 860. 柠檬水找零 """ 因为用户支付的只会有5.10.20 对于10元的用户必须找一个5 对于20元的用户可以找(三 ...
- 基于Postman中的报错
Postman中的报错: Could not get any response 错误 Could not get any response There was an error connecting ...
- CRM、ERP是什么？
CRM 全称 Customer Relationship Management,中文意思是客户关系管理. 为什么会有CRM? 因为我们进入到了产能过剩时代,从卖方市场过渡到买方市场,为了将产品卖出去, ...