CSS学习笔记-(三)

• 长度单位
• 颜色单位

长度单位

• 像素

  屏幕(显示器)实际上是由一个一个的小点点构成的，不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，所以同样的200px在不同的设备下显示效果不一样

  <div class="box1">
      <div class="box2">
      </div>
  <div>
  .box1{
      width:200px;
      height:200px;
      background-color:orange;
  }

• 百分比

  百分比可以将属性值设置为相对于其父元素属性的百分比，设置百分比可以便于子元素跟随父元素的改变而改变

  .box2{
      width:50%;
      height:50%;
      background-color:red;
  }

  以上代码在网页中的呈现结果为：

• em

  em是相对于元素的字体大小来计算的 1em = 1font-size em会根据字体大小的改变来改变

  .box3{
      font-size:20px;
      <!-- 相当于width=200px，height=200px -->
      width:10em;
      height:10em;
      background-color:blue;
  }

  以上代码在网页中的呈现结果为：

• rem

  rem是相对于根元素html的字体大小来计算，只有当html的字体大小改变时才会影响rem的大小

颜色单位

在CSS中可以直接使用颜色的名字来设置各种颜色
比如：red，orange，yellow，blue，green……
但是在CSS中直接使用颜色名是非常不方便的。

• RGB值

  通过三种颜色的不同浓度来调配出不同的颜色 R:red G:green B:blue 每一种颜色的范围在0~255(0%~100%)之间 语法：RGB(红色，绿色，蓝色)

  background-color:rgb(0,0,0);黑色
  background-color:rgb(255,255,255);白色色

• RGBA值

  在RGB的基础上增加了A表示不透明，需要四个值，前三个和RGB一样，第四个表示不透明度。 1表示完全不透明 0表示完全透明 .5表示半透明

• 十六进制的RGB值

  语法：#红色绿色蓝色 颜色浓度通过00-ff，如果颜色两位两位重复可以进行简写，比如：#aabbcc --> #abc，如果是#aabbcd则不能简写

  background-color:#ff0000;红色
  --> #f00

• HSL值和HSLA值

  H 色相(0 ~ 360) S 饱和度，颜色浓度(0% ~ 100%) L 亮度，颜色的亮度(0% ~ 100%)

赏

这多不好意思呀