一、HTML表单

6. Insert title here
15. 账号:
19. 密码:
23. 性别:
24. 男
25. 女
29. 兴趣爱好:
30. 音乐
31. 看书
32. 打球
37. 头像上传:
58. 我已阅读并且自愿遵守此协议！
62. 城市:
64. 请选择
65. 北京
66. 上海
67. 广州
68. 深圳
69. 杭州
74. 简介：
    
75. 这是文本域的默认值

二、CSS

CSS指层叠样式表，样式定义如何显示HTML元素，样式通常存储在样式表中。

三、CSS如何使用

内联方式：样式定义在单个的HTML元素中

内部样式表：样式定义在HTML页的头元素中

外部样式表：将样式定义在一个外部的CSS文件中（.css）由HTML页面引用样式表文件

6. css样式演示
9. /*css的注释*/
10. h2{ color:red; }

17. CSS

18. CSS有三种样式

19. 1.内联样式

20. 2.内部样式

21. 3.外部样式

四、CSS规则特性

继承性：父元素的声明可以被子元素继承，如字体、颜色等。

层叠性：同一个元素若存在多个css规则，对于不冲突的声明可以叠加

优先级：同一个元素若存在多个css规则，对于冲突的声明以优先级高着为准。

6. css优先级演示
8. /*1.继承性：父元素的样式可以被子元素继承（颜色、字体）*/
9. body{
10. font-family:"楷体","微软雅黑";
11. }
13. /*2.层叠性：给一个元素设置不同的声明，其效果会叠加*/
14. h1{
15. color:red;
16. }
17. h1{
18. font-size:50px;
19. }
20. /*3.优先级:给同一个元素设置相同的声明，效果以后者为准，即就近原则*/
21. h2{
22. color:green;
23. }
24. /*.....*/
25. h2{
26. color:yellow;
27. }

31. HELLO WORLD!

32. 你好，世界！

五、CSS选择器

元素选择器：通过元素名来选择css作用的目标 比如

、

等

类选择器：允许以一种独立于文档元素的方式来指定样式 语法为:.className{ }

id选择器：选择id等于某值的唯一元素。以一种独立于文档元素的方式来指定样式，它仅作用于id属性的值*/

选择器组：写出一组选择器选中每个选择器所对应目标的并集

6. 选择器演示
8. /*2.类选择器：选择class等于某值的所有元素，class是程序员根据逻辑自己给元素增加的分类*/
9. .day{
10. color: blue;
11. }
12. /*3.id选择器：选择id等于某值的唯一元素。以一种独立于文档元素的方式来指定样式，它仅作用于id属性的值*/
13. #fighting{
14. color:red;
15. }
16. /*4.选择器组：写出一组选择器选中每个选择器所对应目标的并集*/
17. .day,#fighting{
18. font-weight: bold;
19. }
20. /*5.派生选择器*/
21. /*5.1选择某元素的子孙*/
22. #p5 b{
23. color:red;
24. }
25. /*5.2选择某元素的儿子*/
26. #p5> b{
27. font-size: 30px;
28. }
30. /*6.伪类选择器：根据元素的状态选择选择器*/
31. /*6.1选择未访问过的超链接*/
32. a:link{
33. color:green;
34. }
35. /*6.2选择已访问过的超链接*/
36. a:visited {
37. color: red;
38. }
39. /*6.3选择激活态（正在点）的按钮*/
40. #i1:active{
41. background-color: blue;
42. }
43. /*6.4选择有焦点的文本框、密码框、文本域*/
44. #i2:focus {
45. background-color: green;
46. }
47. /*6.5选择鼠标悬停态（触碰）的图片*/
48. img:hover{
49. width: 250px;
50. height: 250px;
51. }

55. 昨天又是忙碌的一天

56. 今天也是忙碌的一天

57. 后天又是忙碌的一天

58. 不管怎么样，生活还得继续呀

61. 北京市海淀区200号5号楼5号房
65. 百度
66. 淘宝
67. 错误的网站
79. 

边框：

6. Insert title here
9. /*1.四个边设置相同的边框*/
10. p{
11. border:1px dashed red;
12. }
13. /*2.单个边设置边框*/
14. /*left/right/top/bottom*/
15. h1{
16. border-left: 10px solid blue;
17. }
18. /*3.块元素一般宽度默认是100%，高度为自适应，内容越多，它越高。当给他固定高度时，可能会导致内容溢出，*/
19. p{
20. width: 300px;
21. height: 60px;
22. /*溢出时的处理*/
23. overflow:auto;
24. }

27. 李白

29. 李白（701年－762年） ，字太白，号青莲居士，又号"谪仙人"，是唐代伟大的浪漫主义诗人，
30. 被后人誉为"诗仙"，与杜甫并称为"李杜"，为了与另两位诗人李商隐与杜牧即"小李杜"区别，
31. 杜甫与李白又合称"大李杜"。据《新唐书》记载，李白为兴圣皇帝（凉武昭王李暠）九世孙，
32. 与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友。

边距：

6. Insert title here
8. div{
9. border:1px solid red;
10. width:100px;
11. height:100px;
12. }
13. /*1.四个边设置相同的边距()*/
14. #d1{
15. padding:20px;
16. margin:30px;
17. }
18. /*2.四个边设置不同的边距（上右下左）*/
19. #d2{
20. padding:10px 20px 30px 40px;
21. margin:40px 30px 20px 10px
22. }
23. /*3.单个边设置边距
24. left/right/top/bottom*/
25. #d3{
26. padding-left: 20px;
27. margin-bottom: 40px;
28. }
29. /*4.对边设置相同的边距*/
30. /*先上下 后左右*/
31. #d4{
32. padding:20px 40px;
33. margin:30px 10px;
34. }
35. /*5.对边设置边距的特例*/
36. /*在设置外边距时，若左右外边距值为auto，则该元素水平居中*/
37. #d5{
38. margin:20px auto;
39. }
43. d0
44. d1
45. d2
46. d3
47. d4
48. d5

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！