单位和值

1.颜色值

在网页中的颜色设置是非常重要,有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置颜色的方法也有很多种:

(1)英文命令颜色

前面几个小节中经常用到的就是这种设置方法:

p{color:red;}

(2)RGB颜色

这个与 photoshop 中的 RGB 颜色是一致的,由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。如:

p{color:rgb(20%,33%,25%);}

(3)十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法,其原理其实也是 RGB 设置,但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

配色表:

2.长度值

长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。

(1)像素

像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。

(2)em

就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。

下面注意一个特殊情况:

但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。如下代码:

html:

<p>以这个<span>例子</span>为例。</p>

css:

p{font-size:14px}
span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。

(3)百分比

p{font-size:12px;line-height:130%}

设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)

时间: 2024-11-17 13:44:18

单位和值的相关文章

css学习の第五弹—单位和值

一. >>1.颜色表示方法总结: 1.英文命令颜色 前面几个小节中经常用到的就是这种设置方法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的,由 R(red).G(green).B(blue) 三种颜色的比例来配色. p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数.如: p{color:rgb(20%,33%,25%);} 3.十六进制颜色 这种颜色设置方法是

css(八--单位和值)

颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 前面几个小节中经常用到的就是这种设置方法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的,由 R(red).G(green).B(blue) 三种颜色的比例来配色. p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也

从零开始学习html(十四)单位和值

一.颜色值 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>颜色值</title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 11 <body> 12 <p>当我还是三年级的学生时是一

css单位和值

css需要单位来度量.内含整数.小数.百分数的情况,很多条件下支持正负的情况,当然是有限制的了.百分数基本是相对于自身.或是父或是祖先元素的某个属性值. 颜色         颜色的表示分为:命名颜色.rgb.十六进制.hsl.css2有16中颜色,css2.1有17种,css3有140种.这140种色基于x11 rgbb标准值,支持较好,但问题是还是不够细腻. rgb:以前的显示器基于crt的方式,依靠电子枪的能量来控制颜色.发光原理不同于一般的靠反射波长达人的眼睛,而是直接发光到眼睛,所以r

web(六)css的基本语法、取值与单位

css语法包含如下部分: 选择器:用于选择需要添加样式的元素. 属性(property):样式的属性名称,例如color代表颜色. 取值与单位:属性对应的值以及单位. 语法规则:css的某些固定语法. 注释:用户对css的程序描述,不执行. css的基本语法规则 忽略大小写(但在定义类选择器时识别大小写),建议使用小写. 多重声明:使用多个属性以及取值同时渲染一组标签. 1 p { 2 text-align: center; 3 color: black; 4 font-family: aria

《CSS权威指南》笔记0.4:值和单位

数字 包含整数,实数(小数) 百分数 相对于另一个值的百分数 颜色 可以使用浏览器内置的颜色名,自定义颜色 RGB指定颜色.rgb(百分数/整数) 十六进制rgb.#FF0000,可简写为3位,浏览器默认会将每一位复位为两位 web安全色,rgb值为20%或51的整数倍,避免颜色抖动 绝对长度单位 包括英寸(in).厘米(cm).毫米(mm).点(pt).派卡(pc) 相对长度单位 包括em.ex.px 1em等于1个font-size值,相对于父元素 ex为小写x的高度,一般1ex = 0.5

移动H5开发入门知识,CSS的单位汇总与用法

说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem.vw和vh.vmin和vmax.ch和ex等等,那现在对这些单位分别做一下详细的介绍吧. 1.em 做前端的应该对em不陌生,不是什么罕见的单位,是相对单位,参考物是父元素的font-size,具有继承的特点.如果字体大小是16

CSS的单位及line-height百分比

单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem.vw和vh.vmin和vmax.ch和ex等等,那现在对这些单位分别做一下详细的介绍吧. em 做前端的应该对em不陌生,不是什么罕见的单位,是相对单位,参考物是父元素的font-size,具有继承的特点.如果字体大小

行高不设单位的好处 line-height:1.8

今天无意间看了到了line-height:1.8 感觉挺有意思的,然后翻了下行高的知识,发现还挺有文章的,不妨温故而知新. 先回顾下:顶线.中线.基线.底线 vertical-align是元素的垂直对齐方式,也依赖于这些线,分别有top(顶线对齐).middle(中线对齐).baseline(基线对齐).bottom(底线对齐) 行距与行高(文本行的基线间的距离): 为了更方便在效果图上测量行高数值,一般我会选择文字底到文字底这方式测量,与上图的高度是一样的. =================