当前位置: 首页 > Web前端 > HTML

零基础教你学前端——25、色值和长度单位

时间:2023-04-02 13:12:19 HTML

本课我们讲解网页中元素的色值和长度单位的表示方法。让我们首先学习如何表示颜色值。通过组合红、绿和蓝光来显示颜色。在网页中表示颜色的方法有很多种——例如颜色名称、十六进制值、RGB值等。颜色名称是指用代表颜色的英文单词来定义颜色值。网页支持140种标准颜色名称。如Redred,Greengreen,blueblue,AliceBlueamberblue,BlueVioletbluepurple,Tomato番茄色,WhiteSmoke白烟色等等。如果想了解更多颜色名称,可以微信扫描这个二维码:这是一个HTML片段,定义了表格三行的bgcolor属性,取值分别为红色,绿色,和蓝色分别。浏览器中显示红、绿、蓝三种颜色。注意这140个标准的英文名称必须是颜色名称,不能使用汉字作为颜色值。十六进制颜色值是指使用#RRGGBB的形式来定义颜色值。什么是十六进制,乍一看不太好理解,其实很简单。你一定知道十进制,用数字0-9来表示,每10就是一。十六进制,用数字0-9和字母A-F表示,其中A~F表示10~15,以16为例子,比如表示18个数,十进制为18,十六进制为12。表示31个数,十进制为31,十六进制为1F。十六进制颜色值#RRGGBBRRGGBB是一个两位十六进制数,取值在00到FF之间,分别用来指定红、绿、蓝的颜色强度。例如#0000FF显示为蓝色,因为蓝色分量设置为最高值FF,其他分量全部设置为00。如果想组合更多的十六进制颜色,可以微信扫描这个二维码:或者这个HTMLfragment中,表格三行的背景色的值分别为#ff0000、#00ff00、#0000ff。浏览器中也显示了红绿蓝三种颜色。提醒:初学时,不要把表示十六进制值颜色值的井号弄丢了,所有字母都是小写的。所有浏览器都支持十六进制颜色值。RGB颜色值是指使用rgb(RED,GREEN,BLUE)(读作:rgb括号中的红绿蓝)来定义颜色值。每个参数将颜色强度定义为0到255之间的整数,以逗号分隔。例如,rgb(0,0,255)将呈现为蓝色。因为蓝色参数设置为最高值255,而其他参数设置为0。如果你想定义各种rgb颜色值,可以用微信扫描这个二维码:还是这个HTML片段,数值表格三行的背景颜色中的rgb(255,0,0),rgb(0,255,0),rgb(0,0,255)。在浏览器中,同样显示了红绿蓝三种颜色。这里的rgb不区分大小写。括号和逗号中的数字前后可以有空格。所有浏览器都支持RGB颜色值。接下来,学习如何表示长度单位。对于元素上定义的一些属性,比如宽度和高度,它们的值需要定义一个长度,长度是一个数字,后面跟着一个长度单位比如10px50%等等。长度单位有两种类型:绝对长度单位和相对长度单位。绝对长度单位是固定的,用这些单位表示的长度将显示为设置的尺寸,如厘米(cm)、毫米(mm)、英寸(in)、px(像素)。其中px表示像素,是最常用的长度单位。对于低分辨率设备,1px是显示器的一个设备像素。对于高分辨率屏幕,1px表示多个设备像素,我们在制作移动端页面时会详细介绍。例如,这是一个HTML片段,它为表格第一行的第一个单元格定义了宽度和高度属性,并且宽度和高度都设置为100px。在浏览器中,此单元格由屏幕的100个设备像素(水平和垂直方向)呈现。该单位可以省略,浏览器默认使用px进行渲染。相对长度单位是指相对于一个长度计算的长度,一般用于适应不同的设备。例如%,它是根据相对于父元素长度设置的百分比计算的新值。例如,这是一个HTML片段,表格的宽度属性值设置为100%。这个表格的父元素是body,此时表格会在浏览器中横向覆盖整个窗口。至于颜色值和长度单位,暂且如此。以后学习CSS的时候,我会更详细地研究它们。https://www.bilibili.com/video...