zoukankan      html  css  js  c++  java
  • 单位和值

    颜色值

    在网页中的颜色设置是非常重要,有字体颜色(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 为基础。如下代码:

    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)。

  • 相关阅读:
    webpack基础
    LeetCode232. 用栈实现队列做题笔记
    mysql 时间加减一个月
    leetcode 1381. 设计一个支持增量操作的栈 思路与算法
    LeetCode 141. 环形链表 做题笔记
    leetcode 707. 设计链表 做题笔记
    leetcode 876. 链表的中间结点 做题笔记
    leetcode 143. 重排链表 做题笔记
    leetcode 1365. 有多少小于当前数字的数字 做题笔记
    LeetCode1360. 日期之间隔几天 做题笔记
  • 原文地址:https://www.cnblogs.com/strawqqhat/p/10602314.html
Copyright © 2011-2022 走看看