css常用属性总结:颜色和单位
在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常用属性总结:颜色和单位的更多相关文章
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
- CSS常用属性-xy
一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...
- 02: css常用属性
目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...
- Css常用属性单位
长度单位:px-像素 颜色单位: ①十六进制:#FFFFFF: ②颜色名称:red: ③RGB颜色代码:RGB(0-255,0-255,0-255): ...
- css常用属性1
1 背景相关 背景颜色 background-color = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...
- css常用属性汇总
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- css常用属性总结:关于word-spacing和letter-spacing的使用
前端时间项目版本迭代,修改代码时发现使用了关于word-spacing和letter-spacing.先说下使用场景,以前的项目中,经常遇到某些字符间有一些间距,我看了一些同事的代码是这么实现的: & ...
随机推荐
- [批处理]批量提取MKV资源
最初是下了部没字幕的动漫,是720P MKV格式的,当时没注意,下完了以后才发现是没字幕的 后来去射手上找没有,百度了半天也没有 最后只能求救与已经下了这部动漫是MKV格式且是内挂字幕的人来帮忙 最后 ...
- 『转』Panda Antivirus Pro 2014 – 免费6个月
Panda Antivirus Pro 2014 为您的计算机提供了最简单的使用和最直观的保护.最近,Panda公司和 softonic公司合作推出免费半年版本活动地址:点此进入点击“Kostenlo ...
- 2018.11.28 RF基础1
1 射频元件 高频电阻: 高频电容: 高频电感: 2 传输线 a 传输线效应:阻抗,3M法则. b 同轴线:RF中用 c 微带线: 常用: 1/4变换线 回波损耗:用网络分析仪测量 插入损耗:传输功率 ...
- 为什么有logistics函数
直观地看: 如果是softmax函数,我想有跟多的选择方向吧
- ScrollView的基本用法丶代理方法
属性: - (void)viewDidLoad { [super viewDidLoad]; _scrollView.backgroundColor = [UIColor redColor]; //设 ...
- BZOJ5091: [Lydsy1711月赛]摘苹果(简单概率)
5091: [Lydsy1711月赛]摘苹果 Time Limit: 1 Sec Memory Limit: 256 MBSubmit: 214 Solved: 163[Submit][Statu ...
- HDU 1285:确定比赛名次(拓扑排序)
确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- .NET/C# 使用反射注册事件
使用反射,我们可以很容易地在运行时调用一些编译时无法确定的属性.方法等.那么如何注册事件呢? 本文将介绍如何使用反射注册事件. 本文内容 不使用反射 使用反射 安全地使用反射 参考资料 不使用反射 例 ...
- sourcegraph 方便的代码查看工具
sourcegraph 是一个方便的代码查看插件,有chrome 的插件,具体安装可以在chrome 应用商店,同时 官方提供了基于docker 运行的方式(适合本地使用) 下载镜像 docker p ...
- TASKER 定制你的手机让它在办公室时屏幕 30 分钟才灭
TASKER 定制你的手机让它在办公室时屏幕 30 分钟才灭 因为到的办公室,手机一直是充电的,不想屏幕太快关关掉,所以使用 TASKER 做了一个条件. 当 WIFI 连接到公司 WIFI 且充电中 ...