说明：有难得有简单的，尽量都要做完，我尽量包含多的知识点，如有错误，题比较难理解，欢迎指正。

基础部分

1. 浏览区缺省设置，外部样式表，内部样式表，内联样式，这四个的优先度如何。
2. 颜色的表示方式有哪些。
3. 怎样同时使用多个选择器
4. 使用一下ID选择器
5. 使用一下类选择器
6. 现有10个div，有的有title属性，有的没有，使用属性选择器选中有title这个属性的div
7. 现有10个div，有的有title属性，有的没有这个属性，带有title属性的，值也不一样，现使用属性选择器选中属性值是demo的div。
8. 现有10个div，有的有title属性，有的没有这个属性，带有title属性的，值也不一样，现使用属性选择器选中属性值中包含demo的div。
9. 现有10个div，有的有title属性，有的没有这个属性，带有title属性的，值也不一样，现使用属性选择器选中属性值是zh或者是zh-开头的
10. 现在有10个input元素，选中属性type是text的input
11. 选中某属性值以zh开头的
12. 选中某属性值以zh结尾的
13. 选中某属性值包含zh的
14. 在head中手写一个连接外部样式表的方法吧

背景篇

15. 给p标签设置一个背景颜色
16. 给a标签设置一个背景图片
17. 设置背景图片纵向重复
18. 把背景图像定位在中间，为了保证这个属性在opera和firefox中正常运行，还要添加一个什么设置？写出来，记住。
19. 设置背景图像在左上，右下。
20. 使用百分比值把背景图像设置在中间的位置
21. 使用像素单位设置背景图像的位置。
22. 怎样防止背景图像随着页面滚动条而滚动
23. 怎样把背景图像，颜色，重复，定位，是否滚动放在一个声明中。

文字篇

24. 给一段文字添加一个缩进，在块级元素和内联元素中，缩进的方式是否有不同，都演示一下看看。
25. 演示一下缩进的继承
26. text-align到底是干嘛的？另外针对阿拉伯语和希伯来语之类的语言，该怎样做。
27. text-algin和center标签的异同。
28. 设置单词之间的间距
29. 设置字母的间距
30. 设置全部英文大写
31. 设置全部英文小写
32. 设置首字母大写
33. 修改文本修饰，去除文本修饰，添加下划线，添加上划线，添加贯穿线，添加闪动效果。
34. 怎样去除文字中多余的空格
35. 怎样保留文字中多余的空格
36. 怎样使文字不可以换行，除非使用了br
37. 怎样可以使文字可以保留空格同时可以自动换行。
38. 怎样可以使文字去除空格但是保留换行，同时允许自动换行。

39. 针对以上，放一个小小的参考

    
    
    参考
40. direction是干嘛的，怎么使用，适用于什么元素。
41. 给文字设置一个阴影

字体篇

42. css中五种通用的字体系列都是什么，请默写出来。
43. 怎样设置字体
44. 怎样设置多个字体，设置多个字体的时候要注意什么？
45. font-style属性是干嘛的，有哪些值？

46. 怎样把文字设置成下面这样的？
    示例
47. 设置字体大小
48. 设置字体加粗，以值的形式设置
49. px，em，rem这几个单位有什么不同。

链接篇

50. 设置为被访问过链接的样式
51. 设置已经被访问过链接的样式
52. 设置鼠标移动上去的时候链接的样式
53. 设置正在点击的时候的链接的样式
54. 这4中状态有什么要求。

列表篇

55. 怎样修改列表项中的标志类型
56. 有哪些标志类型
57. 怎样把标志类型设置为图像
58. 怎样简写列表样式
59. list-style-position是干嘛的，怎么使用
60. 怎样在一个声明中定义所有列表属性

表格篇

61. 完成这个效果

    
    
    演示
62. border-collapse这个属性是干嘛的

63. 实现下面这个效果
    演示
64. 给表格添加一个高度和宽度
65. 设置表格内文字对其方式
66. 设置表格内文字的水平对其方式
67. 给每个单元格一个内边距！
68. 给表格一个背景颜色！
69. 设置表格每个单元格之间的距离！
70. 设置表格标题的位置！参考
71. 设置是否显示空白的单元格，参考
72. table-layout是干嘛的，有哪些值？

轮廓篇

72. 现在有个段落p，给这个段落一个边框，然后再给一个轮廓，tip：outline，设置样式，颜色，宽度

框模型/盒模型

概述

73. 描述一下框模型
74. 框模型的宽度个高度是怎么计算的
75. 如何改变框模型的宽度高度计算方式

内边距篇

76. 内边距是什么？怎么设置？

边框篇

77. 边框是什么，怎么设置？

外边距篇

78. 外边距是什么，怎设置，使用2个值的时候，顺序是怎么样的。

外边距合并篇

80. 什么是外边距合并，显示一下，有几种情况会发生外边距合并？都写出来。
81. 外边距合并的意义在哪？举一个例子。

定位

概述

82. 什么定位可以使元素脱离文档流，
83. 描述position中的四个属性的意思。
84. 怎样处理溢出元素，设置成隐藏，滚动，自动。
85. 怎样剪切一个图像，case

86. 图片和文字对其方式怎么设置？

    
    
    演示

相对定位篇

87. 解释一下什么是相对定位，会不会脱离文档流，位置计算是怎样的？

绝对定位篇

88. 解释一下什么是绝对定位，会不会脱离文档流，是怎样计算位置的？

浮动

89. 浮动会不会脱离文档流？
90. 解释一下浮动的原理是什么。
91. 多个元素一起浮动会发生什么情况？
92. 如果容器的宽度不够了会发生什么？
93. 清除浮动的原理是什么?

