颜色值与长度

  • 颜色值

  在网页中的颜色设置是非常重要,有字体颜色(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;}

  • 长度单位总结一下,目前比较常用到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 为基础。如果font-size也设置为em,就继续查找font-size的父元素,如果没有就以系统默认字体大小 16px为准。如下代码:
      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-13 10:17:13

颜色值与长度的相关文章

web前端——html基础笔记 NO.14{颜色值,长度值}

颜色值 在网页中的颜色设置是非常重要,有字体颜色(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 之间的整数,也

【系列】后端程序员前端之路(2016/3/24更新)

后端程序员前端之路01 后端程序员前端之路02--CSS选择器详解 后端程序员前端之路03--HTML语义化 后端程序员前端之路04--html元素分类 后端程序员前端之路05--盒子模型详解 后端程序员前端之路06--布局模型,颜色值,长度值 --不断更新中,如果有帮助到你,请点“推荐”.你的支持,是我坚持的动力O(∩_∩)O谢谢~

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+CSS笔记 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 之间的整数,也可以是 0%~100% 的百分数. 每

Web前端开发基础 第四课(颜色值)

颜色值 在网页中的颜色设置是非常重要,有字体颜色(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 之间的整数,也

代码缩写和长度值

1.盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在margin和padding的例子如下: margin:10px 15px 12px 14px;/*上设置为10px.右设置为15px.下设置为12px.左设置为14px*/ 通常有下面三种缩写方法: a.如果top.right.bottom.left的值相同,如下面代码: margin:10px 10px 10px 1

CSS中的颜色、长度、角度、时间

一.颜色的表示方法 颜色是通过对红.绿和蓝光的组合来显示的. 1.颜色名 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 h1{ 8 background: red

mysql中int、bigint、smallint和tinyint的区别与长度

对比发现 int bigint smallint 和 tinyint 类型,如果创建新表时没有指定 int(M) 中的M时,默认分别是 : int             -------     int(11) bigint       -------     bigint(20) smallint   -------     smallint(6) tinyint     -------     tinyint(4) 下面是这几种类型的取值范围 参考:http://www.2cto.com/d

GoLang笔记-数组和切片,本质是就是长度不可变的可变的区别

数组 Arrays 数组是内置(build-in)类型,是一组同类型数据的集合,它是值类型,通过从0开始的下标索引访问元素值.在初始化后长度是固定的,无法修改其长度.当作为方法的入参传入时将复制一份数组而不是引用同一指针.数组的长度也是其类型的一部分,通过内置函数len(array)获取其长度. 初始化 数组的初始化有多种形式,查看示例代码 , 在线运行示例代码 [5] int {1,2,3,4,5} 长度为5的数组,其元素值依次为:1,2,3,4,5 [5] int {1,2} 长度为5的数组