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(100%,100%,100%);
    rgb(0%,0%,0%);
使用整数三元组记法:
    rgb(255,255,255);
    rgb(0,0,0);
如果当用户输入的值为小数且值是在可取范围之内的。都会以"四舍五入"的方式精确到最接近范围的边界。如果一个值大于100%或者小于0%。都会被默认的调整回到100%或者0%;
p spanOne{color:rgb(300%,1230%,110%);}/*100%,100%,100%*/
p spanTwo{color:rgb(0%,-780%,-34535%);}/*0%,0%,0%*/
p spanThree{color:rgb(13,35,656);}/*13,35,255*/

颜色——16进制RGB颜色

工作原理:将三个介于00~FF的16进制数连起来。就能设置一种颜色。记法的一般语法是#AABBCC。且三个数之间没有空格、逗号及其他分隔符。
h1{color:rgb(255,255,255) ;} 等价于 h1{color:#FFFFFF ;}
而
h1{colol:reb(51,102,58);}    等价于 h1{color:#336680}

颜色——等忦颜色表

颜色——Web安全色

0%或者0是一个安全值。
如果使用RGB百分数,要让所有的3个值都要么是0%或者是一个能被20整除的数
eg:
    rgb(40%,100%,80%);
如果使用0~255范围的RGB值那么所有的3个值都要么是0或者是一个能被51整除的数
eg:
    rgb(0,204,153);

长度单位

英寸(in)、厘米(cm) 、毫米(mm)、点(pt)、派卡(pica);

长度单位——相对长度单位

相对长度单位共有3种:em、ex和px
 
ps:本章内容只是自己根据阅读CSS权威指南做出的一点小知识积累。可能不太详细,如若有大神阅读本文章尽量对我的文章做出点评。让我知道还有哪些不足之处加以改正
时间: 2024-10-12 08:29:15

Web前端新人笔记之CSS值和单位的相关文章

Web前端新人笔记之height、min-height的区别

 浏览器参照基准:Firefox, Chrome, Safari, Opera, IE: * IE6不支持CSS min-height属性.最小高度的定义:1. 元素拥有默认高度:2. 当内容超出元素的默认高度时,元素的高度随内容增加而增加Figure 1:如下图的需求 * 如上图,两个区域的高度不一样.这就是 min-height 的效果演示.元素拥有一个默认的高度,当内容超出该默认高度时,元素的高度同时随内容而增加. eg1:<style> .test{ float:left; width

Web前端新人笔记之jquery选择符

jquery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松的获取元素或元素集合.本章将介绍以下内容: 1.网页中的元素结构: 2.如何通过CSS选择符在页面中查找元素: 3.扩展jquery标准的CSS选择符: 4.让选择页面元素更灵活的DOM遍历方法:一.如何理解DOM? DOM中的对象网络与家谱十分相似.比如祖先元素.父元素.子元素等等. 元素之间的关系图从下面的图就可以看清楚: 为了把DOM结构更形象的表现出来,可以使用很多工具,列如Firefox的Firebug插件,Safar

Web前端新人笔记之jquery入门

本章将为大家介绍以下几点内容: 1.jquery的主要特点: 2.建立jquery的编码环境: 3.简单jquery脚本示例: 4.选择jquery而不是纯javaScript的理由: 5.常用的jquery开发工具:jquery能做什么? ① 取得文档中的元素 $('div.content').find('p'); ② 修改页面的外观 $('ul > li:first').addClass('active'); ③ 改变文档内容 $('#container').append('<a href

Web前端新人笔记之HeightCharts基础

通常情况下,Highcharts包含标题(Title).坐标轴(Axis).数据列(Series).数据提示框(Tooltip).图例(Legend).版权信息(Credits)等,高级的还包括导出功能按钮(Exporting).标示线(PlotLines).标示区域(PlotBands)等.Highcharts基本组成部分如下图所示HeightCharts的主要组成部分 Title 图表标题,包含标题和副标题(subTitle),其中副标题是非必须的. Axis 坐标轴,包含x轴(xAxis)

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

web前端开发笔记(2)

web前端开发笔记(1) 一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必须闭合. 页面中不要用 进行缩进,如需缩进,用css控制. html标签使用必须语义化. 要为img标签填写alt和title属性. 二.HTML静态页面出现中文乱码如何解决? 引入<meta charset="UTF-8"> 三.通常情况下块属性标签和

WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3  html标签的属性格式 现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************

WEB前端学习笔记 二

1.4  JavaScript和Jquery能做什么? JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言 ,并且可在所有主要的浏览器中运行 IE.Firefox.Chorme.Opera ,JavaScript 可用来向 HTML 页面添加交互行为,如表单数据合法性验证.网页特效.动画效果.数值计算,例如你现在浏览的网知博学的首页面上的图片循环播放和导航分类,淘宝和京东的商品分类菜单等.JavaScript 是一种弱类型语言,无需编译,可由浏览器直接解释运行 特点