June 2, 2007
CSS扫盲(二): Syntax
距CSS扫盲(一): Padding半个月后, CSS扫盲(二): Syntax跟大家见面了.
这次的扫盲课程更加基础, 主要内容是CSS的语法构成. 废话不说, 马上开始吧!
一. 简单语法
CSS的语句由三部分构成: Selector, Property, Value. 为避免人为翻译不当, 我就按原文写出了. 大致可以理解为选择器, 属性, 值.
此处的selector一般是HTML的标签, 属性与值之间用冒号隔开, 整体被大括弧括起来.
要注意的是, 如果值是由几个单词组成的, 一定要用引号. 举个例子就明白了.
另外, 如果想在一个selector内定义多个属性, 可以用分号分隔开. 例, 以下这段代码的作用是将段落居中排列, 字体颜色为红色.
为了方便阅读和修改, 一般分行书写为:
text-align: center;
color: red;
}
二. selector组合
可以将多个selector进行组合书写, 这样各selector都拥有相同的属性和对应的值. 多个selector之间用逗号分隔开.
{
color: green;
}
如果这里的代码你暂时不明白是什么作用, 不要紧, 以后会详细讲的, 这里我们只学习语法. 
三. 类selector
类selector的使用实现了对同一个类型的要素进行不同风格的定义. 比方说你希望网页上两个段落的文字其中一段居中排列, 而另一段靠左排列, 该怎么写呢? 看下面的.
p.center {text-align: center}
然后在HTML文档中这样使用它们:
此段靠右
</p>
<p class="center">
此段居中
</p>
如果这样还不满意, 想对同一个要素使用多个类:
此段居中且为粗体
</p>
事实是这样的, 你在网页设计时一定会遇到不仅仅要求某个段落居中排列这样的问题, 其他要素也需要居中, 是不是还得重复写呢? 不用的, 只要把标签名去掉就行啦, 下面这段样式可以允许整个HTML文档中所有使用class="center"的要素都居中排列.
在HTML文档中写入下面的代码就实现了h1和p要素都居中排列的功能.
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
需要注意的是: 类的名称不允许以数字开头.
四. id selector
HTML文档中的要素也可以使用id selector来定义, CSS文档中书写的时候id selector以#开头.
下面这段代码的作用是定义id为para1的段落居中排列且颜色为红色.
{
text-align: center;
color: red
}
同样, 需要注意的是: id的名称不允许以数字开头.
五. CSS注释
在CSS中注释比较方便, 以/*开头, 以*/结尾就可以啦.
好了, CSS的语句结构就是这些.
5åªå°é¸ at 11:57 Jun 02, 2007 ₪
:em01: 我这种盲的程度估计是扫不掉了，呵呵。
cosbeta at 12:15 Jun 02, 2007 ₪
你删除缓存，禁用插件看看，插件不会存在乱码的问题，因为他不兑你留言作处理
北极冰仔 at 12:43 Jun 02, 2007 ₪
我已经升级到1.01了, 不过你看上面小鸟姐的留言, 名字是乱码吧.
cosbeta at 13:28 Jun 02, 2007 ₪
js的unescape和wordpress在php端的编码不对称，还真不好解决呢
北极冰仔 at 13:36 Jun 02, 2007 ₪
:em10: 发现问题就好解决了, 期待完美版.
che at 13:59 Jun 02, 2007 ₪
:em18: 我也扫不了盲的
北极冰仔 at 14:02 Jun 02, 2007 ₪
:em18: 看来我写得还是不够通俗易懂…
che at 17:08 Jun 02, 2007 ₪
:em19: 是偶太笨了。。。
北极冰仔 at 17:11 Jun 02, 2007 ₪
哪有笨不笨的说法, 你今天写的那篇< 为了找到好工作现在要作的20件事>里面不是有句话么: 不要”给自己下定义, 不擅长这个, 不擅长那个, 作茧自缚”. :em17: 加油.
lighting at 12:01 Jul 20, 2007 ₪
受益匪浅
许彬 at 08:40 Aug 04, 2008 ₪
很好懂；貌似不是很全面；