在CSS中指定颜色的最佳方法是什么？

Question

在CSS中，我看到不同的开发人员使用各种方法来指定颜色，例如我有像DIV这样的

  <div class="container"> </div>

CSS

  .container
  {
   background-color:#FFFFFF;
  }

或

  .container
  {
   background-color:#ffffff;
  }

或

  .container
  {
   background-color:#FFF;
  }

或

  .container
  {
   background-color:#fff;
  }

或

  .container
  {
   background-color:white;
  }

我想知道在CSS中使用颜色的最佳方法是什么。提前致谢

Answer 1

我总是使用完整的十六进制代码，例如：＃3c3c3c，＃212121等使用正确的十六进制代码是一个很好的做法。 如果您更好地了解颜色并且不需要十六进制代码，也可以使用颜色名称。工作轻松。

使用：

.container{
     background-color: #ffffff ; /* or */
     background-color: white;
}

RGB abd RGBA也可以使用，但大多数设计师更喜欢HEX短而易于提醒。 我使用RGBA作为透明色。

Answer 2

正如其他人在我之前所说的那样，没有任何方法可以以任何方式使用＃34;官方＆＃34;或者＆＃34;最好的。

我自己使用以下内容：

.container
{
   background-color: rgba(255,255,255,0.8);
}

这样做的原因是为了使用红绿蓝（RGB）图案修改颜色，尽可能采用最清晰的方式（对我而言）。

在蛋糕的顶部有 Alpha - 设置，您可以在其中更改元素的不透明度，而不会影响div / other元素内的所有内容的opacity: 0.8;设置

如果不需要alpha图层，您可以随时将其缩短为rgb(255,255,255);。

Answer 3

如果可用，请使用三个字符的简写十六进制颜色值，并始终在任何十六进制颜色值中使用小写字符。

.container
{
  background-color: #fff;
}

不是，在使用值之前使用单个space也是一种很好的做法。

Answer 4

使用颜色的十六进制值总是更好的值。因为它定义了浏览器和设备的一致性，而定义颜色名称可能会导致一些差异。

.container{
     background-color:#ffffff;
 }

同样最好以小写字母定义十六进制值，这也是由于跨渲染平台的实现。

.container{
     background-color:#ffffff;
 }

对于短格式和长格式之间的选择，它几乎不重要，因为它们都指的是相同的值。