zoukankan      html  css  js  c++  java
  • css整理-02 颜色和字体

    颜色

    命名颜色

    RGB指定颜色

    • 数值: 0-255
    • 百分比
    • 三元组:红绿蓝

    16进制RGB

    web安全颜色

    • 在256色计算机系统上总能避免抖动的颜色
    • 表示为rgb值20%和51的倍数
    • web安全色的简写16进制是0,3,6,9,C,F

    长度单位

    绝对长度单位

    • in, cm, mm, pt, pc
    • 实际中几乎不使用

    相对长度单位

    • 印刷度量单位:em, ex,像素:px
    • 度量的实际距离可能因为屏幕分辨率,可视区的宽度,用户选择等原因而改变
    • 1个em定义为一种给定字体的font-size值; (实际上是高度值)
    • ex指的是所用字体中小写x的高度;如果两段文本像素相同但字体不同,ex值也会不同

    选择

    • 最好的度量单位是相对长度单位,特别是em
    • 大部分情况下`1ex = 0.5em`
    • 除了设置文本大小,对于元素的其他方面更适合像素,如边框,定位;

    字体系列

    特定字体系列

    通用字体系列

    • Serif: 字体成比例并且又上下短线
    • Sans-serif: 字体成比例,没有上下短线
    • Monospace: 字体不成比例,通常用于模拟打印机打出的文本
    • Cursive: 不成比例,模范人手写的文本
    • Fantasy: 无法用任何特征来定义

    使用

    • 直接使用通用字体,用户代理会选择一个特定字体
    • 直接使用特定字体,但如果没有这个字体,则会使用默认字体
    • 由于上面的原因,一般使用特殊字体加通用字体的格式: h1{font-family: Georgia, serif}
    • 也可以指定多个特定字体按照顺序查找; (注意要加逗号,可能需要引号)

    字体加粗

    值:

    *normal, bold
    *相对值: lighter, bolder

    原理

    • 定义了100-900的关键字,这些数字没有固有的加粗度;一般400=normal, 700=bold;
    • 如果将一个元素加粗设置为bolder,用户代理首先必须确定从父元素继承的font-weight;然后选一个值,它对应于比所继承的值更粗的一个字体加粗;
    • 字体变细同上的原理

    字体大小

    • font-size的作用是为给定字体的em框提供一个大小,而不能保证实际显示的字符就是这种大小;

    绝对大小

    • 值: xx-small, x-small, small, medium, large, x-large, xx-large
    • 这些关键字并没有明确地定义,而是根据medium和缩放因子相对地定义的;

    相对大小

    • 值: larger, smaller
    • 根据父元素继承和缩放因子变化,其大小不会限制在绝对大小范围内;

    百分数和大小

    风格和变形

    font-style:

    • italic是一个单独的字体风格,对每个字母的结构有一些小改动
    • oblique则是正常竖直文本的倾斜版本
    • 实际上,很少又浏览器复杂到足以区分它们

    字体变形

    • font-variant: small-caps: 大写字母的小型版本

    font简写

    • |font-style|font-variant|font-weight|font-size(/line-height)|font-family|
    • 前三个值允许采用任何顺序,font-sizefont-family必须存在并以此顺序作为font的最后两个值;
    • line-height作为font-size的补充,是一个可选的并以斜线分隔的值

    系统字体

    • caption: 用于又标题的控件,如按钮
    • icon: 用于对图标加标签
    • menu: 用于菜单
    • message-box: 用于对话框
    • small-caption: 对小控件加标签
    • status-bar: 用于窗口状态条
    • 如果机器上不存在一种字体,用户代理会试图寻找接近的字体;
  • 相关阅读:
    python的thread模块作用
    Python2、3解释器inpurt()函数的区别
    python中的单例设计模式
    Python2、3解释器中字符串中的区别
    浏览器向服务器发送请求的请求头解析
    Python中输出函数print()的三个参数
    Python中四种交换两个变量的值的方法
    学习爬虫看着篇(基础篇)
    Python读写txt文件时的编码问题
    网页和自然语言处理中的字符问题(半角和全角)
  • 原文地址:https://www.cnblogs.com/jinkspeng/p/4495920.html
Copyright © 2011-2022 走看看