1. <blockquote> 长文本引用标签
2. <br> 换行标签
3. 空格标签
4. <hr> 添加水平横线
5. <address> 地址标签,默认斜体
6.<code> 标签,代码标签。
7.<pre> 大段代码标签
8. <ul><li></li></ul> 标签,列表标签
9. <ol></ol> 有序列表标签
10.<div></div> 板块标签
11. <div id ="xxx"></div> 命名
12. 表格标签 <table></table> <tbody></tbody>
<tr></tr> <th></th> <td></td>
13. 表格摘要与标题 <table summary=""></table> <caption></caption>
14. <a href=""></a> 链接标签
15. <a href="" target="_blank"></a> 在新的浏览器窗口中打开链接
16. 链接email地址 <a href="mailto:"></a>
17. <img src=""> 图片标签
18. 表单标签,与用户交互 <form></form>
19. 文本出入框,密码输入框 <input type="text/password" name="" value="">
20. 文本域 <textarea rows="" cols=""></textarea>
21. 单选框,复选框 <input type="radio/checkbox" name="" value="" checked="">
22. 下拉列表框 <option value="" selected=""></option>
23. 下拉列表框多选 <select multiple="multiple"><option value=""></option>
</select>
24. 提交按钮 <input type="submit" value="提交">
25. 重置按钮 <input type="reset" value="重置">
26. label 标签 为鼠标用户改进可用性 <label></label>
27. css 字体颜色 大小 加粗 p{ color:red; font-size:12px; font-weight:bold;}
28. css 内嵌样式 <p style="color: red; font-size: 12px"></p>
29. 嵌入式样式 <style type="text/css">
span{ color: red; }
</style>
30. css样式单独文件 <link rel="stylesheet" type="text/css" href="base.css">
31. 三种方法的优先级 内嵌式>嵌入式>外部式
32. 选择器 例 span{ color:red } 其中span 即为选择器
33. 类选择器 例 .stress{ color:red } 根据类名进行选择
34. id选择器 例 #stressP{ color:red } 根据id进行选择
35. id选择器与类选择器的区别 类选择器可以使用多次 id选择器只能使用一次 类选择器可以使用选择器列表设置多个样式而id选择器不能使用列表
36. 子选择器 .food>li{ color:red }
37. 包含选择器 .food li { color:red} 包含选择器不同于自选择器,子选择器值指向直接后代,而包含选择器指向所有后代,包括孙子代等
38.通用选择器 *{color:red } 指向所有标签
39.伪类选择符 鼠标滑过的状态 来设置字体的颜色 a:hover( color:red; )
40.分组选择器 h1,span{color:red;} 相当于 h1{color:red;} span{color:red}
41. 有一些css的样式是具有继承性的
42. 标签选择器的权值为1 类选择器的权值为10 id选择器的权值为100 继承的权值很低为0.1
43. 层叠 如果有相同权值的 处于最后的css样式会被应用
44. 为某一样式设置最高权值 p{color:red!important;}
45. 字体 body{ font-family:"宋体";}
46. 字号颜色 body{font-size:12px; color:#666;}
47. 粗体 body{ font-weight:bold;}
48. 斜体 body{ font-style:italic;}
49. 下划线 a{text-decoration:underline;}
50. 删除线 a{text-decoration:line_through;}
51. 缩进 p{text-indent:2em;}
52. 行间距,行高 p{line-height:1.5em}
53. 中文字间距 字母间距 h1{ letter-spacing:50px }
54. 对齐 h1{ text-align:center }
55. 块级元素 <div></div> <p></p> <h1></h1> <form></form> <ul></ul> <li></li>
a{display:block;} 转换为块状元素
(特点 : 独占一行 可以设置高宽)
56.内联元素 <span></span> <a href=""></a> <strong></strong> <em></em>
div {display:inline;}
(特点 : 和其他元素在同一行上 不能设置高宽)
57.内联块状元素 <img src=""> <input type="" name="">
a{display:inline-block}
(特点 : 和其他元素在同一行上 可以设置高宽)
58.盒子模型 标签:<div> <ul> <ol> <p> <h> <table>等块级标签
内填充padding,边框border,外边距margin
59.边框 border div{ border:2px solid red; }
60.单独设置一个边框 div{border-bottom : 1px solid red ;}
61.盒子模型 宽度和高度 padding border margin
62. 填充 即设置 padding div{padding :20px 10px 15px 30px;}
63. 边界 即设置 margin div{ margin : 20px 10px 15px 30px ;}
64. css 布局模型 流动模型(flow) 浮动模型(float) 层模型(layer)
65. 流动模型 块状元素自上而下垂直延伸分布 , 内联元素从左到右水平分布显示
66. 浮动模型 使得块状元素并排显示 div{float:left;}
67. 层模型 对图层的精确定位操作 分为三种
绝对定位(position:absolute) 相对定位(position:relative) 固定定位(position:fixed)
68. 绝对定位 div{ position:absolute;left:100px;top:50px; }
69. 相对定位 div{ position:relative;left:100px ;top:50px; }
70. 固定定位 div{ position:fixed ;left:50px;top:100px;}
71. relative 与 absolute 组合使用
72. 盒子模型代码简写 margin:10px 15px 12px 14px ;
73. 颜色值缩写 略
74. 字体缩写 在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
75. 长度值 px 基于像素 em 百分比 基于 font-size
76. 水平居中设置-行内元素 通过给父类元素设置 text-align:center 实现
77. 水平居中设置-定宽块状元素 设置左右 margin值为auto 来实现居中
例 : div{ margin:20px auto; }
78.不定块状元素居中 加入table标签
设置 display:inline 方法
设置 position:relative 和left:50%
79.垂直居中-父元素高度确定的单行文本: 设置父元素的 height 与 line-height 高度一致来实现
80.垂直居中-父元素高度确定的多行文本: 使用插入table 同时设置 vertical-align:middle
父元素高度确定的多行文本: 设置为表格单元显示 display:table-cell;vertical-align:middle;
81. 隐性改变display类型 设置 position:absolute 或者 float:left/right 会使得元素的类型自动变为
display:inline-block