CSS构建基础（一）CSS值和单位

**CSS中使用的每个属性都有一个值类型，定义该属性允许的值集。**查看MDN上的任何属性页将帮助您理解与值类型相关联的值，这些值类型对任何特定属性都有效。本节课我们将学习一些最常用的值类型，以及它们最常用的值和单位。

1、什么是CSS值?

在CSS规范和MDN上的属性页中，您将能够发现值类型，因为它们将被尖括号包围，例如或。当您看到值类型对特定属性有效时，这意味着您可以使用任何有效的颜色作为该属性的值，如参考页面中列出的那样。

注意:您还将看到CSS值类型(value types)被称为数据类型(data types)。这些术语基本上是可以互换的——当你在CSS中看到被称为数据类型的东西时，它实际上只是值类型的一种奇特的说法。术语“值(value)”指的是您选择使用的值类型所支持的任何特定表达式。

注意:是的，CSS值类型倾向于使用尖括号来表示，以区分它们与CSS属性(例如，color属性与数据类型)。您可能也会对CSS数据类型和HTML元素感到困惑，因为它们都使用尖括号，但这是不可能的——它们在非常不同的上下文中使用。

在下面的例子中，我们使用关键字设置标题的颜色，使用rgb()函数设置背景颜色:

h1 {
  color: black;
  background-color: rgb(197, 93, 161);
}
1
2
3
4

CSS中的值类型是一种定义允许值集合的方法。这意味着如果你看到是有效的，你不需要考虑可以使用哪种不同类型的颜色值——关键字、十六进制值、rgb()函数等等。您可以使用任何可用的值，前提是您的浏览器支持这些值。每个值的MDN页面将为您提供有关浏览器支持的信息。例如，如果您查看页面，您将看到浏览器兼容性部分列出了不同类型的颜色值以及对它们的支持。

让我们看一下您可能经常遇到的一些类型的值和单位，并提供示例，以便您可以尝试不同的可能值。

2、数字、长度和百分比

CSS中可能会用到各种数值类型。以下都被归类为数字:

长度

您最常遇到的数字类型是。例如，10px(像素)或30em。CSS中有两种类型的长度——相对长度和绝对长度。了解它们之间的区别是很重要的，这样才能理解事情会变得有多大。

绝对长度单位

以下都是绝对(absolute )长度单位-它们与其他任何东西都无关，并且通常被认为总是相同的大小。

大多数这些单元在用于打印而不是屏幕输出时更有用。例如，我们通常不会在屏幕上使用厘米(cm)。您通常使用的唯一值是px(像素)。

相对(Relative)长度单位

相对长度单位是相对于其他东西的，可能是父元素字体的大小，或者视口的大小。使用相对单位的好处是，通过一些仔细的规划，您可以使文本或其他元素的大小相对于页面上的其他所有内容进行缩放。下表列出了一些对web开发最有用的单元。

ems and rems

em和rem是你在调整从盒子到文本的大小时最可能遇到的两个相对长度。理解它们是如何工作的，以及它们之间的区别是值得的，特别是当您开始处理更复杂的主题(如样式文本或CSS布局)时。下面的示例提供了一个演示。

下面所示的HTML是一组嵌套列表——我们总共有两个列表，两个示例都有相同的HTML。唯一的区别是前者有一个类em，后者有一个类rem。

首先，我们将元素的字体大小设置为16px。

概括一下，em单位在排版的情况下意味着“父元素的字体大小”。

