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

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 课后作业-4-CSS基础-20201009

博主信息

博文 4

粉丝 0

访问量 4440

专题推荐

更多>

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 直接得到