当前位置导航:炫浪网>>网络学院>>网页制作>>HTML与CSS教程

css教程:CSS语法(CSS Syntax)

CSS Syntax:
CSS语法
The CSS syntax is made up of three parts: a selector, a property and a value:
CSS的语法由三部分组成: 一个选择器,一个属性和一个值:

 Example Source Code
selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:
选择器是你希望去定义的HTML元素/标签,改变属性,每个属性可以有一个值,属性和值由冒号区分开外面用大括号括起来:

 Example Source Code
body {color: black}

Note: If  the value is multiple words, put quotes around the value:
注意:如果值为多个单词则用双引号括起来:

 Example Source Code
p {font-family: "sans serif"}

Note: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:
注意:如果你想指定多个属性,你就必须将每个属性用分号隔开,下面的例子就演示了怎样定义居中红色文字段落:

 Example Source Code
p {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:
为了让样式定义更有可读性,你可以像这样分行描述属性:

 Example Source Code
p
{
text-align: center;
color: black;
font-family: aria
l}

Grouping
组合

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:
你可以将选择器组合。用逗号分隔每个选择器。下的例子将所有的标题元素组合起来,它们的颜色都变为绿色:

 Example Source Code
h1,h2,h3,h4,h5,h6
 {
color: green
}

The class Selector
类选择器

With the class selector you can define different styles for the same type of HTML element.
用选择器类你可以将同一类型的HTML元素定义出不同的样式。

Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
比如你想在你的文档中有两种不同样式的段落:一种是右对齐,另外是居中的。这就告诉你该怎么用样式来做到这点:

 Example Source Code
p.right {text-align: right}
p.center {text-align: center}

You have to use the class attribute in your HTML document:
你必须在你的HTML文档中使用类属性(才能显示出效果):

 Example Source Code
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:
你也可以省略标签名称直接去定义,这样就可以在所有的HTML元素中使用了。下面的例子就能让所有HTML中所有带class="center"的元素居中文字:

 Example Source Code
.center {text-align: center}

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:
下面的代码中H1和P元素都有class="center"。这就意味着这两个元素都将遵循选择器"center"的规则:

 Example Source Code
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

Do NOT start a class name with a number! It will not work in Mozilla/Firefox.
请不要用以数字开头为名称的类,在Mozilla/Firefox中不能正常运作。

[1] [2] 下一页  

相关内容
赞助商链接