html 教程

Appearance

HTML样式- CSS ​

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

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

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


实例 ​


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

html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>ngrok(ngrok.cn)</title>
		<style type="text/css">
			h1 {color:red;}
			p {color:blue;}
		</style>
	</head>

	<body>
		<h1>这是一个标题</h1>
		<p>这是一个段落。</p>
	</body>

</html>

如何使用类型属性做一个没有下线的链接:

html
<!DOCTYPE html>
	<html>
	<head> 
		<meta charset="utf-8"> 
		<title>ngrok教程(ngrok.cn)</title> 
	</head>
	<body>
		<a href="http://www.ngrok.cn/" style="text-decoration:none;">访问 ngrok.cn!</a>
	</body>
</html>

显示示例如何显示 标记链接到一个外部样式显示:

html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>ngrok教程(ngrok.cn)</title> 
		<link rel="stylesheet" type="text/css" href="/xxx/xxx/styles.css">
	</head>

	<body>
		<h1>我使用了外部样式文件来格式化文本 </h1>
		<p>我也是!</p>
	</body>

</html>

如何使用 CSS ​

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

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

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

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

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

你可以通过本站的 CSS 教程学习更多的 CSS 知识，或者学习者学习更容易理解的 。

内联式 ​

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

例子 ​

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

学习更多样式，请访问 。

HTML样式实例 - 背景颜色 ​

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

例子 ​

html
<!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 样例 - 字体, 字体颜色 ，字体大小 ​

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

实例 ​

html
<!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（文字对齐）属性指定文本的水平与垂直对齐方式：

实例 ​

html
<!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>标签确定内部样式表：

实例 ​

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

外部样式表 ​

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

html
<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 布局的思维方式，通过本书的阅读者将会了解使用 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 多例。