区别各浏览器的hack写法: background:blue; // Firefox background:red\9; // IE background:red\0; // IE8+IE9 background:red\9\0; // IE9 *background:black; // IE7+IE6 +background:black; // IE7+IE6 _background:orange; // IE6 html:root #element { color:blue; } //CSS3 :root #element { color:pink \0; } //IE9
私有属性: 使用 -前缀- 来实现各引擎的私有属性 -o-:以Presto为渲染引擎的Opera的私有属性 -moz-:以Gecko为渲染引擎的Firefox的私有属性 -webkit-:以Webkit为渲染引擎的Safari、Chrome的私有属性 -ms-:以Trident为渲染引擎的IE系列,从IE8开始,引入-ms-区分私有属性
匹配父元素中的第n个子元素 .row:nth-child(even) { background: #dde; } .row:nth-child(odd) { background: white; }
input[type="text"] { background: #eee; }
:not(.box) { color: #00c; } :not(span) { display: block; }
h2:first-child { ... } div.text > div { ... } h2 + header { ... }
将对象呈递为内联对象,但是对象的内容作为 块对象呈递。旁边的内联对象会被呈递在同一 行内,允许空格。使用它就可以再使用 text-align来将元素内容居中
div { display: inline-block; }
font-family:设置文本的字体名称。 font-style:设置文本样式。 font-variant:设置文本是否大小写。 font-weight:设置文本的粗细。 font-stretch:设置文本是否横向的拉伸变形。 font-size:设置文本字体大小。 src:设置自定义字体的相对路径或者绝对路径。 @font-face { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf); } header { font-family: 'LeagueGothic'; } 字体文件三种格式 .TTF或.OTF,适用于Firefox 3.5、Safari、Opera .EOT,适用于Internet Explorer 4.0+ .SVG,适用于Chrome、iPhone
http://www.fontsquirrel.com (特点:上传字体文件,生成多种字体格式及CSS代码) http://www.google.com/webfonts (特点:直接调用google服务器地址) http://new.myfonts.com/WhatTheFont (特点:上传图片,自动识别字体)
div { text-overflow: ellipsis; }
只设置overflow: hidden
只设置overflow: hidden 及 white-space: nowrap
只设置overflow: hidden 及 white-space: nowrap 和text-overflow: ellipsis
-webkit-column-count: 2; //定义栏目的数目
-webkit-column-rule: 1px solid #bbb; //定义每栏之间边框的宽度,样式和颜色
-webkit-column-gap: 2em; //两栏之间的间距距离
In March 1936, an unusual confluence of forces occurred in Santa Clara County.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet.
Then came the wind.
It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. A tidal bore of warm air, it tore along the columns of trees, ripped the blossoms apart and carried them off in a fluttering flood of petals like foam rolling up a beach.
This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on...
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.00px;
color:yellow;
}
RGBA:Red(红色) Green(绿色) Blue(蓝色)和 Alpha(透明度) color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75);
color: hsla( 128, 75%, 33%, 1.00);
border-radius: 0px; borde-top-left-radius: 0px; borde-top-right-radius: 0px;
text-shadow: rgba(64, 64, 64, 0.5) //色值 0px //X轴 0px //Y轴 0px; //模糊 box-shadow: rgba(0, 0, 128, 0.25) 0px 0px 0px;
background: -webkit-gradient( linear, //渐变的类型(线性、径向等) left top, //渐变开始的X Y 轴坐标 left bottom, //渐变结束的X Y 轴坐标/ from(#00abeb), //开始的颜色 to(white), //结束的颜色 color-stop(0.5, white), //中途改变颜色 color-stop(0.5, #66cc00)//中途改变颜色 ) -moz-linear-gradient( //类型放到了属性前缀中 top, //开始的位置(默认为top) #00abeb, //开始的颜色 white 50%, //结束的颜色及位置 ##66cc00 0%, //继续开始的颜色 white //颜色 )
#logo { background: url(logo.gif) center center no-repeat; background-size: 50px 50px; //设置背景的大小 background-size: contain; //contain表示按比例缩放占据最大高度或者宽度的背景 background-size: cover; //表示铺满整个背景 background-size: ; }
div { background: url(src/bg1.png) 10px center no-repeat, url(src/bg2.png) 10px center repeat-x, url(src/bg3.png) 10px center repeat-x; }
利用CSS伪类 :link :visited :hover :active :focus
<ul class="menu"> <li>About Us <ul class="drop"> <li><a href="#">Our Team</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </li> </ul> ul.menu ul li:hover { background-color: rgb(234,234,234); //hover时的背景色 -webkit-transition: background-color .5s ease .1s; //变化的属性 持续时间 速率 延时 } ul.menu:hover .drop { height: 140px; opacity: 1; -webkit-transition: opacity .25s linear 0s, height .25s linear 0s; //linear匀速 ease渐慢 ease-in淡入
-webkit-transform: rotate(-5deg); //传递一个度数值(degree)转动一个对象 -webkit-transform: scale(.5); //传递一个正数、负数或小数来缩放或者反转一个对象 ……
div{ -webkit-transition: -webkit-transform 2s ease-in-out;} div:hover{ -webkit-transform: rotate(-5deg);}
div{ -webkit-transition: -webkit-transform 2s ease-in-out;} div:hover{-webkit-transform: scale(.5);}
div{ -webkit-transition: -webkit-transform 2s ease-in-out;} div:hover{-webkit-transform:rotate(-5deg) scale(.5);}
/* 定义要调用的动画 */ @-webkit-keyframes jump { from { opacity: 0.0; font-size: 100%; } to { opacity: 1.0; font-size: 200%; padding-left:500px; } } div { -webkit-animation-name: jump; //动画的名称。 -webkit-animation-duration: 2s; //定义动画播放一次需要的时间 -webkit-animation-iteration-count: infinite; //定义循环数,infinite为无限次。默认1次 -webkit-animation-timing-function: ease-in-out;//定义动画播放的方式 -webkit-animation-direction: alternate; //动画播放的方向,两个值,默认为normal,这个时候动画的每次循环都向前播放。 另一个值是alternate,则第偶数次向前播放,第奇数次向反方向播放。 }
<body> <header> //定义 section 或 page 的页眉。 <hgroup> //定义文档中 section 的信息。 <h1>Page title</h1> <h2>Page subtitle</h2> </hgroup> </header> <nav> //定义导航链接。 <ul> Navigation... </ul> </nav> <section>//定义 section(章节、模块)。 <article>//定义一块独立的文章内容(可嵌套)。 <header> <h1>Title</h1> </header> <section> Content... </section> </article> <article> <header> <h1>Title</h1> </header> <section> Content... </section> </article> <article> <header> <h1>Title</h1> </header> <section> Content... </section> </article> </section> <aside> //定义页面正文之外(侧栏)的内容。 Top links... </aside> <footer>//定义 section 或 page 的页脚。 Copyright © 2009. </footer> </body>
输入类型:(UI方面) <input type='range' min='0' max='50' value='0' /> //range类型用于应该包含一定范围内数字值的输入域。(显示为滑动条) <input results='10' type='search' /> //search类型用于搜索域,比如站点搜索或 Google 搜索。(显示为常规的文本域) <input type='month' /> <input type='week' /> <input type='time' /> <input type='date' /> //Date Pickers(时间数据检出器) <input type='text' placeholder='输入您的用户名' /> //placeholder属性提供一种提示,占位字符。(输入域为空时显示出现,会在输入域获得焦点时消失 输入检查:(不符合条件的将显示红色背景) <style> :invalid(无效){background-color:red;} </style> <input type='color' /> <input type='url' /> <input type='number' /> <input type='email' /> <input type='tel' />
<audio src="sound.mp3" controls></audio> //ogg、mp3、wav(ChromeSafari) document.getElementById("audio").muted=false; <video width="320" controls="controls" autoplay="autoplay" loop="loop"> <source src="movie.ogg" type="video/ogg" /> //Firefox、Opera、Chrome <source src="movie.mp4" type="video/mp4" /> //IE9、Safari、Chrome <source src="movie.webm" type="video/webm" /> //Firefox、Opera、Chrome 您的浏览器不支持video标签 </video> document.getElementById("video").play();//pause() muted=false
豆瓣使用RDFa提供给Google抓取 <span property="v:summary">1988是另一种1984</span> <span property="v:reviewer">王彻</span> <span property="v:dtreviewed" content="2011-02-04">2011-02-04 02:35:31</span> <span property="v:itemreviewed">1988:我想和这个世界谈谈</span> <span property="v:rating">5</span> <span property="v:description">现实里,我们总是有办法在1984的世界里……</span>
<div itemscope itemtype="http://example.org/band"> //规范集People、Products、Events <p>My name is <span itemprop='name'>Neil</span>.</p> <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p> <p>I am <span itemprop='nationality'>British</span>.</p> </div>
富文本摘要的测试工具 http://www.google.com/webmasters/tools/richsnippets
<canvas id="canvas" width="300" height="150"></canvas> <script> var canvasContext = document.getElementById("canvas").getContext("2d"); //canvas只支持一种基本形状——矩形,所以其它形状都是有一个或多个路径组合而成 canvasContext.fillRect(25,25,100,100); //绘制矩形区域 canvasContext.clearRect(45,45,60,60); //清除矩形区域 canvasContext.strokeRect(50,50,50,50); //绘制矩形边框 //绘制路径 canvasContext.beginPath(); //beginPath()开始绘制 closePath()结束绘制 canvasContext.moveTo(300,50); canvasContext.lineTo(250,100); canvasContext.lineTo(350,100); canvasContext.fill(); //fill()实心 stroke()边框 fillStyle=‘orange’实心填充 canvasContext.beginPath(); arc(290,170,40,1,3,true);//圆心横坐标、纵坐标、半径、起始弧度、末端弧度(x轴为基准)、顺时针 canvasContext.stroke(); </script>
arc方法里用到的角度是以弧度为单位而不是度。
度和弧度直接的转换可以用这个表达式:var radians = (Math.PI/180)*degrees;。1弧度约为57.3°
引入图像需要两步: 1、来源图片(不是简单的URL路径,但可以是一个JS的image对象引用,或者其它的canvas元素。) ● 利用document.getElementById等方法引用页面内的图片 ● 利用document.getElementsByTagName等方法引用其它canvas元素 ● 用脚本加载一个新的image对象,img.src = 'myImage.png'; ● 通过data:url方式嵌入图像,var img_src = 'data:image/gif;base64,R3pn/ZEAAAE'; 2、用drawImage方法将图像插入到canvas中。 ● 普通:drawImage(image, x, y) //image是image或者canvas对象,x和y是其在目标canvas里的起始坐标。 ● 缩放:drawImage(image, x, y, width, height) //width和 heigh分别是图像在canvas中显示大小。 ● 切片:drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) //后8个中,前4个是定义图像源的切片位置和大小,后4个是定义切片的目标显示位置和大小。
<canvas id="canvas2" width="838" height="200" style="margin:0;"></canvas> <script> var canvasContext = document.getElementById('canvas2').getContext('2d'); var img = new Image(); img.src = 'images/wall.jpg' document.getElementById('canvas2_btn1').onclick = function(){ canvasContext .drawImage(img,100,13); } document.getElementById('canvas2_btn2').onclick = function(){ canvasContext .drawImage(img,350,13,100,80); } document.getElementById('canvas2_btn3').onclick = function(){ canvasContext .drawImage(img,0,70,90,90,350,110,90,80); } </script>