【书友汇-跟我学】CSS样式专题

CSS层叠部分专题学习：

1.元素内嵌样式（用元素的全局属性style样式）

2.文档内嵌样式（style元素内嵌）

3.外部样式（link 导入样式）

4.用户样式（用户定义样式）

5.浏览器样式（默认的浏览器样式）

执行顺序：按照全局样式，标签样式顺序执行。

CSS属性

1. margin-top: 0.25em;">

   border:元素边框 值：thin black solid;

2. font-size:文字字号

3. height:元素高度

4. padding:元素内容与边框距离

5. text-decoration:设置文字装饰效果

6. width:元素宽度

   CSS类写法结构分析：

   p.tip span{} p段落标签 .tip为标签下 class name span为正文中控制标签。

   • class="tip" 应用：<p class=""tip">
   • I like apple .对apple应用样式span.

     样式表导入：

• 样式表导入的数量不限，样式表导入次序，决定应用选择的最终效果，

• 一个样式表导入另一个样式表格式：@import "styles.css"

  CSS样式命名规则：

1. 头header

2. 内容 content/container

3. 尾：footer

4. 导航：footer

5. 侧栏：sidebar

6. 栏目：column

7. 页面外围控制布局宽度：wrapper

8. 左left 右right 中center

9. 登录条：loginbar

10. 标志：logo

11. 广告:banner

12. 页面主体：main

13. 热点：hot

14. 新闻 news

15. 下载 download

16. 子导航 subnav

17. 菜单 menu

18. 子菜单 submenu

19. 搜索search

20. 友情链接 frinedlink

21. 页脚 footer

22. 版权：copyright

23. 滚动：scroll

24. 标签页：tab

25. 文章列表：list

26. 提示信息：msg

27. 小技巧：tips

28. 栏目标题：title

29. 加入：joinus

30. 指南：guild

31. 服务：service

32. 注册：regsiter

33. 状态：status

34. 注释：/*Footer/

35. 内容区：/End Footer*/

    导航

36. 导航 nav

37. 子导航 subnav

38. 顶导航 topnav

39. 边导航 sidebar

40. 左导航 leftsidebar

41. 右导航 rightsidebar

42. 菜单 menu

43. 子菜单:submenu

44. 标题：title

45. 摘要：summary

46. 标志：logo

47. 广告：banner

48. 登陆：login

49. 登录条：loginbar

50. 注册：regsiter

51. 搜索：search

52. 功能区：shop

53. 标题：title

54. 加入：joinus

55. 状态：status

56. 按钮：btn

57. 滚动：scroll

58. 标签页：tab

59. 文章列表：list

60. 提示信息：msg

61. 当前的: current

62. 小技巧：tips

63. 图标: icon

64. 注释：note

65. 指南：guild

66. 服务：service

67. 热点：hot

68. 新闻：news

69. 下载：download

70. 投票：vote

71. 合作伙伴：partner

72. 友情链接：link

73. 版权：copyright\

    命名一个styles.css样式表，并写入样式，然后以下代码帮助把该样式导入到我们的页面中。