什么是CSS属性? 要如何设定?

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

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

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

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

  • CSS规则的组成部分
  • CSS属性基础知识
  • CSS属性的例子
  • 属性必须要有值

CSS规则的组成部分

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

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

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

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

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

因此,使用此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属性有很多种。下列为一些例子:

  • Border (包括border-style、border-color和border-width)
  • Padding (包括padding-top、padding-right、padding-bottom和padding-left)
  • Margins (包括margin-top、margin-right、margin-bottom和margin-left)
  • Font-family
  • Font-size
  • Background-color
  • Width
  • Height

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

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

  • Float
  • Clear
  • Overflow
  • Text-transform
  • Z-index

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

 

属性必须要有值

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

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

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

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

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

  • Border-color的值是颜色。
  • Border-size的值是尺寸,如像素(pixels)或百分比(percentages)。
  • Border styles此属性使用保留的样式之一,像是「solid」。

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

赞(0)
未经允许不得转载:时代数字趋势 » 什么是CSS属性? 要如何设定?
分享到: 更多 (0)