“CSS 语法”的版本间差异

本页内容
上一节: CSS_简介 下一节: CSS_Id_和_Class选择器
(创建页面,内容为“{{DISPLAYTITLE:CSS 语法}}3 = CSS 语法 = * 查看 实例 1 * 查看 实例 2 == CSS 实例 == CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性(property)是您希望设置的样式属性(style attribute)。每个属性有一…”)
 
Neo讨论 | 贡献
 
(未显示同一用户的7个中间版本)
第2行: 第2行:
= CSS 语法 =
= CSS 语法 =


* 查看 [[try.php?filename=ex1|实例 1]]
[[文件:Css-declaration-zh2.png]]
* 查看 [[try.php?filename=ex2|实例 2]]
 
=== 选择器(Selector) ===
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素(在这个例子中就是 p 元素)。要给不同元素添加样式只需要更改选择器就行了。
 
=== 声明(Declaration) ===
一个单独的规则,如 color: red; 用来指定添加样式元素的属性。
 
=== 属性(Properties) ===
改变 HTML 元素样式的途径。(本例中 color 就是 <nowiki><p></nowiki> 元素的属性。)CSS 中,由编写人员决定修改哪个属性以改变规则。
 
=== 属性的值(Property value) ===
 
在属性的右边,冒号后面即属性的值,它从指定属性的众多外观中选择一个值(我们除了 red 之外还有很多属性值可以用于 color )。
 
=== 注意其他重要的语法: ===
 
* 每个规则集(除了选择器的部分)都应该包含在成对的大括号里<nowiki>({})</nowiki>。
* 在每个声明里要用冒号(:)将属性与属性值分隔开。
* 在每个规则集里要用分号(;)将各个声明分隔开。
 


== CSS 实例 ==
== CSS 实例 ==
第20行: 第39行:


<pre>p {color:red;text-align:center;}</pre>
<pre>p {color:red;text-align:center;}</pre>
为了让CSS可读性更强,你可以每行只描述一个属性:
为了让CSS可读性更强,你可以每行只描述一个属性,只需要将它们用分号隔开,就像这样:
 


<sample title="" desc="" lang="html" hererun="1">
<sample title="" desc="" lang="html" hererun="1">
第48行: 第68行:
</body>
</body>
</html> </run>
</html> </run>
=== 多元素选择 ===
也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如:
<sample title=""  run="s">
p, span, h1 {
  color: red;
}
</sample>
<run name='s'>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小白教程(xiaobai.wang)</title>
<style>
p, span, h1 {
  color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这个段落采用CSS样式化。</p>
<span>多个元素都用同一个样式</span>
</body>
</html>
</run>


== CSS 注释 ==
== CSS 注释 ==

2022年8月20日 (六) 16:08的最新版本

CSS 语法

Css-declaration-zh2.png

选择器(Selector)

HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素(在这个例子中就是 p 元素)。要给不同元素添加样式只需要更改选择器就行了。

声明(Declaration)

一个单独的规则,如 color: red; 用来指定添加样式元素的属性。

属性(Properties)

改变 HTML 元素样式的途径。(本例中 color 就是 <p> 元素的属性。)CSS 中,由编写人员决定修改哪个属性以改变规则。

属性的值(Property value)

在属性的右边,冒号后面即属性的值,它从指定属性的众多外观中选择一个值(我们除了 red 之外还有很多属性值可以用于 color )。

注意其他重要的语法:

  • 每个规则集(除了选择器的部分)都应该包含在成对的大括号里({})。
  • 在每个声明里要用冒号(:)将属性与属性值分隔开。
  • 在每个规则集里要用分号(;)将各个声明分隔开。


CSS 实例

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

CSS 实例

CSS声明总是以分号 ; 结束,声明总以大括号 {} 括起来:

p {color:red;text-align:center;}

为了让CSS可读性更强,你可以每行只描述一个属性,只需要将它们用分号隔开,就像这样:


示例

p
{
    color:red;
    text-align:center;
}

多元素选择

也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如:


示例

p, span, h1 {
  color: red;
}

CSS 注释

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束, 实例如下:


示例

/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}
上一节: CSS_简介 下一节: CSS_Id_和_Class选择器
此页面最后编辑于2022年8月20日 (星期六) 16:08。