课后作业-4-CSS基础-20201009

20201009-知识点（CSS基本概念、层叠规则、chrome查看技巧）

继承相关的 2 个关键字。 inherit(继承)和 initial(初值)，以前知道也在实际应用中继承，但没深入理解。通过老师授课才知道，如 color、font-size 等文本可以继承，而盒模型、表格等则不行。

一、CSS 的基本概念

CSS 本质: 样式复用
声明格式：属性:值组成；
```
      例 color:red;
```
声明块: 由一个或多个声明组成，包裹在大括号 {} 中。
选择器: 写在声明块前面的一个标识符(有时也称选择符)，用来选择页面中一个或多个元素。
```
      如#page-title,.title 或 h1
```
规则集: 选择器+声明块组成。格式：选择器{若干声明}
样式表来源
- 默认样式
  - 浏览器默认定义的，每个浏览器定义可能不相同
- 自定义样—我们可以自定义
  - 行内样式：是指元素的style 属性定义的样式
  - 内部样式：内部样式指网页中style 元素包裹的样式
  - 外部样式：式指由link 元素引入或 @import 导入的 css 文件。

使用实例

         <html>
         <!-- 外部样式 -->
         <link rel="stylesheet" href="style1.css" />  <!--link 引入外部样式文件 -->
         <style>@import url("style1.css");</style>    <!--@import引入外部样式文件 -->
         <!-- 内部样式 -->
         <style>
         #page-title { color: seagreen; }  <!-- id选择器 -->
         .title { color: slateblue; }      <!-- 类class选择器 -->
         h1 { color: steelblue; }      /* <!-- 元素tag选择器 --> */
         </style>
         <body>
         <header class="header">
             <h1 id="page-title" class="title" style="color:teal;">PHP中文网</h1>
         </header>
         <footer class="footer">
             <a class="page-a" href="#">&copy;www.php.cn</a>
         </footer>
         </body>
         </html>

二、样式层叠规则

样式冲突及处理规则
- 样式来源：一个元素的样式首先是浏览器的默认定义样式（用户代理样式），其次是用户自定义样式。
- 样式冲突：同一元素被重复定义了样式就是所谓的冲突，这时必须有个处理规则决定哪个生效。
样式冲突处理规则
- 两种结果：叠加或覆盖，即元素的相同声明进行覆盖，不同声明进行叠加。
- 两个规则：
  - 源码顺序—对整个网页来说是按源码顺序组成的总样式(虚拟的)，对某个元素来说要按优先级来确定最终样式。
  - 选择器优先级—元素选择器样式 < 类选择器样式 <’ID’选择器样式
    
    从上面源代码中可以看出，外部样式和内部样式区别只是定义形式不同，没有优先级之分。而行内样式相对外部样式或内部样式则有优先原则。
样式冲突优先级判断方法
- 将选择器的权重分为三级：id、class和tag。优先级:id>class>tag
- 先依据级别，再依据权重(或称为个数)
- 默认浏览器样式+外部或内部(按源码先后顺序）样式+行内样式——>总样式表
- 先要按源码顺序拼接总样式表，然后再按选择器优先级来决定最终效果。
- 计算取值方法
  
  (0,0,4)<(0,1,3)<(0,2,0)<(1,0,0)
  
  | 案例 | id | class | tag | 标识 |
  |—-|—-|—-|—-|—-|
  | html body header h1 | 0 | 0 | 4 | 0, 0, 4 |
  | body header.page-header h1| 0 | 1 | 3 | 0, 1, 3|
  | .page-header .title | 0 | 2 | 0 | 0, 2, 0 |
  | #page-title | 1 | 0 | 0 | 1, 0, 0 |
  - 应用实例
    
    通过调整选择器的写法调整样式的优先级
```html
<style>
/ 0, 0, 4 /
html body header h1 { color: red; }

/ 0, 0, 3 /
body header h1 { color: red; }

/ 0, 1, 3 /
body header.page-header h1 { color: green; }

/ 0, 1, 2 /
header.page-header h1 {color: red; }

/ 0, 2, 2 /
header.page-header h1.title {color: red; }

/ 0, 2, 0 > 0, 1,3/
.page-header .title { color: blue; }

/ 1, 0,0 /

page-title { color: cyan; }
</style>
```

三、样式表使用注意事项

尽可能不要用!important
为什么要不用或少用id选择器?
- 原因是级别太高, 丧失了灵活性
- id常用于绑定或锚点
为什么尽可能不用或少用tag选择器?
- 因为 css 的本质是为了”样式复用”，采用tag选择器不能使用到其它元素
- ag选择器常用于清除默认样式，如a清除下划线，导航中的li清除前面圆点。
尽可能在可用的情况下,使用 class 来完成
- 依语义结构化元素原理，内层元素基层继承其外层元素的样式定义
- 注意有的属性可以被继承,如颜色,字体等文本, 有的则不行, 如盒模型
二个关键字：
- inherit: 继承
- initail: 初值

四、利用chrome开发者工具查看样式表

操作提示
- 利用Chrome浏览器的Elements面板的Styles和Computed两个工具
- 勾选Computed的右侧的Show All复选框
样式定义拼接顺序

默认样式—->外部样式—->内部样式引—->行内样式

若有！important则它在行内样式后。
在chrome查看时,有删除线的声明就是覆盖,没有删除线就是叠加。
最终样式
- 可以通过上面讲的选择器优先级计算得到
- 也可以通过 Elements面板的Styles 中删除线来得到叠加的声明和覆盖的声明
- 最简单方式是通过 Elements面板的Computed 直接得到

20201009-知识点（CSS基本概念、层叠规则、chrome查看技巧）

一、CSS 的基本概念

二、样式层叠规则

page-title { color: cyan; }

三、样式表使用注意事项

四、利用chrome开发者工具查看样式表

相关文章