[Web] 从零开始 - CSS设计

[Web] 从零开始教程 » [Web] 从零开始 - CSS设计

博客首页 » Web 从零开始 - CSS设计

发布于 07 Jul 2015 08:22
标签 blog
我们会发现，介绍例子的风格比较千篇一律，那么怎么改变风格呢？答案是CSS层叠样式单。

CSS层叠样式单

先不去研究名字，把上一次的表单例子略作修改，加上了style=来指定风格。另外，为了便于理解，我们去掉了实际搜索的<form>部分：

<!doctype html>
<html>
  <body>
    <input type="text" style="background:silver" value="关键词">
    <input type="submit" style="background:silver" value="搜索">
  </body>
</html>

可以看到：

有些变化了吧。

这样，通过给每一个html的元素指定Style，我们可以改变它们的风格。

CSS的class

通过上例子，我们已经能够改变html元素的风格了，只是这样写多了，HTML代码变得越来越冗长。

CSS同时支持用class来简化。

<!doctype html>
<html>
  <style>
    .my-bg {
      background:silver;
    }
  </style>
  <body>
    <input type="text" class="my-bg" value="关键词">
    <input type="submit" class="my-bg" value="搜索">
  </body>
</html>