css教程:CSS語(yǔ)法(CSSSyntax)_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
CSS Syntax:
CSS語(yǔ)法
The CSS syntax is made up of three parts: a selector, a property and a value:
CSS的語(yǔ)法由三部分組成: 一個(gè)選擇器,一個(gè)屬性和一個(gè)值:
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元素/標(biāo)簽,改變屬性,每個(gè)屬性可以有一個(gè)值,屬性和值由冒號(hào)區(qū)分開外面用大括號(hào)括起來:
Note: If the value is multiple words, put quotes around the value:
注重:假如值為多個(gè)單詞則用雙引號(hào)括起來:
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:
注重:假如你想指定多個(gè)屬性,你就必須將每個(gè)屬性用分號(hào)隔開,下面的例子就演示了怎樣定義居中紅色文字段落:
To make the style definitions more readable, you can describe one property on each line, like this:
為了讓樣式定義更有可讀性,你可以像這樣分行描述屬性:
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:
你可以將選擇器組合。用逗號(hào)分隔每個(gè)選擇器。下的例子將所有的標(biāo)題元素組合起來,它們的顏色都變?yōu)榫G色:
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:
比如你想在你的文檔中有兩種不同樣式的段落:一種是右對(duì)齊,另外是居中的。這就告訴你該怎么用樣式來做到這點(diǎn):
You have to use the class attribute in your HTML document:
你必須在你的HTML文檔中使用類屬性(才能顯示出效果):
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:
你也可以省略標(biāo)簽名稱直接去定義,這樣就可以在所有的HTML元素中使用了。下面的例子就能讓所有HTML中所有帶class="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"。這就意味著這兩個(gè)元素都將遵循選擇器"center"的規(guī)則:
Do NOT start a class name with a number! It will not work in Mozilla/Firefox.
請(qǐng)不要用以數(shù)字開頭為名稱的類,在Mozilla/Firefox中不能正常運(yùn)作。
The id Selector
id 選擇器
You can also define styles for HTML elements with the id selector. The id selector is defined as a #.
你可以使用id選擇器來定義HTML元素的樣式。id選擇器可用#來定義。
The style rule below will match the element that has an id attribute with a value of "green":
下面的樣式規(guī)則對(duì)任何一個(gè)帶有id屬性值為"green"的元素都是匹配的
The style rule below will match the p element that has an id with a value of "para1":
下面的樣式規(guī)則將匹配帶有id屬性值為"para1"的p元素
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
和CLASS一樣ID的名稱的開頭也不要使用數(shù)字,不然就無法在Mozilla/Firefox中正常運(yùn)作了
CSS Comments
CSS 注釋
Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:
注釋可用來解釋你的代碼,起碼在以后你需要重新編輯這塊代碼的時(shí)候這些注釋會(huì)給你些幫助。瀏覽器會(huì)忽略這些注釋。CSS注釋的開頭為"/*",結(jié)束符號(hào)為"*/",就像這樣:
CSS語(yǔ)法
The CSS syntax is made up of three parts: a selector, a property and a value:
CSS的語(yǔ)法由三部分組成: 一個(gè)選擇器,一個(gè)屬性和一個(gè)值:
示例代碼 [www.hl5o.cn]
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元素/標(biāo)簽,改變屬性,每個(gè)屬性可以有一個(gè)值,屬性和值由冒號(hào)區(qū)分開外面用大括號(hào)括起來:
示例代碼 [www.hl5o.cn]
body {color: black}
Note: If the value is multiple words, put quotes around the value:
注重:假如值為多個(gè)單詞則用雙引號(hào)括起來:
示例代碼 [www.hl5o.cn]
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:
注重:假如你想指定多個(gè)屬性,你就必須將每個(gè)屬性用分號(hào)隔開,下面的例子就演示了怎樣定義居中紅色文字段落:
示例代碼 [www.hl5o.cn]
p {text-align:center;color:red}
To make the style definitions more readable, you can describe one property on each line, like this:
為了讓樣式定義更有可讀性,你可以像這樣分行描述屬性:
示例代碼 [www.hl5o.cn]
p
{
text-align: center;
color: black;
font-family: aria
l}
{
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:
你可以將選擇器組合。用逗號(hào)分隔每個(gè)選擇器。下的例子將所有的標(biāo)題元素組合起來,它們的顏色都變?yōu)榫G色:
示例代碼 [www.hl5o.cn]
h1,h2,h3,h4,h5,h6
{
color: green
}
{
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:
比如你想在你的文檔中有兩種不同樣式的段落:一種是右對(duì)齊,另外是居中的。這就告訴你該怎么用樣式來做到這點(diǎn):
示例代碼 [www.hl5o.cn]
p.right {text-align: right}
p.center {text-align: center}
p.center {text-align: center}
You have to use the class attribute in your HTML document:
你必須在你的HTML文檔中使用類屬性(才能顯示出效果):
示例代碼 [www.hl5o.cn]
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
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:
你也可以省略標(biāo)簽名稱直接去定義,這樣就可以在所有的HTML元素中使用了。下面的例子就能讓所有HTML中所有帶class="center"的元素居中文字:
示例代碼 [www.hl5o.cn]
.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"。這就意味著這兩個(gè)元素都將遵循選擇器"center"的規(guī)則:
示例代碼 [www.hl5o.cn]
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
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.
請(qǐng)不要用以數(shù)字開頭為名稱的類,在Mozilla/Firefox中不能正常運(yùn)作。
The id Selector
id 選擇器
You can also define styles for HTML elements with the id selector. The id selector is defined as a #.
你可以使用id選擇器來定義HTML元素的樣式。id選擇器可用#來定義。
The style rule below will match the element that has an id attribute with a value of "green":
下面的樣式規(guī)則對(duì)任何一個(gè)帶有id屬性值為"green"的元素都是匹配的
示例代碼 [www.hl5o.cn]
#green {color: green}
The style rule below will match the p element that has an id with a value of "para1":
下面的樣式規(guī)則將匹配帶有id屬性值為"para1"的p元素
示例代碼 [www.hl5o.cn]
p#para1
{
text-align: center;
color: red
}
{
text-align: center;
color: red
}
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
和CLASS一樣ID的名稱的開頭也不要使用數(shù)字,不然就無法在Mozilla/Firefox中正常運(yùn)作了
CSS Comments
CSS 注釋
Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:
注釋可用來解釋你的代碼,起碼在以后你需要重新編輯這塊代碼的時(shí)候這些注釋會(huì)給你些幫助。瀏覽器會(huì)忽略這些注釋。CSS注釋的開頭為"/*",結(jié)束符號(hào)為"*/",就像這樣:
示例代碼 [www.hl5o.cn]
/* 這就是一句注釋 */
p{
text-align: center;
/* 這是另一條注釋 */
color: black;
font-family: arial
}
p{
text-align: center;
/* 這是另一條注釋 */
color: black;
font-family: arial
}
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
猜你也喜歡看這些
- XHTML入門學(xué)習(xí)教程:XHTML標(biāo)簽
- HTML為中心的前端開發(fā)-HTMLiscenter
- HTML表格標(biāo)記教程(13):內(nèi)部邊框樣式屬性RULES
- HTML教程:收集的常用的HTML標(biāo)簽(4)
- HTML表格標(biāo)記教程(36):表頭的背景色屬性BGCOLOR
- XHTML入門學(xué)習(xí)教程:XHTML超級(jí)鏈接
- HTML表格標(biāo)記教程(17):表格標(biāo)題垂直對(duì)齊屬性VALIGN
- XHTML具有語(yǔ)義的標(biāo)簽:有關(guān)H1位置的討論
- 不符合web標(biāo)準(zhǔn)的target=
- HTML中級(jí)教程元標(biāo)簽
- 相關(guān)鏈接:
- 教程說明:
CSS教程-css教程:CSS語(yǔ)法(CSSSyntax)
。