当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。
如何插入样式表
插入样式表的方法有三种:
- 外部样式表
- 内部样式表
- 内联样式
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。
在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。
每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式化文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
下面是一个样式表文件的例子：
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
不要在属性值与单位之间留有空格。
假如使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，它仅在 IE 6 中有效，在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。
可以使用 <style> 标签在文档头部定义内部样式表，如下:
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
本例展示如何改变段落的颜色和左外边距：
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
{
color:red;
text-align:left;
font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
text-align:right;
font-size:20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。
样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。
甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
提示:如果你使用的外部文件样式在 <head>中也定义了该样式，则内部样式表会取代外部文件的样式。
相关推荐
今天，我们将学习如何使用 CSS 创建首字下沉效果。 什么是首字下沉效果？ 首字下沉效果是指在文章或段落的开头使用大写字母或特殊字体，使其字体大于正常文本，以吸引读者的注意力。这项技术常用于报纸、杂志或...
内容概要：本文介绍了如何使用HTML和CSS创建一个简单的静态圣诞树图像。通过设置不同的CSS样式和伪元素，实现了多层级的树形结构和树干的效果。代码示例详细展示了HTML结构和CSS样式的设计，用户可以复制代码并在...
这个压缩包“计算机软件-编程源码-使用HTML XHTML 和CSS创建酷站.zip”显然包含了使用这些技术创建引人入胜的网站的源代码示例。以下是对这些技术的详细解释和它们如何协同工作来创建酷炫的网页。 HTML是网页内容的...
使用CSS创建网页.ppt
用简单的jquery+CSS创建自定义的a标签title提示，用来代替浏览器默认行为。如图： Javascript代码 复制代码代码如下: </pre><pre name=”code” class=”javascript”>$(function() { $(“a[title]”).each...
plangular, 使用 HTML & CSS创建自定义播放器 如果你想创建自定义播放器，我强烈建议你使用 soundplayer react或者更一般的解决方案，请参阅 plyr命令。 Plangular自定义按钮播放器 jxnblk.com/plangular的Angular ...
内容概要：本文档详细介绍如何使用HTML和CSS从零开始创建一个简单的圣诞树网页。其中包括了基本的HTML页面结构定义以及详细的CSS样式规则，用以构建一个具有绿色树层、棕色树干及金色星星和红色球状装饰的虚拟圣诞树...
通过设置div元素的border-radius属性来创建树干和树冠的圆形效果，并利用border属性来构造顶部的金色星星。整个圣诞树由三个部分组成：绿色的树干、树冠以及顶部的金色星星。 代码简洁易懂，适合初学者快速上手，...
用CSS创建打印页面，不必为打印而专门建立一个HTML文件，可以节省一些体力，其前提是按“WEB标准”用CSS+DIV布局HTML页面。 第一、在HTML页面加入为打印机设置的CSS文件 复制代码代码如下: <link href=”css/...
在这个教程里，我将要向你展示如何只使用HTML和CSS创建立体的幻灯片。完全不需要Javascript！开启Safari，我们出发了！在我们开始构造幻灯片之前，理解实现方法非常重要。我们将要使用CSS3新的属性-3D变换。你
CSS创建三角形是网页设计中一个有趣的技术点，它利用CSS边框属性来生成。而在CSS3中，实现3D效果的方法则更为直观和强大，其中包括了创建三维图形如四面体，并且可以加上动画效果。下面将详细解释如何使用CSS创建...
通过分析这个项目，我们可以深入学习如何使用CSS创建交互式的游戏界面。 首先，井字游戏通常是一个3x3的棋盘，由九个单元格组成。在CSS中，我们可以使用网格布局（Grid Layout）或者 flexbox 布局来创建这样一个...
使用html和css创建css变量的小练习。 安装 :wrench: 1.-将存储git clone https://github.com/junix7/variables-css.git到目录git clone https://github.com/junix7/variables-css.git 2.-在您喜欢的浏览器中打开...
讲述了如何创建吸引访问者并把他们留下来的网站，包括新的JavaScript例子，覆盖了层次样式表单(CSS)和XHTML技术. 呵呵,好像大过5M就传不上来了,只好分成两份~_~; 这是第一部分~~
讲述了如何创建吸引访问者并把他们留下来的网站，包括新的JavaScript例子，覆盖了层次样式表单(CSS)和XHTML技术. 呵呵,好像大过5M就传不上来了,只好分成两份~_~; 这是第二部分~~
在IT行业中，创建数据可视化是至关重要的，尤其是对于...了解如何用CSS创建曲线图可以增强你的前端技能，并在某些情况下提供更轻量级的解决方案。通过实践和调试提供的代码，你可以深入理解CSS在图形绘制方面的潜力。
许多开发人员在创建此类效果时依赖JavaScript，但是，使用纯CSS创建更简单的折叠头效果也是完全可能的。 折叠标题的工作方式类似于视差效果。折叠标题的背景保持固定，以便当用户向下滚动页面时，其下方的内容可以在...
例如，你将学会如何使用CSS创建渐变背景、边框和阴影效果，以及如何利用媒体查询实现移动优先的设计策略。同时，书中还会有关于浏览器兼容性和调试技巧的讨论，这对于实际开发工作来说至关重要。 此外，书中还涵盖...
****温馨提示：本书比较经典，所以是以CSS2为基础讲述，个人认为值得学习，然后参考CSS3参考手册应该有所收获**** ...通过书中的例子，你将学会怎样使用CSS创建或修改网站的外观，并且达到普通HTML无法实现的效果。