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属性可以为一个容器 ...
随机推荐
- visual studio code开发代码片段扩展插件
背景 visual studio code编辑器强大在于可以自己扩展插件,不仅可以去插件市场下载,也可以按照官方的API很方便的制作适合自己的插件: 自己最近在开发一个手机端网站项目,基于vant项目 ...
- 【GTK编程】安装与测试
版权声明:本文为博主原创文章,转载请注明出处. https://www.cnblogs.com/YaoYing/ 前言 领导让做个类似平板触摸的GUI程序,通过触摸两块区域,实现背景图片的左右切换.本 ...
- 一遍文章搞清楚VO、DTO、DO、PO的概念、区别
作者:Cat Qi 概念: VO(View Object):视图对象,用于展示层,它的作用是把某个指定页面(或组件)的所有数据封装起来. DTO(Data Transfer Object):数据传输对 ...
- Python爬虫基础——XPath语法的学习与lxml模块的使用
XPath与正则都是用于数据的提取,二者的区别是: 正则:功能相对强大,写起来相对复杂: XPath:语法简单,可以满足绝大部分的需求: 所以,如果你可以根据自己的需要进行选择. 一.首先,我们需要为 ...
- Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
最新在学习Python的基础入门系列课程,今天学习到使用python 的内置库smtplib发送邮件内容. 使用Python发送邮件步骤简单: 创建SMTP连接 使用邮箱和密码登录SMTP服务器 创建 ...
- git 每次提交需要输入密码
亲测可行(第一种) 原文:git每次提交都要输入密码怎么办 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝COPY＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 不少用户反映在使用Git时,经常会遇到需要频 ...
- 记录我的 python 学习历程-Day08 文件的操作
文件操作的初识 用 python 代码对文件进行各种操作. 基本构成: 文件路径:path 打开方式:读.写.追加.读写.写读-- 编码方式:utf-8 / gbk / gb2312-- f = op ...
- CentOS 7上的进程管理
一些杂乱的基础概念 程序是一种静态的文件,躺在磁盘上.而进程则是将程序运行起来放置于内存中.因此进程就是运行中的程序,是程序运行起来的一个实例.同一个程序可以运行为多个进程/实例. 进程之间有父子关系 ...
- 2019年Java面试题基础系列228道（1）
1.面向对象的特征有哪些方面? 面向对象的特征主要有以下几个方面: 抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注这些行为 ...
- TopCoder12729 「SRM589Medium」GearsDiv1 二分图最小点覆盖
问题描述 \(N\) 个齿轮每个齿轮有颜色(RGB),有些齿轮之间会咬合,你需要删除尽量少的齿轮并给每种颜色安排方向使得咬合齿轮不同向.问最多保留多少个齿轮.保证不存在两个相同颜色的齿轮咬合. sub ...