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属性可以为一个容器 ...
随机推荐
- Jquery使用ajax与Flask后端进行数据交互
最近做项目碰到一个坑,jquery使用ajax向flask传输数据的时候,在后端采用request.data无论如何都获取不到数据,代码如下: 前端: <script> function ...
- salt python msgpack.exceptions.
msgpack.exceptions.UnpackValueError: 'utf-8' codec can't decode byte 0x82 in position 22: invalid st ...
- django基础之day09，Forms组件在程序中做了哪些事？ 校验数据、渲染标签、展示信息
******************************* Forms组件 *************************************************** Forms组件在 ...
- 《Java基础知识》Java super关键字
super可以理解为是指向自己超(父)类对象的一个指针,而这个超类指的是离自己最近的一个父类. super也有三种用法: 1.普通的直接引用 与this类似,super相当于是指向当前对象的父类,这样 ...
- Python基础知识第八篇(集合)
#集合是无序的#集合是不同元素组成的#集合是不可变的,列如:列表,字典,元组#创建空集合 s=set() # s={1,2,3,4,2} # print(s) #集合添加>>>> ...
- Ansible自动化部署入门到进阶笔记
目录 一.基本部署 安装Ansible Ansible配置文件 定义Inventory 使用秘钥方式连接 使用帮助 Ansible命令应用基础 二.常见模块 三.Ansible playbook 四. ...
- uni-app实现图片和视频上传功能
使用uni-app实现点击上传,既可以上传视频,有可以上传图片,图片预览,删除图片和视频功能,最终效果如下.uni-app里面没有提供同时上传视频和图片这个插件,只能靠自己手写, 1.页面布局 通过 ...
- 面试连环炮系列（一）：如何保证Redis高可用和高并发
如何保证Redis高可用和高并发? Redis主从架构,一主多从,可以满足高可用和高并发.出现实例宕机自动进行主备切换,配置读写分离缓解Master读写压力. Redis高可用方案具体怎么实施? 使用 ...
- ZKWeb网页框架3.0正式发布
3.0 更新的内容有 更新 .NET 框架 替换项目模版的 netcoreapp2.2 到 netcoreapp3.0 目前支持的 .NET 框架有: net461, netcoreapp2.0, n ...
- jQuery插件 distpicker实现多次赋值
项目里需要实现省市区联动选择功能,使用了一个jQuery插件dispicker,记录一下使用过程中遇到的问题和解决办法. 需要要实现的功能就两个:打开modal框时设置地址,点击重置按钮时重置地址 原 ...