【HTML5学习笔记】18：CSS颜色和度量单位

来源：互联网发布：织梦cms和wordpress 编辑：程序博客网时间：2024/06/05 00:46

本节学习CSS颜色和度量单位等问题，包括颜色选取方式，相对长度和绝对长度等。

颜色的表示方式有三种：颜色名称/16进制代码/10进制代码。
①颜色名称表示法，可以查询HTML颜色表。
②16进制代码表示，即#后跟6位16进制数。
③10进制代码表示常用有两种，即如rgb(0,128,128)和rgba(0,128,128,0.5)，这里a表示透明度，在0~1之间。另外hsl(120,100%,30%)分别用色相、饱和度和透明度来表示颜色，且有hsla(h,s,l,a)也是加了一个0~1之间的透明度。
如果想要对颜色进行微调，可以用photoshop等软件的拾色器中的web颜色(放在网页上没有误差)去看颜色的值。

CSS中的长度很重要，如边框的长度，高度等都需要有一个衡量单位。度量单位分为两种：绝对长度单位和相对长度单位。
绝对长度是现实世界的度量单位，如in英寸，cm厘米，mm毫米，pt磅，pc pica等。
相对长度是依托其他类型的单位，如em与字号挂钩，ex与字体的x高度挂钩，rem与根元素的字号挂钩，px像素与分辨率挂钩，%相对另一值的百分比。

*测试代码

<!DOCTYPE html><html lang="zh-cn"><head>    <title>CSS颜色和度量单位</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <p>这是一个段落</p>    <b>这里被加粗了</b></body></html>

@charset "utf-8";body{    font-size: 20px;/*这里是在p的父元素上设置字体标准，影响后面的百分比基准*/}p{    /*color: red;*/    color: #ff0000;/*每两位一样的可以合并成一位,这里即#f00*/    /*color: #f00;*/    margin: 0;/*将外边距设置为0*/    padding: 0;/*将内边距设置为0*/    background: gray;    font-size: 200%;/*字体的百分比根据原来的浏览器配置来决定目前情况*/    height: 2em;/*em根据字体大小改变自己的大小*/    width: 50%;/*百分比根据父元素来决定目前情况*/}b{    color: rgba(0,255,255,0.5);    /*color: hsla(120,100%,30%,0.5);*/}

运行结果：
这里写图片描述

阅读全文

0 0