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 使用样式
本例演示如何使用样式属性做一个没有下划线的链接。
链接到一个外部样式表
如何使用 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
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
学习更多样式，请访问 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.
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 ）将层叠样式表的方方面面应用于实践。
9、《 网站重构 》（第 3 版）
《网站重构:应用 Web 标准进行设计(第3版)》内容简介：畅销书作家、设计师、网页标准教父 jeffrey zeldman 再次更新了他经典的、颠覆行业的指南书。这已经是《网站重构：应用 Web 标准进行设计(第 3 版)》的第 3 版了,此次更新基本涵盖了随着环境和技术的变化，Web 标准所面临的挑战以及因此而发生的改善。第 3 版让基于标准的设计思想更加清晰,更加易于理解,帮助你在这个领域中保持聪明和领先。
10、《 html+css+js 网页制作从入门到精通》
《 HTML\CSS\JavaScript 网页制作从入门到精通》共分为 18 章和 4 个附录，重点介绍使用 HTML 进行网页制作的方方面面，同时讲解了目前流行的 Web 标准与 CSS 网页布局实例，以及基于 JavaScript 语言的网页特效制作。为了便于读者学习，附录中汇集了经过作者精心整理的网页制作技巧 60 多例。
客服电话
APP下载
官方微信
请发表评论