94. 实现这个效果

    
    
    演示

95. 实现这个效果

    
    
    演示

96. 完成这个效果

    
    
    演示

97. 使用浮动完成这个布局，
    演示
    
    

    参考html：

<div class="container">

<div class="header"><h1 class="header">W3School.com.cn</h1></div>

<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>

<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3School.com.cn you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>

<div class="footer">Copyright 2008 by YingKe Investment.</div>
</div>

CSS选择器

元素选择器篇

98. 选中文档中的h1标签。
99. 同时选中文档中的h2和p元素

选择器分组篇

类选择器篇

100. 选中文档中的demo类
101. 选中p标签中包含的demo类
102. 选中即包含demo类的又包含hello类的元素

ID选择器篇

103. 使用一个ID选择器吧~

属性选择器篇

104. 选中含有title属性的所有元素
105. 选中所有带有href的a元素
106. 选中所有电邮href和title属性的a元素
107. 选中所有带有alt属性的img元素
108. 演示一下怎么在XML文档中使用属性选择器
109. 选中herf等于“http://www.baidu.com”的a元素
110. 选中class值是demo hello的p元素
111. 选中class的值中包含demo值的p元素
112. 选中title中以en开头的p元素
113. 选中title中以en结尾的p元素
114. 选中title中包含en的p元素
115. 选中title中属性值等于en或者以en-开头的p元素

后代选择器篇

116. CSS选择器中有空格和每空格有啥区别
117. 后代选择器是什么，怎么用。

子元素选择器篇

118. 写一个子元素
119. 子元素选择器必须选择直接子元素吗？

相邻兄弟选择器篇

120. 选择紧接在h1元素后面的p元素。

伪类篇

121. 使用伪类完成，链接的样式，包括未点击，点击过，鼠标滑过，鼠标按下的样式
122. 伪类结合类用一下
123. focuse这个伪类是怎么使用的
124. 现有10个li，选中第一个，
125. 同上，选最后一个
126. 同上，选偶数
127. 同上，选奇数
128. lang这个伪类怎么使用？

伪元素篇

129. 给文本的第一个字母添加特殊样式。
130. 给文本的首行添加特殊样式
131. 给元素之前添加特殊样式
132. 给元素之后添加内容

高级

对齐篇

133. 使用margin居中对其一个块元素
134. 把一个元素垂直居中对其
135. 把一个元素放置在另外一个元素正中央，可以使用flex。

136. 使用float完成这个

     
     
     演示

尺寸篇

137. 使用元素的最大尺寸有什么意义？
138. 行高有什么意义，有哪些具体的使用场景。

分类篇

139. 内联元素和块级元素到底有什么异同
140. 把鼠标样式设置为小手

导航栏篇

141. 写一个水平导航条
142. 写一个垂直导航条

图片库篇

图片透明篇

143. 把一张图片设置为办透明的。

144. 实现这个效果
     演示

媒介类型篇

145. 媒介查询都有哪些属性，分别是干嘛的？
146. 演示一下媒介查询的屏幕查询

注意事项篇

CSS3

边框篇

147. 给一个矩形添加一个圆角
148. 给一个矩形添加一个阴影，并且说明每个值的意义

149. 给一个div添加一个边框图片。
     演示
     
     
     素材

背景篇

150. 调整一个body的背景图像的大小
151. context-box,padding-box,border-box都是什么？
152. 怎样利用以上这几个属性规定背景图像的起源。
153. 给一个body同时添加两个背景图像看看会发生什么？
154. background-clip是干嘛的，演示一下

文本效果篇

155. 给图片添加一个阴影。
156. word-wrap这个属性是干嘛的，怎么使用？
157. word-break是干嘛的，怎么使用？
158. 如果一个容器的文本溢出了怎么处理成显示···
159. text-justify属性是干嘛的？

字体篇

160. 定义一个自己的字体吧！要求要有多个格式的文件。
161. 在定义一个自己的字体，要求要设置自己加粗。
162. 运用一下自定义的字体吧！

2D转换篇

163. 把一个div从原本的位置沿x轴移动100px，沿着y轴移动50px。
164. 把一个div从原本的位置顺时针旋转30度
165. 把一个div横向方法2倍，纵向放大3倍。
166. 摆一个元素沿x轴斜切30度，沿y轴斜切60度。
167. 解释一下这行代码的意思：

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

168. transform-origin是什么属性，是干嘛的，怎么使用？

3D转换篇

167. 使div围绕x轴旋转120度。
168. 使div围绕Y轴旋转100度。

过度篇

169. 一个提示，过渡是transition，说明一下这个属性怎么使用。
170. 怎么可以让动画效果延迟2s出现？

动画篇

171. 定义一个动画，背景颜色从红色变成绿色。
172. 应用这个动画，设置动画执行的时间。
173. 使用百分比的方式定义一个四步的动画。
174. 设置动画延迟2s后执行。
175. 设置动画反复执行。
176. 设置动画无限循环。
177. 简写动画执行方式，提示：动画名，运行时间，运行方式，延迟执行时间，是否循环执行，是否下一个动画周期逆向播放。

多列篇

178. 把一个div中的文字分为三列。
179. 设置每列文字的间隙是40px。
180. 设置每列之间的分割线的样式。
181. 设置分割线的颜色和宽度。
182. 设置文字跨越3列。
183. 把宽度和列数写到一起。

用户界面

184. 写一个div，并且允许用户更改div的大小。
185. 更改盒模型的计算方式。
186. 给元素设置一个outline，设置距离元素的距离。

站外资源，flex布局等。