Responsive Web Design-CSS
上一篇我简单说了下最基础的响应式设计, 这里我来说说关于CSS的一些知识.
加载CSS需要在<head>标签里添加<link>标签,具体这个就不说了. 加载的方式有两种. 一般我们是这样写
<head> <link rel="stylesheet" href="styles/mystyle.css"> </head>
其实在HTML5里面还可以这样写
<head> <style> @import url(styles/mystyle.css) </style> </head>
估计现在这么做的人不多吧
在说下 !important这个东西, 在很多框架中我们可以看到有些属性被标记上了!important.这个是什么意思呢?
p { font-weight: bold; color: blue !important; }
比如上面的例子, color属性被标记成!important. 这个意思是所有在<p>标签里面的文字颜色都是蓝色. 这个属性会覆盖所有在这个标签内的其他文字颜色属性.
#example{color: blue}
<p id="example">text here</p>
指定id为example的标签文字颜色为蓝色
.example{color:red}
<p class="example">text</p>
制定class为example的标签字体为红色
CSS还可以嵌套,比如
.example {
color: blue;
p {
padding: 5px;
}
}
<div class="example">
<p>some text</p>
</div>
意思是在这个div使用example样式, 在这个example样式内所有的p内边距都为5px.
接下来要谈谈盒子模型了,这个在这里我就不细说了,介绍大家一个很好的网站去学习CSS布局,笔者就是用这个网站学的
http://zh.learnlayout.com/
底下谈谈如何组织你的CSS代码吧. 我比较推荐下面这两种
/* Main Content ----------------------------- */ styles for typography, layout, etc. in main content /* Header ----------------------------- */ styles for typography, layout, etc. in header /* Footer ----------------------------- */ styles for typography, layout, etc. in footer
或者
/* Typography ----------------------------- */
p { ... }
header p { ... }
footer p { ... }
.classname p { ... }
li { ... }
footer li { ... }
.classname li { ... }
/* Layout ----------------------------- */
header { ... }
footer { .... }
结构比较清楚
接下来一篇文章会讲讲media query这个在响应式设计中比较重要