1. HTML 与 CSS
HTML 描述了文档的结构和内容，如文档的标题、段落、每段的文字等。
CSS 描述了文档在媒体上的外观和布局，如文档的背景色、文字大小、文字颜色、段落间距等。媒体有多种，如屏幕、纸张都是媒体。
CSS 的全名是层叠样式表 (Cascading Style Sheets)，用来为 HTML 、 XML 等结构化文档中的各类元素提供显示样式。 HTML 规范定义了 HTML 元素，<p>、<div>、<image> 都是 HTML 元素。
下面是一个简单的 HTML 文本，有一个标题、两段文字和一个链接，没有使用任何样式。
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>document's title</title> </head> <body> <h1>Lorem ipsum</h1> <p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</p> <p>Aenean nec lorem. In <a href="https://www.readinghere.com">ReadingHere</a>.</p> </body> </html> |
浏览器能够正确显示上面的 HTML 文本：标题比正常文字大一些，段落之间有间距，链接有颜色，如下所示。
Lorem ipsum
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Aenean nec lorem. In ReadingHere.
这是因为浏览器内置了一个基础样式表，它的目的不是为了好看，而是当文档作者没有指定样式时，增加文档的可读性。
现在我们来为上面的 HTML 文本增加一点样式，让它更好看一些。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <title>document's title</title> <style type="text/css"> body {background: azure; font-family:sans-serif;} p {color:red;} a {font-weight: 600;font-size: 15pt;} h1{color:firebrick} </style> </head> <body> <h1>Lorem ipsum</h1> <p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</p> <p>Aenean nec lorem. In <a href="https://www.readinghere.com">ReadingHere</a>.</p> </body> </html> |
修改后的 HTML 文本显示效果如下图所示。
Lorem ipsum
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Aenean nec lorem. In ReadingHere.
因此一篇赏心悦目的文档或网页是由 HTML 和 CSS 共同协作、互相配合完成的，如下图所示。
对于 HTML 而言，CSS 就是它的御用美容大师。因此学会、用好 CSS 是网页前端同志的必修课。
CSS 不仅仅能改变文字的颜色和字体，它还能为我们做很多事情。
2. CSS 能为我们做什么？
- 控制显示布局
- 控制显示布局
- 改变指定区域的背景色
- 改变文字的字体、大小、颜色、效果(粗体、斜体)
- 设定指定区域的边距、缩进
- 设定指定区域的边框样式
- 设定图片的显示效果
- 设定列表的显示效果
- 设定表格的显示效果
- 设置HTML文本在不同媒体(屏幕、纸张)上的呈现效果
以上这些只是 CSS 能为我们做的部分工作。随着对 CSS 的了解不断加深，我们会发现， CSS 既简单又强大，是我们控制文档展示效果的得力工具。
