HTML
- <& copyright >
<p> < ©right ></p> - 直接链接到网页#位置-
<a href="index.html #chai"> See Chai Tea</a> - 打开窗口target
<a target="_blank" href="...."> xxxx </a> - 如果图片不能显示 alt中的文字会显示出来
< img src="http://....png" alt =" xxxxx "> - thumbnails 缩略图
CSS
- 属性声明的最后加上"!important"就可以覆盖样式
- 样式表中出现在后面的规则 更重要
对选择器中特定的部分进行编辑
/*-- 对greentea类中的p元素进行编辑--*/
p.greentea{
color: green;
}
/* 对greentea类中的blockquote元素进行编辑 */
blockquote.greentea{
color: green;
}
/*-- 对id 为 greentea 的p元素进行编辑--*/
p#greentea{
color: green;
}
/* 对父元素（div）的所有子孙元素（h2）进行编辑*/
div h2{
color: black;
}
/* 对父元素（id为elixirs）的所有子孙元素（h2）进行编辑*/
#elixirs h2{
color: black;
}
字体
- SANS-SERIF 常用字
- SERIF 报纸字
- MONOSPACE 代码字
- CURSIVE 手写体
- FANTASY 装饰字
要加载由src URL指定的字体文件。
@font-face{
font-family: " Emblema One";
src: url(" http:// wickedlysmart.com / hfhtmlcss/ chapter8 .woff"),
url(" http:// wickedlysmart.com / hfhtmlcss/ chapter8 .woff");
}
媒体查询
如果设备屏幕宽度大于480px就会使用这个规则
@media screen and (min-device-width: 480px){
#guarantee{
margin-right: 250px;
}
}
@media (orientation: portrait) 横屏
@media (orientation: landscape) 竖屏
width属性只指定内容区的宽度
div width = margin-left + border-left-width + padding-left + width内容区 + padding-right + border-right-width + margin-right
border设置
.test{
border-style: outset;
border-bottom-color: #EEEEEE;
border-bottom-width: 1px;
border-radius : 15px;
border-top-left-radius : 0px;
padding: 25px;
margin: 10px 200px 30px 200px;
}
根据元素的状态指定样式 --- 悬停、点击等等
***e.g. a:link不能有空格！！顺序很重要 ***
/* 显示为链接的时候 */
a:link{
color:green;
}
/* 被访问过后 */
a:vistied{
color:red;
}
/* 悬停的时候 */
a:hover{
background: #F9F9F9；
color:yellow;
}
/* 访问到链接时 （键盘Tab）*/
a:focus{
color:blue;
}
/* 鼠标点击时 长按不放 */
a:active{
color: pink;
}
文本居中
text-align : center
上移变两栏
float : right
流和盒模型
- 上下放置取数值大的外边框px
- 并列放置取数值和px
重叠问题
- 首先需要浮动的栏必须是在其他元素的div上方
- 为了不合其他元素重叠 可以在其他元素的中定义 clear: right/ left ...
冻结设计（Jello凝胶）
锁定页面中内容区的宽度，使得内容区在浏览器中居中
#allcontent{
width: 800px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
}
绝对定位
相对于父元素的定位
#annoyingad{
position: absolute;
top: 150px;
left: 100px;
width: 400px;
}
上面的元素越靠近 z-index的值越大 z-index =
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
表格显示
<div id="tableContainer">
<div id="tableRow">
.....
</div>
</div>
div#tableContainer{
display:table;
}
div#tableRow{
display: table-row;
}
display: table-cell; <!-- 在main和sidebar中加入 使得<div> 作为单元格-->
border-spacing: 表格中的单元格的边框间距。（border-spacing和外边距创建的空间不会折叠！）
vertical-align: 确保表格两个单元格中所有内容相对于单元上边对齐。
H5标记
- <header> 页眉
- <section> 区块
- <footer> 页脚
- <aside> 侧边栏
- <article> 文章
- <time> 时间 <time datatime="2012-02-18"> 2/18/2012 </time>
- <nav> 导航栏
- <source> source标记有src的属性
- <video> 视频 chrome：.wedm
- <object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash
- <mark> 突出显示
- <audio> 声音内容
- <canvas> JS绘制的图像和动画
- <figure> 代码清单
header.top img#headerSlogan{ float: right; }
<body>
<header class="top">
<img id="headerLogo"
src="image/header......">
<img id="headerSlogan"
src="image/....>
</header>
</body>
...
- list-style-type : 项目符号
<video>元素工作
controls 提供控件，控制视频和音频的播放
autoplay 一旦加载就开始播放
poster 未播放时会显示这个图像
preload 细粒度地控制视频如何加载 （none、metadata 下载元数据、auto）
loop 循环播放
<video controls autoplay width="512" height="288" src=".../...mp4"
poster=".../..png" id="video">
</video>
<source>视频格式
type 文件类型
video/ogg 类型指定的容器格式
codecs 编解码器对视频和音频编码
theora 视频编解码器
vorbis 音频编解码器
<source src="video/ tweetsip.ogv" type='video/ogg; codecs="theora, vorbis" '>
建立表格
H5
<table>
<caption>
标题在浏览器中显示在表格上方
</caption>
<tr> 某一列的表头
<th> 表头是前后排列的</th>
<th> 1 </th>
<th> 2 </th>
<th> 3 </th>
</tr>
<tr>
<td> 每个元素包含表格中的一个单元格</td>
<td> 每个单元格分别构成一列</td>
<td> 所有的td构成一行---表格数据</td>
</tr>
</table>
CSS
- 边框折叠：
border-collapse: collapse; - 表行上色： ntd-child（）伪类
类:伪类 {属性} e.g. p:ntd-child(odd) { background-color: blue;} - 表格跨行：
rowspan=" 数字" - 表格跨列：
colspan="数字" - 定制表格标记：
list-style-image: url (images/ backpack.gif)
建立表单
- <select> 下拉菜单
- <option> 下来菜单的选项
