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属性可以为一个容器 ...
随机推荐
- 解密国内BAT等大厂前端技术体系-携程篇（长文建议收藏）
1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第四篇,前三篇已经讲述了阿里.腾讯.百度在前端技术这几年的技术发展. 这一 ...
- Golang 入门系列（十二）ORM框架gorm
之前在已经介绍了用的github.com/go-sql-driver/mysql 访问数据库,不太了解的可以看看之前的文章 https://www.cnblogs.com/zhangweizhong/ ...
- Python活力练习Day2
Day2:求1000以内的素数 #素数:除了1和它本身外,不能被其他自然数整除 #判断素数的方法:1).暴力法:从2到n-1每个数均整除进行判断 2).开根号法:从2到sqrt(n)均做整除判断( ...
- 如何正确使用 Spring Cloud？【中】
3. Spring 集成了哪些常用组件? 从 2004 年发布 1.0 版本开始,Spring 目前已经演进至 5.x 版本了,为不同时期的应用开发提供了强有力的支撑.现在我们正面对微服务.DevOp ...
- oracle性能优化（项目中的一个sql优化的简单记录）
在项目中,写的sql主要以查询为主,但是数据量一大,就会突出sql性能优化的重要性.其实在数据量2000W以内,可以考虑索引,但超过2000W了,就要考虑分库分表这些了.本文主要记录在实际项目中,一个 ...
- linux bash变量作用域
linux bash变量作用域 一,思考一个问题,当在shell里执行某个程序时,shell是怎么找到这个程序的? shell会去$PATH环境变量定义的目录里去找这个命令.环境变量里一般包括/usr ...
- SVN清理失败(clean up)或者(lock)问题进入死循环最终解决方案
解决方法: step1: 到 sqlite官网 (http://www.sqlite.org/download.html) 下载 sqlite3.exe step2: 将下载到的 sqlite3.ex ...
- 【重学Node.js 第5篇】部署项目到腾讯云服务器
课程介绍看这里:https://www.cnblogs.com/zhangran/p/11963616.html 项目github地址:https://github.com/hellozhangran ...
- numpy代码片段合集
生成shape为(num_examples, num_inputs),符合0-1分布的数据. np.random.normal(0, 1, (num_examples, num_inputs))
- VMware Workstation15激活码
VG5HH-D6E04-0889Y-QXZET-QGUC8 亲测可用