Web前端新人笔记之CSS值和单位
数字
颜色——命名颜色
在Css2.1中规范定义了17个颜色名。包括html4.0中定义的16个颜色及外加一个橙色;
<h1 style="color=aqua">aqua</h1> <h1 style="color=fuchsia">fuchsia</h1> <h1 style="color=lime">lime</h1> <h1 style="color=olive">olive</h1> <h1 style="color=red">red</h1> <h1 style="color=white">white</h1> <h1 style="color=black">black</h1> <h1 style="color=gray">gray</h1> <h1 style="color=maroon">maroon</h1> <h1 style="color=orange">orange</h1> <h1 style="color=silver">silver</h1> <h1 style="color=yellow">yellow</h1> <h1 style="color=blue">blue</h1> <h1 style="color=green">green</h1> <h1 style="color=navy">navy</h1> <h1 style="color=pruple">pruple</h1> <h1 style="color=teal">teal</h1>
当然网页上不只有这些颜色组成。Web浏览器能识别多达140多个颜色名。包括上面我们提到的。具体就不介绍了;
颜色——RGB颜色
计算机通过组合不同的红色、绿色、蓝色创建新的颜色,这种组合成为RGB颜色;
使用百分数记法指定白色和黑色: rgb(%,%,%); rgb(%,%,%); 使用整数三元组记法: rgb(,,); rgb(,,);
如果当用户输入的值为小数且值是在可取范围之内的。都会以"四舍五入"的方式精确到最接近范围的边界。如果一个值大于100%或者小于0%。都会被默认的调整回到100%或者0%;
p spanOne{color:rgb(%,%,%);}/*100%,100%,100%*/ p spanTwo{color:rgb(%,-%,-%);}/*0%,0%,0%*/ p spanThree{color:rgb(,,);}/*13,35,255*/
颜色——16进制RGB颜色
工作原理:将三个介于00~FF的16进制数连起来。就能设置一种颜色。记法的一般语法是#AABBCC。且三个数之间没有空格、逗号及其他分隔符。
h1{color:rgb(,,) ;} 等价于 h1{color:#FFFFFF ;} 而 h1{colol:reb(,,);} 等价于 h1{color:#}
颜色——等忦颜色表
颜色——Web安全色
%或者0是一个安全值。 如果使用RGB百分数,要让所有的3个值都要么是0%或者是一个能被20整除的数 eg: rgb(%,%,%); 如果使用0~255范围的RGB值那么所有的3个值都要么是0或者是一个能被51整除的数 eg: rgb(,,);
长度单位
英寸(in)、厘米(cm) 、毫米(mm)、点(pt)、派卡(pica);
长度单位——相对长度单位
相对长度单位共有3种:em、ex和px
ps:本章内容只是自己根据阅读CSS权威指南做出的一点小知识积累。可能不太详细,如若有大神阅读本文章尽量对我的文章做出点评。让我知道还有哪些不足之处加以改正
Web前端新人笔记之CSS值和单位的更多相关文章
- Web前端新人笔记之CSS字体
本章内容是阅读CSS权威指南的一个小积累和随笔.新人必看,老鸟也可查看并指出不足指出以便后人阅读更好地理解.O(∩_∩)O谢谢!!!设置字体属性时样式变的最常见的用途之一:不过,尽管字体选择很重要,但 ...
- Web前端新人笔记之CSS结构和层叠
上一篇文章介绍了如何利用CSS选择器为元素应用各种丰富的样式,每个合法的文档都会生成一个结构树,了解这一点,就能根据元素的祖先.属性.兄弟等元素穿件选择器选择元素. 本篇文章将讨论3中机制之间的关系: ...
- Web前端新人笔记之文本属性
前一段时间因工作时间减缓了更新笔记的时间.我也不知道有没有会观看并且能不能帮到一些初学者,这只是我的一些小随笔而已.当然我也希望的的每一篇随笔都可以帮到更多的想要学习前端开发的初学者们,更希望你们也可 ...
- Web前端新人笔记之jquery选择符
jquery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松的获取元素或元素集合.本章将介绍以下内容: 1.网页中的元素结构: 2.如何通过CSS选择符在页面中查找元素: 3.扩展jquery ...
- Web前端新人笔记之height、min-height的区别
浏览器参照基准:Firefox, Chrome, Safari, Opera, IE: * IE6不支持CSS min-height属性.最小高度的定义:1. 元素拥有默认高度:2. 当内容超出元素 ...
- Web前端新人笔记之了解Jquery
与javaScript相比,Jquery更简洁.浏览器的兼容性更强,语法更灵活,对xpath的支持更强大.一个$符就可以遍历文档中各级元素.例:在页面上有一个无序列表,我们需要将所有列表项中的文本内容 ...
- Web前端新人笔记之HeightCharts基础
通常情况下,Highcharts包含标题(Title).坐标轴(Axis).数据列(Series).数据提示框(Tooltip).图例(Legend).版权信息(Credits)等,高级的还包括导出功 ...
- Web前端新人笔记之jquery入门
本章将为大家介绍以下几点内容: 1.jquery的主要特点: 2.建立jquery的编码环境: 3.简单jquery脚本示例: 4.选择jquery而不是纯javaScript的理由: 5.常用的jq ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
随机推荐
- HTML5----CSS显示半个字符
CSS显示半个字符的基本思路: 就是一个字写两遍,分别显示一半.这里就须要用到CSS伪元素:before和:after,记住这个"伪元素"的"伪"字,表明它本来 ...
- 【转】rvm安装ruby,gem,rails,之后仍然无法找到rails命令
转自:http://chinacheng.iteye.com/blog/1738036 rvm安装ruby和rails之后,ruby -v好使,gem -v好使.但是rails -v不好使,提示没有安 ...
- BZOJ 1143: [CTSC2008]祭祀river 最长反链
1143: [CTSC2008]祭祀river Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline ...
- ORM之四:调用入口与调用示例
一.ORM入口封装 结合上一篇文章与这里的DbProvider().Init()方法,就很明显的知道了是创建一个mssql的实例.那么在DbService的泛型方法中显示提供了单表操作与多表linq查 ...
- 画表格防OFFICE的功能
http://files.cnblogs.com/xe2011/officetable.rar 画表格防OFFICE的功能
- CircularProgressBar
https://github.com/semicoder/CircularProgressBar https://github.com/amurani/MeterView
- JAVA实现的异步redisclient
再使用redis的过程中,发现使用缓存尽管好,可是有些地方还是比較难权衡,缓存对象大了,存储对象时的序列化工作非常繁重,消耗大量cpu:那么切分成非常小的部分吧,存取的次数变多了,redisclien ...
- BAPI_ACC_DOCUMENT_POST Enter rate / GBP rate type M for Error SG105
Folks, I was wondering if I could get a bit of help here as I've been racking my brains on it for ag ...
- zend studio 安装xdebug
XDebug安装 到http://xdebug.org/download.php选择自己需要的xdebug版本.然后按照下面的配置建立目录.并在php.ini加入这些内容.重启server 注意xde ...
- How to use BMW Multi Tool 7.3 to replace lost key for BMW X1
BMW Multi Tool 7.3 version is a high quality auto key programmer that supports CAS 1, CAS2, CAS3, CA ...