CSS 为什么存在？

随着 Web 在90年代的普及，Web 网页的设计水平也得到提升。 Web开发人员依靠特定的HTML标签来增强网页设计性：

  • <basefont> 定义整个文档的字体
  • <font> 给这个元素内的文字定义字体、颜色、字号
  • <center> 将元素内容居中显示
  • <big> 增大元素内文字的字号
  • <strike> 给元素内文字增加删除线

几个常用的 HTML 属性：

  • bgcolor 给元素定义一个背景颜色
  • text 定义元素内字体颜色
  • 几个 margin 属性可以用来给元素周围添加编剧

为什么避免使用 表格 来布局

主要是因为，创建列可以直观的对齐元素，可以通过表格来控制两个内容之间的排列关系。Web 开发人员曾使用 <table> 元素去设计他们的网页，因为table可以提供一个天然的网格。

<table>
  <thead>
    <tr>
      <th>Logo</th>
      <th colspan="2">Tagline</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="3">Copyright 2015</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Left menu</td>
      <td>Main content</td>
      <td>Right sidebar</td>
    </tr>
  </tbody>
</table>

这种方法很麻烦，原因是：

  • HTML 表格非常臃肿：他们需要大量的样板代码
  • 使用这个标签在语义上是错误的： 表格是用来展示多维度数据的
  • 修改布局需要修改标签：如果你想把左边的列移动到右边，你需要修改HTML结构
  • 表格容易出现语法错误： 行和列需要非常有调理并且嵌套更加复杂
  • 这个标签是难阅读的：表格的嵌套表格来给列中附加新的列

这就是为什么我们放弃使用表格布局并且使用CSS代替他的原因。

CSS 是什么？

CSS 是 Cascading Style Sheets 的简写。他的目的是_美化_标记语言（像 HTML 或 XML）。

CSS给HTML带来生命， 通过选择字体、修改颜色、定义边距、定位元素、动画交互等等。

CSS 如何工作？

CSS 是如何选取一个HTML元素（像段落），选择一个需要修改的属性（像文字颜色），然后修改成一个值（像红色）的呢？

p{ color: red;}
“Style”这个词存在欺骗性，你肯定觉得 CSS 只能用来修改文字颜色、大小、字体。但是CSS可以定义 HTML 文档的布局，通过高度，宽度，内外边距，和位置。

CSS在哪里写

将 CSS 作为属性

你可以直接把写 CSS 写在HTML元素内，通过元素的 style 属性。

<p style="color: red;">这段文字很重要.</p>

在里写 CSS

你可以在 <head> 里 使用<style> 标签：

<html>
  <head>
    <title>Hello World</title>
    <style type="text/css">
      p{ color: red;}
    </style>
  </head>
  <body>
    <p>这段文字是红色。</p>
  </body>
</html>

将 CSS 写在单独的文件内

你可以讲 CSS 写在单独的以.css为扩展名的文件内，然后使用在HTML中 <link> 标签引入。

style.css 内容

p{ color: red;}

<html>
  <head>
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>这段文字是红色的。</p>
  </body>
</html>

这是HTML文档“调用”了 CSS 文件，在这个例子中，一个HTML文档引入了同一目录下的 style.css。

在这三个方法中，我们首选第三种方法，外链 CSS 文件。

为什么不直接把 CSS 写在HTML中？

因为我们想把内容（HTML）和样式分开（CSS）。

如果你想了解更多这两种方式的区别，看这里CSS Zen Garden:each design uses the exact same HTML but a different CSS each time.

将 HTML 和 CSS 分开写更容易维护：相同的 CSS 可以用在整个网站。他更具有灵活性：一个专注于内容，另一个专注于样式。有利于SEO优化，还有个更多不同的目的。

版权声明

知识共享许可协议
本博客文章均为 范明非 原创或翻译，采用知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
原文地址： https://fanmingfei.com/posts/Why_CSS_Exists.html