什么是CSS属性? 要如何设定?-时代数字趋势

By 时代数字趋势2021-07-01

网站的视觉样式与版面是由阶层样式表(Cascading Style Sheets，缩写CSS)所规定。

这些文件塑造网页的HTML标记语言，为网页浏览器提供指示，关于如何呈现该标记语言所产生的网页。CSS规範网页的版面以及颜色、背景影像、排版等等多种设定。

如果你查看一个CSS文件，你会发现这些文件拥有自己的特定语法，就如同任何标记或程序语言。每个样式表格都是由各种CSS属性规则所组成。若完整地来看这些规则，它们就是网站的样式。

CSS规则的组成部分

CSS规则由两大部分组成：选择器(selector)和宣告(declaration)。选择器决定样式要套用到网页上的哪些部分，而宣告则是决定如何呈现样式。例如：p {
color: #000;
}

这是CSS规则。选择器的部分是”p”，它是「段落」的选择器元素。因此，它将选择网站中的所有段落，并提供它们此样式(除非你在CSS文件中特别针对指定段落更具体的样式)。

规则部分显示「color: #000」，也就是所谓的宣告。该宣告是由两部分组成：属性和值。

属性是此宣告的颜色部分。它决定哪方面的选择器将会有视觉上的变更。

值是已选择的CSS属性将会被改变的结果。以我们的案例而言，我们使用的#000是十六进位值，是CSS「黑色」的简写。

因此，使用此CSS规则，我们的页面将会显示黑色字体的段落。

当你在写CSS属性时，你不能简单地以你认为适合的方式来编写。例如，「color」是实际的CSS属性，所以你可以使用它。此属性是定义文字颜色的元素。

如果你尝试使用「text-color」或「font-color」作为CSS属性，这些都会失败，因为它们并非CSS语言实际的组成部分。

另一个例子是「background-image」属性。此属性是用来设定一个可用于背景的图像，如下：.logo {
background-image: url("/images/company-logo.png");
}

如果你尝试使用「background-picture」或「background-graphic」作为属性，它们都会失败，因为这些同样不是实际的CSS属性。

你可以用于网页样式的CSS属性有很多种。下列为一些例子：

这些CSS属性都是很常见的例子，因为它们都非常容易理解，即使你不懂CSS，你大概也可以根据它们的名称猜到它们的作用。

下列是你也会遇到的其他常用CSS属性，可能比较难根据它们的名称就理解它们的作用：

随着你更深入了解网页设计，你将会遇到(和使用)所有这些属性，甚至更多！

你每次使用属性时，你都必须给一个值，且特定属性只能接受特定的值。

在我们第一个「color」属性的例子中，我们须要使用颜色作为值。这有可能是十六进位的值、RGB值，甚至是颜色关键字。

这些值的任何一个都能使用，然而，如果你在此属性中使用「gloomy」，它将不会进行任何动作，因为儘管它是个描述性的词，但它并非CSS公认的值。

我们第二个例子「background-image」需要一个影像路径，以从你的网站文件中抓取实际的影像。这就是该属性所需要的语法。

所有CSS属性都有各自对应的值。例如：

如果你看过了CSS属性列表，你将会发现每个属性都有特定的值，它们会使用值来建立它们所要的样式。