中带有ems类的
• 元素的大小取自它们的父元素。因此，每个连续的嵌套层会逐渐变大，因为每个嵌套层的字体大小都设置为1.3em - 1.3倍于其父层的字体大小。

  简而言之，rem单位表示“根元素的字体大小”(rem代表“root em”)。

  中带有rems类的
  • 元素的大小取自根元素()。这意味着每个连续的嵌套层不会继续变大。

    但是，如果您在CSS中更改元素的字体大小，您将看到其他所有内容都相对于它发生了变化——包括rem和em大小的文本。

    百分比

    在很多情况下，百分比与长度的处理方式相同。百分比的问题是，它们总是相对于其他值设置的。例如，如果将元素的font-size设置为百分比，则它将是该元素父元素font-size的百分比。如果对width 值使用百分比，则它将是父元素width的百分比。

    在下面的示例中，两个百分比大小的盒子和两个像素大小的盒子具有相同的类名。这两组分别是40%和200px宽。

    不同之处在于第二组两个盒子位于400像素宽的包装器内。第二个200px宽的盒子和第一个一样宽，但是第二个40%的盒子现在是400px的40%——比第一个窄很多!

    请注意，虽然许多值类型接受长度或百分比，但有些值类型只接受长度。您可以看到在MDN属性引用页面上接受哪些值。如果允许的值包含，则可以使用长度或百分比。如果允许的值只包括，则不可能使用百分比。

    数字

    有些值类型接受数字，而不添加任何单位。一个接受无单位数字的属性的例子是透明度opacity属性，它控制元素的不透明度(它的透明度)。该属性接受一个介于0(完全透明)和1(完全不透明)之间的数字。

    注意:当你在CSS中使用数字作为值时，它不应该被引号包围。

    3、颜色

    在CSS中有许多指定颜色的方法，其中一些是最近才实现的。相同的颜色值可以在CSS中的任何地方使用，无论您是指定文本颜色、背景颜色还是其他任何颜色。

    现代计算机中可用的标准颜色系统支持24位颜色，它允许通过不同的红、绿、蓝通道的组合显示大约1670万种不同的颜色，每个通道有256个不同的值(256 x 256 x 256 = 16,777,216)。让我们看一下在CSS中指定颜色的一些方法。

    注意:在本教程中，我们将查看具有良好浏览器支持的指定颜色的常用方法;还有其他方法，但它们没有那么好的支持，也不太常见。

    颜色关键字

    在这里的学习部分或MDN的其他地方，你会经常看到使用颜色关键字的例子，因为它们是一种简单易懂的指定颜色的方式。有很多这样的关键字，其中一些有相当有趣的名字!您可以在页面上看到值类型的完整列表。

    十六进制RGB值

    您可能遇到的下一种颜色值类型是十六进制代码。每个十六进制值由一个散列/磅符号(#)后跟六个十六进制数组成，每个十六进制数可以取0到f(表示15)之间16个值中的一个-因此0123456789abcdef。每一对值代表一个通道——红、绿和蓝——并允许我们为每个通道指定256个可用值中的任何一个(16 x 16 = 256)。

    这些值有点复杂，不太容易理解，但它们比关键字更通用——你可以使用十六进制值来表示你想在配色方案中使用的任何颜色。

    RGB和RGBA值

    我们要讨论的第三种方案是RGB。RGB值是一个函数——rgb()——它有三个参数，分别表示颜色的红、绿、蓝通道值，与十六进制值的方式大致相同。与RGB的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由0到255之间的十进制数表示的——这更容易理解。

    您可以将第四个参数传递给rgb()，它表示颜色的alpha通道，控制不透明度。如果您将此值设置为0，它将使颜色完全透明，而1将使其完全不透明。两者之间的值提供了不同程度的透明度。

    注意:在颜色上设置alpha通道与使用我们之前看到的opacity属性有一个关键的区别。当你使用opacity时，你使元素和它里面的所有东西都不透明，而使用带有alpha参数颜色的RGB只会使你指定的颜色不透明。

    在下面的例子中，我们已经添加了一个背景图像到我们的彩色框的包含块。然后我们将这些框设置为不同的不透明度值——注意当alpha通道值更小时，背景显示得更多。

    HSL and HSLA values

    另一种指定颜色的方法是HSL颜色模型。hsl()函数接受色调、饱和度和亮度值，而不是红、绿和蓝值，这些值用于区分1670万种颜色，但方式不同:

    • 色调(Hue):颜色的底色。这个值在0到360之间，表示色轮周围的角度。

    • **饱和度(Saturation)😗*颜色的饱和度有多高?这个值从0 - 100%，其中0是没有颜色(它将显示为灰色阴影)，100%是全彩色饱和度

    • 亮度(Lightness):颜色有多浅或多亮?这需要一个0 - 100%的值，其中0是没有光(它将显示完全黑色)，100%是全光(它将显示完全白色)。

    就像rgb()一样，你可以向hsl()传递一个alpha参数来指定不透明度。

    注意:在旧版本的CSS中，hsl()语法不支持alpha参数—您需要使用名为hsla()的不同函数。现在，您可以向hsl()传递alpha参数，但为了与旧网站向后兼容，仍然支持hsla()语法，并且具有与hsl()完全相同的行为。

    您可以在项目中使用这些颜色值中的任何一个。对于大多数项目，您可能会决定一个调色板，然后在整个项目中使用这些颜色-以及您选择的指定颜色的方法。你可以混合和匹配颜色模型，但是为了一致性，如果你的整个项目使用相同的颜色模型通常是最好的!

    4、图像

    值类型在图像为有效值的地方使用。这可以是通过url()函数指向的实际图像文件，也可以是渐变(linear-gradient())。

    在下面的示例中，我们演示了使用图像和渐变作为CSS background-image属性的值。

    注意:还有其他一些可能的值，但是这些值较新，目前浏览器支持较差。如果您想了解它们，请查看MDN上的数据类型页面。

    5、位置

    值类型表示一组2D坐标，用于定位诸如背景图像之类的项(通过background-position)。它可以使用诸如top、left、bottom、right和center等关键字来将项与2D框的特定边界对齐，以及长度(表示与框的顶部和左侧边缘的偏移量)。

    典型的位置值由两个值组成——第一个值水平设置位置，第二个值垂直设置位置。如果您只指定一个轴的值，则另一个轴将默认为居中(center)。

    6、字符串和标识符

    在上面的示例中，我们已经看到了将关键字用作值的地方(例如关键字，如red、black、rebeccapurple和goldenrod)。这些关键字更准确地描述为标识符(identifiers)，是CSS能够理解的特殊值。因此，它们没有用引号-它们不被视为字符串。

    CSS中有些地方需要使用字符串。例如，在指定生成的内容时。在本例中，该值被加引号以表明它是一个字符串。在下面的示例中，我们使用未加引号的颜色关键字以及加引号的生成内容字符串。

    7、函数

    我们要看的最后一种类型的值是一组被称为函数的值。在编程中，函数是一段可重用的代码，它可以多次运行，以最少的工作量完成开发人员和计算机的重复任务。函数通常与JavaScript、Python或c++等语言相关，但它们也以属性值的形式存在于CSS中。我们已经在颜色部分看到了函数的作用——rgb()、hsl()等。用于从文件返回图像的值url()也是一个函数。

    calc() CSS函数的行为更像是在传统编程语言中找到的值。这个函数使您能够在CSS中进行简单的计算。如果您想在为项目编写CSS时计算出无法定义的值，并且需要浏览器在运行时为您计算，那么它特别有用。

    例如，下面我们使用calc()使框的宽度为20% + 100px。20%是从父容器.wrapper的宽度计算出来的，因此，如果宽度发生变化，则会发生变化。我们不能事先做这个计算，因为我们不知道父元素的20%是多少，所以我们使用calc()告诉浏览器为我们做这个计算。

    .wrapper {
      width: 400px;
    }
    
    .box {
      width: calc(20% + 100px);
    }
    1
    2
    3
    4
    5
    6
    7