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>
  15. zuoye.css:
  16. .waibu{
  17.   color:violet;
  18. }

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>
  13. zuoye.css:
  14. .waibu{
  15.   color:violet;
  16. }

实现：

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>
  13. zuoye.css:
  14. .waibu{
  15.   color:violet;
  16. }

实现：

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>
  11. css:
  12. h2{
  13. color:red;
  14. }

实现：

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>
  11. css:
  12. h2 {
  13.   color: violet;
  14. }
  15. //属性选择器
  16. h2[biaoqian="bq"] {
  17.   color: blue;
  18. }
  20. h2.two {
  21.   color: red;
  22. }
  24. h2#three {
  25.   color: aqua;
  26. }

实现：

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>
  11. css:
  12. h2 {
  13.   color: violet;
  14. }
  15. //属性选择器
  16. h2[biaoqian="bq"] {
  17.   color: blue;
  18. }
  20. h2.two {
  21.   color: red;
  22. }
  24. h2#three {
  25.   color: aqua;
  26. }
  27. //群组选择器
  28. h2.four,
  29. h2#five {
  30.   color: rgb(65, 65, 66);
  31. }

实现：

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>
  11. css:
  12. h2 {
  13.   color: violet;
  14. }
  15. //属性选择器
  16. h2[biaoqian="bq"] {
  17.   color: blue;
  18. }
  20. h2.two {
  21.   color: red;
  22. }
  24. h2#three {
  25.   color: aqua;
  26. }
  27. //群组选择器
  28. h2.four,
  29. h2#five {
  30.   color: rgb(65, 65, 66);
  31. }
  32. //通配选择器 可用!important提权
  33. body * {
  34.   color:yellow;
  35. }

实现：

4.权重选择器分析方法

  1. 权重选择器：（0,1，2）0：id  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关于分包方案、插件化动态加载APK
  2. Android学习路线（二十七）键值对（SharedPrefe
  3. Android(安卓)资源加载与匹配
  4. android系统编译jdk版本
  5. Android(安卓)Looper
  6. 两个Android选择文件对话框
  7. Android(安卓)5.0 技术新趋势
  8. Android界面刷新的方法
  9. Android(安卓)Intent 对象详解
  10. 转：编写高效的Android代码