CSS扫盲(二): Syntax
这次的扫盲课程更加基础, 主要内容是CSS的语法构成. 废话不说, 马上开始吧!
一. 简单语法
CSS的语句由三部分构成: Selector, Property, Value. 为避免人为翻译不当, 我就按原文写出了. 大致可以理解为选择器, 属性, 值.
此处的selector一般是HTML的标签, 属性与值之间用冒号隔开, 整体被大括弧括起来.
要注意的是, 如果值是由几个单词组成的, 一定要用引号. 举个例子就明白了.
另外, 如果想在一个selector内定义多个属性, 可以用分号分隔开. 例, 以下这段代码的作用是将段落居中排列, 字体颜色为红色.
为了方便阅读和修改, 一般分行书写为:
二. selector组合
可以将多个selector进行组合书写, 这样各selector都拥有相同的属性和对应的值. 多个selector之间用逗号分隔开.
如果这里的代码你暂时不明白是什么作用, 不要紧, 以后会详细讲的, 这里我们只学习语法.
三. 类selector
类selector的使用实现了对同一个类型的要素进行不同风格的定义. 比方说你希望网页上两个段落的文字其中一段居中排列, 而另一段靠左排列, 该怎么写呢? 看下面的.
然后在HTML文档中这样使用它们:
如果这样还不满意, 想对同一个要素使用多个类:
事实是这样的, 你在网页设计时一定会遇到不仅仅要求某个段落居中排列这样的问题, 其他要素也需要居中, 是不是还得重复写呢? 不用的, 只要把标签名去掉就行啦, 下面这段样式可以允许整个HTML文档中所有使用class=”center”的要素都居中排列.
在HTML文档中写入下面的代码就实现了h1和p要素都居中排列的功能.
需要注意的是: 类的名称不允许以数字开头.
四. id selector
HTML文档中的要素也可以使用id selector来定义, CSS文档中书写的时候id selector以#开头.
下面这段代码的作用是定义id为para1的段落居中排列且颜色为红色.
同样, 需要注意的是: id的名称不允许以数字开头.
五. CSS注释
在CSS中注释比较方便, 以/*开头, 以*/结尾就可以啦.
好了, CSS的语句结构就是这些.
一. 简单语法
CSS的语句由三部分构成: Selector, Property, Value. 为避免人为翻译不当, 我就按原文写出了. 大致可以理解为选择器, 属性, 值.
程序代码1
selector {property: value}此处的selector一般是HTML的标签, 属性与值之间用冒号隔开, 整体被大括弧括起来.
要注意的是, 如果值是由几个单词组成的, 一定要用引号. 举个例子就明白了.
程序代码2
p {font-family: "sans serif"}另外, 如果想在一个selector内定义多个属性, 可以用分号分隔开. 例, 以下这段代码的作用是将段落居中排列, 字体颜色为红色.
程序代码3
p {text-align:center;color:red}为了方便阅读和修改, 一般分行书写为:
程序代码4
p {
text-align: center;
color: red;
}二. selector组合
可以将多个selector进行组合书写, 这样各selector都拥有相同的属性和对应的值. 多个selector之间用逗号分隔开.
程序代码5
h1, h2, h3, h4, h5, h6
{
color: green
}如果这里的代码你暂时不明白是什么作用, 不要紧, 以后会详细讲的, 这里我们只学习语法.
三. 类selector
类selector的使用实现了对同一个类型的要素进行不同风格的定义. 比方说你希望网页上两个段落的文字其中一段居中排列, 而另一段靠左排列, 该怎么写呢? 看下面的.
程序代码6
p.right {text-align: right}
p.center {text-align: center}然后在HTML文档中这样使用它们:
程序代码7
<p class="right"> 此段靠右 </p> <p class="center"> 此段居中 </p>
如果这样还不满意, 想对同一个要素使用多个类:
程序代码8
<p class="center bold"> 此段居中且为粗体 </p>
事实是这样的, 你在网页设计时一定会遇到不仅仅要求某个段落居中排列这样的问题, 其他要素也需要居中, 是不是还得重复写呢? 不用的, 只要把标签名去掉就行啦, 下面这段样式可以允许整个HTML文档中所有使用class=”center”的要素都居中排列.
程序代码9
.center {text-align: center}在HTML文档中写入下面的代码就实现了h1和p要素都居中排列的功能.
程序代码10
<h1 class="center"> 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以#开头.
程序代码11
#green {color: green}下面这段代码的作用是定义id为para1的段落居中排列且颜色为红色.
程序代码12
p#para1
{
text-align: center;
color: red
}同样, 需要注意的是: id的名称不允许以数字开头.
五. CSS注释
在CSS中注释比较方便, 以/*开头, 以*/结尾就可以啦.
好了, CSS的语句结构就是这些.
热门文章