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 语句 (带有或不带标签引用)只能用在循环中. ( ...
随机推荐
- 将SCOM2007代理升级到 System Center 2012 SP1
使用以下过程可以升级到 System Center 2012 Service Pack 1 (SP1), Operations Manager工程师.您应首先验证代理程序满足最小受支持的配置.有关详细 ...
- 常见排序算法及其java实现
最近学习了下java,感觉java在基本语法上与C++非常相似.作为练习,我用java实现了冒泡排序.选择排序.插入排序.基尔排序.快速排序.堆排序.计数排序.合并排序. 以下为实现代码: publi ...
- 检查class排座位
在写这篇文章之前,xxx已经写过了几篇关于改检查class主题的文章,想要了解的朋友可以去翻一下之前的文章 每日一道理 灯,带有一种明亮的光,每当深夜来临,是它陪伴着你,如此默默无闻.它是平凡 ...
- Xposed知识
最近闹得沸沸扬扬的MIUI抄袭Xposed不署名事件,为此在这里普及一下相关的Xposed的知识. 相关资源 source code: https://github.com/rovo89 online ...
- 记 Ubuntu14.04 Monodevelop 安装的两个问题
1. Monodevelop 不能执行,显示错误 The assembly mscorlib.dll was not found or could not be loaded. 首先要确定mono安装 ...
- eclipse @override错误
@Override是JDK5 就已经有了,但有个小小的Bug,就是不支持对接口的实现,认为这不是Override而JDK6 修正了这个Bug,无论是对父类的方法覆盖还是对接口的实现都可以加上@Over ...
- zend studio快捷模板 开发工具之zend studio一些配置
以下是以Zend Studio 10.0.0版本为基础的: 模板的配置(template): [菜单]->[Window]->[preferences]->[PHP]->[Ed ...
- Pull Requests
Contribution Guide Issue Tracker You can find outstanding issues on the GitHub Issue Tracker. Pull R ...
- Asp.Net 5使用Area及自定义Area
Asp.Net Mvc里有一个叫做Area的技术,就是可以把不同逻辑组件的controller, view等放到不同的文件夹里.比如所有管理相关的都放到Admin area里.其实之前我一直对这个功能 ...
- 【转】ubuntu修改IP地址和网关的方法
一.使用命令设置Ubuntu IP地址 1.修改配置文件blacklist.conf禁用IPV6 sudo vi /etc/modprobe.d/blacklist.conf 表示用vi编辑器(也可以 ...

