HTML CSS百科及常用嵌入方式

HTML 样式- CSS

CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。样式存储在样式表中，通常放在<head>部分或存储在外部CSS文件中。作为网页标准化设计的趋势，CSS取得了浏览器厂商的广泛支持，正越来越多的被应用到网页设计中去。

网页现在的新标准是W3C。目前的模式是html+css+javascript，如何理解呢，就是html是网页的结构，CSS是网页的样式，javascript是行为。结构就是盖房子先要把结构建出来，然后用CSS来装饰。其实你在用dreamweaver做网页时就已经用到了CSS，比如你用DW的属性面板来设置一个字的字体、颜色和大小，当你选好后，就会自动生成一个.style1的红色代码，在<style></style>之间不知道你注意过没有，这就是CSS。

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.

Look! Styles and colors

Manipulate Text

Colors, Boxes

and more...

尝试一下 - 实例

HTML使用样式
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

本例演示如何使用样式属性做一个没有下划线的链接。
如何使用 style 属性制作一个没有下划线的链接。

链接到一个外部样式表
本例演示如何标签链接到一个外部样式表。

如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。

你可以通过本站的CSS教程 CSS 教程学习更多的CSS知识,或者学习更容易理解的CSS微课.

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

学习更多样式，请访问 CSS 教程.

HTML样式实例 - 背景颜色

背景色属性（background-color）定义一个元素的背景颜色：

Example

<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

尝试一下 »

早期背景色属性（background-color）是使用 bgcolor 属性定义。

尝试一下: 旧版HTML来设置背景方式

HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

实例

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

尝试一下 »

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。

HTML 样式实例 - 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

实例

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

尝试一下 »

文本对齐属性 text-align取代了旧标签 <center> 。

尝试一下

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
 <style type="text/css">
 body {background-color:yellow;}
 p {color:blue;}
 </style>
 </head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

 <head>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
 </head>

HTML 样式标签

已弃用的标签和属性

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。

不建议使用的标签有: <font>, <center>, <strike>

不建议使用的属性: color 和 bgcolor.

学习 HTML+CSS 的书籍推荐

1、《CSS那些事儿》

本书专注于CSS技巧实例的讲解，由浅入深地分析了CSS样式在布局时所需要理解的原理。绕开随处可见的基础知识、网络中能随意搜索到的hack技巧，侧重原理分析，拓展读者使用CSS布局的思维方式，通过本书的阅读读者将会了解到使用CSS布局的强大功能。

全书以传达CSS布局思维为中心，通过页面中的文字、图片、表格、表单等常见元素的处理及各种页面布局方式的使用，使读者能深入了解到如何在页面中更好地运用CSS布局。尤其是在页面布局的部分中，全面分析了多种布局方式，着重分解了两列等高和三列等高的几种方式，并相应说明了等高布局的优缺点。

无论是CSS布局的初学者还是具有一定水准的读者，阅读本书之后将会发现，原来CSS样式居然是这么好玩的东西。本书适合网站开发人员、网页设计人员参考学习，同时也适合作为相关培训机构的教材。

2、《Head First HTML and CSS 2nd Edition》

《Head First HTML5》

这两本应该都有翻译，但是建议看原版

3、《Eric Meyer谈CSS》（上下册）

《Eric Meyer谈CSS(卷1)》融汇了世界级专家Eric Meyer极富价值的CSS实战经验，运用13个典型实际项目，采取手把手的方式来指导读者如何使用CSS来解决实际问题。项目包括转换现有网页、设置新闻网页的样式、设置日历样式、设置菜单样式、创建打印样式多列布局等。

4、《CSS禅意花园》

这本书的作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSS Zen Garden（CSS禅意花园）。全书分为两个主要部分。第1章为第一部分，讨论网站“CSS禅意花同”及其最基本的主题，包含正确的标记结构和灵活性规划等。第二部分包括6章，占据了书中的大部分篇幅。

