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 微课.

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式，你可以在 <head> 部分通过 <style> 标签定义内部样式表。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色。

Example

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

学习更多样式，请访问 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 样式标签

标签 描述
<style> 定义文本样式
<link> 定义资源引用地址

已弃用的标签和属性

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

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

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

学习 HTML + CSS 的书籍推荐

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


4、《 CSS 禅意花园 》
CSS禅意花园
这本书的作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSS Zen Garden（CSS 禅意花园）。全书分为两个主要部分。第1章为第一部分，讨论网站“CSS 禅意花同”及其最基本的主题，包含正确的标记结构和灵活性规划等。第二部分包括 6 章，占据了书中的大部分篇幅。
每章剖析“CSS 禅意花园”收录的 6 件设计作品，这些作品围绕一个主要的设计概念展开，如文字的使用等。通过探索 36 件设计作品面临的挑战和解决的问题，读者将洞悉主要的 Web 设计原则以及它们运用的CSS 布局技巧，理解 CSS 设计的精髓，恰当地处理图形和字体来创建界面优美、性能优良且具有强大生命力的网站。
5、《精通 HTML 》
精通HTML
本书深入地探讨了 (X)HTML 及相关技术包括 CSS、微格式、语义网等，重点阐述了如何在恰当的时候使用恰当的标签，全书始终贯彻现代的 Web 设计理念，从而使读者可以学习如何充分利用各种标记提供的多样性，创建语义丰富和结构合理的网站。
本书适合具备初步 HTML 和 CSS 知识的 Web 设计开发人员阅读。
6、《精通 CSS: 高级 Web 标准解决方案》
精通CSS
本书将最有用的 CSS 技术汇总在一起，在介绍基本的 CSS 概念和最佳实践之后，讨论了核心的 CSS 技术，例如图像、链接、列表操纵、表单设计、数据表格设计以及纯 CSS 布局。每一章内容由浅入深，直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug 和 bug 修复，最后由 Simon Collison 和 Cameron Moll 两位杰出的 CSS 设计人员，将书中讨论的许多技术组合起来，给出了两个实例研究。本书还集中介绍了现实的浏览器问题，是弥补 CSS 知识欠缺不可或缺的参考书。
本书适合具有 (X)HTML 和 CSS 基本知识的任何网页设计人员阅读。    


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


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

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

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


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

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

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


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


www.sxiaw.com