登录  /  注册
首页 > web前端 > css教程 > 正文
css常用属性之颜色和单位
高洛峰
发布: 2017-03-04 16:49:29
原创
1521人浏览过

在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常用属性之颜色和单位相关文章请关注PHP中文网!

相关标签:
css
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学