每章剖析“CSS禅意花园”收录的6件设计作品，这些作品围绕一个主要的设计概念展开，如文字的使用等。通过探索36件设计作品面临的挑战和解决的问题，读者将洞悉主要的Web设计原则以及它们运用的CSS布局技巧，理解CSS设计的精髓，恰当地处理图形和字体来创建界面优美、性能优良且具有强大生命力的网站。

5、《精通HTML》

本书深入地探讨了(X)HTML及相关技术包括CSS、微格式、语义网等，重点阐述了如何在恰当的时候使用恰当的标签，全书始终贯彻现代的Web设计理念，从而使读者可以学习如何充分利用各种标记提供的多样性，创建语义丰富和结构合理的网站。

本书适合具备初步HTML和CSS知识的Web设计开发人员阅读。

6、《精通CSS:高级Web标准解决方案》

本书将最有用的CSS技术汇总在一起，在介绍基本的CSS概念和最佳实践之后，讨论了核心的CSS技术，例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深，直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和bug修复，最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员，将书中讨论的许多技术组合起来，给出了两个实例研究。本书还集中介绍了现实的浏览器问题，是弥补CSS知识欠缺不可或缺的参考书。

本书适合具有(X)HTML和CSS基本知识的任何网页设计人员阅读。

7、《深入浅出html》

本书是一部讲述现代web标准的优秀教程，彻底摒弃了过时的内容，始终贯彻三层分离的思想。书中结合实例讲述如何使用html、css设计符合现代web标准的网页，并讲解了如何使用javascript添加动态行为。书中的主体部分让读者接触html、xhtml的各种主题，逐渐熟悉各种元素。最后一章将书中讲述的各种技术付诸应用，带领读者一步步地创建一个实用的网站。

8、《CSS权威指南》（第3版）

你是否既想获得丰富复杂的网页样式，同时又想节省时间和精力？本书为你展示了如何遵循CSS最新规范（CSS2和CSS2.1）将层叠样式表的方方面面应用于实践。

通过本书提供的诸多示例，你将了解如何做到仅在一处建立样式表就能创建或修改整个网站的外观，以及如何得到HTML力不能及的更丰富的表现效果。

资深CSS专家Eric A.Meyer。利用他独有的睿智和丰富的经验对属性、标记、标记属性和实现做了深入的研究，另外在浏览器支持和设计原则等实际问题上也有独到的见解。你所需要的就是HTML 4.0的知识即可以为网站布局和分页创建简明而且易于维护的脚本，同时兼具桌面系统的美观性和可控性。

9、《网站重构》（第3版）

《网站重构:应用Web标准进行设计(第3版)》内容简介：畅销书作家、设计师、网页标准教父jeffrey zeldman再次更新了他经典的、颠覆行业的指南书。这已经是《网站重构:应用Web标准进行设计(第3版)》的第3版了,此次更新基本涵盖了随着环境和技术的变化,web标准所面临的挑战以及因此而发生的改善。第3版让基于标准的设计思想更加清晰,更加易于理解,帮助你在这个领域中保持聪明和领先。

一如既往,《网站重构:应用Web标准进行设计(第3版)》提供了更多明确的见解和新的例子,来阐述基于标准的设计的核心思想,为你的网站最终确定一个合理的设计与开发方法。

与前两版不同的是,在第3版,除了有很多的“why”来提出问题,也提供了大量的“how”来解决问题。另外,在写作方法上作者力图用诙谐的、有吸引力的写作风格,使复杂的技术更易于理解消化,帮助你轻松创建一个访问快速、低成本维护和开发、更多用户的网站,帮助你用新技术使css布局适应多个浏览器,使网站内容更容易被搜索和访问到。

10、《html+css+js网页制作从入门到精通》

《HTML\CSS\JavaScript网页制作从入门到精通》共分为18章和4个附录，重点介绍使用HTML进行网页制作的方方面面，同时讲解了目前流行的Web标准与CSS网页布局实例，以及基于JavaScript语言的网页特效制作。为了便于读者学习，附录中汇集了经过作者精心整理的网页制作技巧60多例。

HTML5 教程