在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚。

颜色

当初我在初学前端的时候,就会冒出一个疑问“我该如何设置网页颜色?”,一般常用英文颜色名或者十六进制颜色值来设置颜色,但是css中还有一些其他较为复杂的
写法。

RGB颜色

计算机通过不同级别的红、绿、蓝来产生新的颜色,这就是常说的RGB颜色。有了这样一个产生颜色的机制,就可以通过直接给出不同的颜色级来确定颜色,就可以自己去
组合三种颜色的值。

写法:
h1{color:rgb(100%,100%,100%)} 百分比rgb颜色写法,数字范围从0%到100%
h1{color:rgb(0,255,255)} 数字rgb颜色写法,数字范围从0到255

注意:两种写法的值都会被修剪,百分比会被修剪成0%-100%,即超出100%被修剪成100%,低于0%修剪成0%,数字则会被修剪成0-255,另外,两者不能混写,混写是不会生效的。

十六进制颜色和颜色名设置颜色我们就不再提了

单位

长度单位:一般分为绝对单位和相对单位。绝对单位从诞生之日起其实用的很少,至少我平时在项目上很少用到。所以这里就跳过了绝对单位的介绍。

相对单位:有三种相对的长度单位,em、ex和px。前两种分别代表“元素的字体高度”和“字母shezhi‘x’的高度”,他们是普通印刷上的量度,最后一个px代表“像素”,之所以说它是
                 相对的,是因为它依赖显示器的分辨率。

em:css中,一个“em”就是给定字体的font-size值。唯一例外的就是在设置字体尺寸,这种情况下em的值是相对于父元素的。

  • body{font-size:20px;}
  • p{font-size:1em;}

这时p的字体大小就是20px,而不是默认的16px。

px:按像素值px来设置。如
body{font-size:20px;}
p{font-size:16px;}
p元素中字体的大小就是16px

百分比值:同长度单位比较,百分比就显得很简单,就是一个百分比值。例如:
h1{line-height:150%;} 设置所有h1的行高比普通行高大一半。

总之百分比总是通过另外一个值来计算的,这些在后面属性讲解中会一一提到。而且百分比可正可负,对于有些属性只接受正值,这就另说了。

今天的内容就这么多,写的有点乱,希望以后越写越好吧。

css常用属性总结:颜色和单位的更多相关文章

  1. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  2. 1+x证书学习日志——css常用属性

     ## css常用属性:             1:文本属性:                 文本大小:  font-size:18px;                 文本颜色    colo ...

  3. CSS常用属性-xy

    一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...

  4. 02: css常用属性

    目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...

  5. Css常用属性单位

    长度单位:px-像素 颜色单位:         ①十六进制:#FFFFFF:         ②颜色名称:red:         ③RGB颜色代码:RGB(0-255,0-255,0-255): ...

  6. css常用属性1

    1  背景相关 背景颜色 background-color     = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...

  7. css常用属性汇总

    一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...

  8. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  9. css常用属性总结:关于word-spacing和letter-spacing的使用

    前端时间项目版本迭代,修改代码时发现使用了关于word-spacing和letter-spacing.先说下使用场景,以前的项目中,经常遇到某些字符间有一些间距,我看了一些同事的代码是这么实现的: & ...

随机推荐

  1. 函数响应式编程RxJava

    RxJava 到底是什么 一个词:异步. RxJava 在 GitHub 主页上的自我介绍是 "a library for composing asynchronous and event- ...

  2. Jenkins无法读取覆盖率报告的解决方法

    报错信息如下: log 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 coverage-report: [mkdir] Cre ...

  3. [转]设置银行卡密码的个人bug

    国庆前去某银行新办了张银行卡,办卡的时候修改了默认的密码.国庆期间要网上购物,结果密码输入3次都错误,所以银行卡被锁定了,只能等国庆后银行上班再去解锁. 国庆结束后跑去银行重置了密码,流程是这样的:1 ...

  4. timer Compliant Controller project (3)--bom and sch

    After optimization of structural solution , I  must prepare the bom and  drawing circuit diagram as ...

  5. JS中的phototype详解

    作者:轩脉刃 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A. 2 ...

  6. I.MX6 Manufacturing Tool V2 (MFGTool2) Emmc mksdcard.sh hacking

    #!/bin/sh # 参考文章: # . MFGTool Emmc mksdcard.sh MFGTool Emmc mksdcard.sh comment # http://jordonwu.gi ...

  7. 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  8. office web app server 文件预览部署&& wopi 集成使用

    对于需要进行office 套件文档预览的时候大部分大家使用的是插件,或者类似的,解决方案,微软已经为我们提供了比较好的解决 方案 office web app server (目前名称是office ...

  9. php non-thread-safe和thread-safe这两个版本有何区别?

    php non-thread-safe和thread-safe这两个版本有何区别? non-thread-safe 非线程安全 与IIS 搭配环境thread-safe 线程安全 与apache 搭配 ...

  10. open_input_file函数调用结构图(转)

    open_input_file函数调用结构图(有些重复的函数调用就略掉了,大致是按流程往下的). 函数大致说明: AVFormatContext *avformat_alloc_context(voi ...