1.样式样式的来源

  1. 1.继承样式:元素会从父元素或祖先元素上继承样式
  2. 2.默认样式:浏览器都会为元素设置一些默认的样式
  3. 3.自定义样式:使用style里设置的样式属性

1.1 继承样式实现:

1.1.1 继承样式代码:

  1. <div style="color:red">
  2. <h1>Hello World</h1>
  3. <p>默认样式</p>
  4. </div>

1.2 默认样式实现:

1.2.1 默认样式代码:

  1. <h1>默认样式</h1>

1.3 自定义样式实现:

1.3.1 自定义样式代码:

  1. <h1 style="color: green">自定义样式</h1>

2.元素样式的优先级

  1. 优先级:自定义样式>默认样式>继承样式

2.1 优先级演示:默认样式>继承样式

2.1.1 优先级:默认样式>继承样式 代码:

  1. <div style="font-size: 20px">
  2. <h1>Hello World</h1>
  3. <p>默认样式</p>
  4. </div>

2.2 优先级演示:自定义样式>默认样式>继承样式

2.2.1 优先级:自定义样式>默认样式>继承样式 代码:

  1. <div style="font-size: 20px">
  2. <h1 style="font-size: 50px">Hello World</h1>
  3. <p>默认样式</p>
  4. </div>

2.自定义样式的来源

  1. 1.内联样式:给元素添加“style属性”
  2. 2.文档样式:给当前html文档添加'style标签',仅适用于当前HTML
  3. 3.外部样式:将多个页面中公用的样式,写到一个外部css文档中

2.1 自定义样式代码:

  1. html:
  2. <link rel="stylesheet" href="css/zuoye.css" />
  3. ......
  4. <div>
  5. <h1 style="color: red">内联样式</h1>
  6. <h1 class="wendang">文档样式</h1>
  7. <h1 class="waibu">外部样式</h1>
  8. </div>
  9. <style>
  10. .wendang {
  11. color: blue;
  12. }
  13. </style>
  14. zuoye.css:
  15. .waibu{
  16. color:violet;
  17. }

2.2 自定义样式的实现:

2.3 自定义样式的优先级:

  1. 内联样式>文档样式>外部样式

2.3.1 自定义样式的优先级:文档样式>外部样式

html代码:

  1. <div>
  2. <h1 style="color: red" class="wendang">内联样式</h1>
  3. <h1 class="wendang waibu">文档样式</h1>
  4. <h1 class="waibu wendang">文档样式</h1>
  5. <h1 class="waibu">外部样式</h1>
  6. </div>
  7. <style>
  8. .wendang {
  9. color: blue;
  10. }
  11. </style>
  12. zuoye.css:
  13. .waibu{
  14. color:violet;
  15. }

实现:

2.3.2 自定义样式的优先级:内联样式>文档样式>外部样式

html代码:

  1. <div>
  2. <h1 style="color: red" class="wendang">内联样式</h1>
  3. <h1 class="wendang waibu">文档样式</h1>
  4. <h1 class="waibu wendang">文档样式</h1>
  5. <h1 class="waibu">外部样式</h1>
  6. </div>
  7. <style>
  8. .wendang {
  9. color: blue;
  10. }
  11. </style>
  12. zuoye.css:
  13. .waibu{
  14. color:violet;
  15. }

实现:

3常用选择器

3.1 基本选择器:

  1. 元素 = 标签 + 属性
  2. 基本选择器分为:标签选择器,属性选择器,群组选择器,通配选择器:

3.1.1 标签选择器:

html+css代码:

  1. html:
  2. <h2>新手1314</h2>
  3. <h2>新手1314</h2>
  4. <h2>新手1314</h2>
  5. <h2>新手1314</h2>
  6. <h2>新手1314</h2>
  7. <h2>新手1314</h2>
  8. <h2>新手1314</h2>
  9. <h2>新手1314</h2>
  10. css:
  11. h2{
  12. color:red;
  13. }

实现:

3.1.2 属性选择器:

