1、用title属性作为工具提示
2、链接到锚点
<a href="http://wickedlysmart.com/buzz#Coffee">
3、<em>斜体
4、<a target="_blank" href="http://wickedl">指定新窗口
5、链接上一个目录：../images/good.jpg
6、图像元素, 单标记<img src='dfd.gif'>
7、alt属性，当图片显示不出来时，alt起作用
<img src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png"
alt="The typical new pencil can draw a line 35 miles long.">
8、img width、height属性确定图片大小，默认是像素指定
9、web字体
@font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
10、行高
line-height: 1.6em;
11、设置元素的背景图片
background-color: white;
background-image: url(images/background.gif);
background-repeat: no-repeat;
background-position: top left;
repeat：默认水平垂直重复
no-repeat: 显示一次
repeat-x 水平重复
repeat-y 垂直重复
inherit 按父元素的设置来处理
background简写
background: white url(images/cocktail.gif) repeat-x;
12、内边距
padding: 50px 25px 25px 50px;
上 右 下 左
取代padding-left:80px; ……
13、外边距
margin：上 右 下 左
取代margin-left……
14、
边框样式 8种 border-style: groove;
边框宽度 border-width: 5px;
边框颜色 border-color: #ff000000;
指定某一边框
border-top-color
border-top-style
border-top-width
边框圆角 border-radius: 15px;
指定边框圆角 border-top-left-radius: 3em;
边框缩写
border: thin solid #007e7e;
宽度 样式 颜色
15、media为不同的设备建立不同的样式表
<link href="****.css" rel="stylesheet" media="screen and (max-device-width: 480px)"
设备屏幕大于480px就会使用这些规则
@media screen and (min-device-width: 481px){
#guarantee{
margin-right: 25px;
}
}
16、盒模型内容区的宽度
width: 200px;
17、块元素居中对齐
text-align: center;
会对块元素中所有的内联元素对齐，如文本、图像
只在块元素上使用
18、line-height: 1;
各元素的行高是其自己字体大小的1倍
19、span使内联元素逻辑分区
20、超链接
伪类：一个东西看上去像是真的， 其实不是
表示开发者为把某些特征归类，但是浏览器会这么做
a:link{
color: green;
}
a:visited{
color: red;
}
a:hover{
color: yellow;
}
a:active{
color: purple;
}
21、clear属性
clear: right;
当元素流入页面时，不允许指定的方向有浮动内容。
22、浮动元素
float：right;
23、div精确放置位置
top
right
width
bottom
left
24、每个定位元素都有一个z-index属性，
这会指定它在一个虚拟轴z轴上的位置
上面的元素更贴近用户，所以z-index更大
25、绝对路径
#sidebar{
position: absolute;
top: 100px;
right: 200px;
width: 280px;
}
postiton：
absolute绝对位置
static 默认，浏览器定位
fixed 将元素固定在浏览器窗口
relative：正常流入页面
26、加入视频
<video
controls
autoplay
width="512"
height="288"
src="video/tweetsip.mp4"
poster="images/poster.png"
loop>
27、视频备选
<video controls autoplay width="512" height="288">
<source src="a.mp4">
<source src="b.webm">
<source src="c.ogv">
<p>
Sorry, your browser doesn't support the video element
</p>
</video>
28、表格奇数偶数颜色设置
p:nth-child(2n){
background-color: red;
}
p:nth-child(2n+1){
background-color: green;
}
29、表格跨行
<tr>
<td rowspan="2">Truth or Consequences NM</td>
<td class="text_center">August 9th</td>
<td class="text_center">93</td>
<td rowspan="2" class="text_right">4,242, ft</td>
<td rowspan="2" class="text_right">7,289</td>
<td class="text_center">5/5</td>
</tr>
<tr>
<td class="text_center">August 27th</td>
<td class="text_center">85</td>
<td class="text_center">3/5</td>
</tr>
