[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>

打开效果完全一样。

<style>标签是CSS的定义标签,在这里我们定义了.my-bg这个CSS的类,然后在具体的html标签中,用class=来指定它的CSS类,这样不但可以简化书写,也可以将繁琐的CSS提出到一个单独的style定义中。


本页面的文字允许在知识共享 署名-相同方式共享 3.0协议和GNU自由文档许可证下修改和再使用,仅有一个特殊要求,请用链接方式注明文章引用出处及作者。请协助维护作者合法权益。


系列文章

文章列表

  • Web 从零开始 - CSS设计

这篇文章对你有帮助吗,投个票吧?

rating: 0+x

留下你的评论

Add a New Comment