html+css代码:

  1. html:
  2. <h2>新手1314</h2>
  3. <h2 biaoqian="bq">新手1314</h2>
  4. <h2 class="two">新手1314</h2>
  5. <h2 id="three">新手1314</h2>
  6. <h2>新手1314</h2>
  7. <h2>新手1314</h2>
  8. <h2>新手1314</h2>
  9. <h2>新手1314</h2>
  10. css:
  11. h2 {
  12. color: violet;
  13. }
  14. //属性选择器
  15. h2[biaoqian="bq"] {
  16. color: blue;
  17. }
  18. h2.two {
  19. color: red;
  20. }
  21. h2#three {
  22. color: aqua;
  23. }

实现:

3.1.3 群组选择器

html+css代码:

  1. html:
  2. <h2>新手1314</h2>
  3. <h2 biaoqian="bq">新手1314</h2>
  4. <h2 class="two">新手1314</h2>
  5. <h2 id="three">新手1314</h2>
  6. <h2>新手1314</h2>
  7. <h2 class="four">新手1314</h2>
  8. <h2 id="five">新手1314</h2>
  9. <h2>新手1314</h2>
  10. css:
  11. h2 {
  12. color: violet;
  13. }
  14. //属性选择器
  15. h2[biaoqian="bq"] {
  16. color: blue;
  17. }
  18. h2.two {
  19. color: red;
  20. }
  21. h2#three {
  22. color: aqua;
  23. }
  24. //群组选择器
  25. h2.four,
  26. h2#five {
  27. color: rgb(65, 65, 66);
  28. }

实现:

3.1.4 通配选择器

html+css代码:

  1. html:
  2. <h2>新手1314</h2>
  3. <h2 biaoqian="bq">新手1314</h2>
  4. <h2 class="two">新手1314</h2>
  5. <h2 id="three">新手1314</h2>
  6. <h2>新手1314</h2>
  7. <h2 class="four">新手1314</h2>
  8. <h2 id="five">新手1314</h2>
  9. <h2>新手1314</h2>
  10. css:
  11. h2 {
  12. color: violet;
  13. }
  14. //属性选择器
  15. h2[biaoqian="bq"] {
  16. color: blue;
  17. }
  18. h2.two {
  19. color: red;
  20. }
  21. h2#three {
  22. color: aqua;
  23. }
  24. //群组选择器
  25. h2.four,
  26. h2#five {
  27. color: rgb(65, 65, 66);
  28. }
  29. //通配选择器 可用!important提权
  30. body * {
  31. color:yellow;
  32. }

实现:

4.权重选择器分析方法

  1. 权重选择器:(0,120id 1:class 2:tag,也就是标签

(1,0,1) 实现 (three为id,h2为标签):

(0,1,1) 实现 (two为class,h2为标签) :

(0,0,1) 实现 (h2为标签):

(1,1,1) 实现 (three为id,two为class,h2为标签):

更多相关文章

  1. 10个常见的 Android(安卓)新手误区
  2. Android主题与Toolbar样式之间的关系
  3. android string.setSpan
  4. [导入]2010-03-06 传智播客—Android(六)通知、样式、主题、HTML
  5. 【Appetite】ionic3实录(四)微调Segment,并引出自定义组件概念
  6. Android字体多样式和动画TextDrawable
  7. Android新手入门2016(10)--GridView
  8. 新手使用APICloud可视化开发搭建商城主页
  9. 10个常见的 Android(安卓)新手误区

随机推荐

  1. Android学习——android:cacheColorHint=
  2. Android Studio首次运行卡在Fetching and
  3. 一个提供Android各历史版本在线源码的网
  4. 转载——android 有用的知识
  5. Android MVVM之Databinding(二) 使用篇
  6. Android高手进阶教程(七)之----Android
  7. Android中实现跑马灯效果
  8. android 实现左右滑动效果
  9. Android的Recovery中font_10x10.h字库文
  10. Android上的Adobe AIR应用程序运行环境发