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 语句 (带有或不带标签引用)只能用在循环中. ( ...
随机推荐
- MmSystem播放Wav格式声音
//MmSystem播放Wav格式声音 //MmSystem 支持 *.wav声音格式 snd ->SoundRecorderuses MmSystem; //引用MmSystem//播放系统声 ...
- ProgressSeekBar
ProgressSeekBar.rar
- paip.提升性能---- 网站并发数的总结.txt
paip.提升性能---- 网站并发数的总结.txt 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.n ...
- UIWebView的使用,简单浏览器的实现
#import "ViewController.h" @interface ViewController () <UIWebViewDelegate> @propert ...
- Shell脚本文件操作
Linux Shell http://baike.baidu.com/link?url=2LxUhKzlh5xBUgQrS0JEc61xi761nvCS7SHJsa1U1SkVbw3CC869AoUC ...
- 用C# sqlserver实现增删改查
using System.Data;using System.Data.SqlClient;//先打开两个类库文件SqlConnection con = new SqlConnection(); // ...
- 你不知道的 Javascript
作用域 词法作用域:编译阶段确定(欺骗词法作用域 eval with) function foo(str){ "use strict" eval(str) console.log( ...
- android之模拟器访问外网设置
一.确定adb可用 1.1 确认adb环境变量 1.2 命令行cmd 执行adb shell启动模拟器的命令行 二.DNS确认 2.1 确定DNS是否为电脑的DNS 2.2 修改DNS地址 三.效果图
- (原创)鸟哥linux学习script shell相关笔记
在使用鸟哥linux进行script shell学习的过程中碰到一些不太明白的知识点,在这里进行一些记录 1. [root@www scripts]# vi sh03.sh #!/bin/bash # ...
- php的传值和传址
有些情况下,可能希望在函数体内对参数的修改在函数体外也能反映; 使用引用传递参数要在参数前加上&符号; 例子: <?php $a=5; function show(&$a){ ...

