样式与长度颜色

Posted zhangpang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了样式与长度颜色相关的知识,希望对你有一定的参考价值。

样式与长度颜色

1、基本样式

<head>
   <style>
       div {
           width: 100px;
           height: 100px;
           background-color: red;
      }
   </style>
</head>

2、长度

  • px:像素(pixel),屏幕上显示的最小单位,用于网页设计,直观方便

  • mm:毫米

  • cm:厘米

  • in:英寸

  • pt:点(point),一个标准的长度单位,1pt=1/72in,用于印刷业,非常简单易用;

  • em:相当长度,通常1em=16px,应用于流式布局

3、颜色

  • rgb():三个值可为[0-255]数值或百分比,以,相隔(r:Red g:Green b:Blue)

  • rgba():前三个值可为像素或是百分比,最后一个为[0, 1]数值,以,相隔(r:Red g:Green b:Blue a:Alpha)

  • hsl():第一个值为[0,360]数值,后二个值可为百分比,以,相隔(h:Hue s:Saturation l:Lightness)

  • hsla():第一个值为[0,360]数值,中间二个值可为百分比,最后一个为[0, 1]数值,以,相隔(h:Hue s:Saturation l:Lightness a:Alpha)

  • #AABBCC:六个十六进制位,每两位一整体,分别代表Red、Green、Blue,可以简写#abc

==============================================================================================================================================================

笔记

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>长度及颜色单位</title>
  <style type="text/css">
  body {
  background-color: yellowgreen;
  }
  div {
  /*长度单位*/
  /*px in pt mm cm em rem vw vh*/
  width: 100px;
  /*width: 720pt; 10in*/
  /*width: 100mm; 10cm*/
  /*width: 10em; 通常160px 10rem*/
  /*width: 50vw; 50% view width*/
  height: 100px;
  /*颜色单位*/
  /*单词 rgb() rgba() #六个十六进制位 hsl()*/
  /*background-color: cyan;*/
  /*background-color: rgb(255, 0, 0);*/
  /*background-color: rgba(255, 0, 0, 0);*/
  /*满足AABBCC形式可以简写为abc*/
  background-color: #a0c
  }
  </style>
  </head>
<body>
  <div></div>
</body>
</html>








































以上是关于样式与长度颜色的主要内容,如果未能解决你的问题,请参考以下文章

长度与颜色单位

Typora设置自定义代码颜色

css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

python输出颜色与样式的方法

html和css制作一个搜索框,要内容与搜索图标结合,该怎么做?

css设置滚动条颜色与样式以及如何去掉与隐藏滚动条