博客首页 » 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设计
这篇文章对你有帮助吗,投个票吧?
留下你的评论