1009作业:
必做: css元素样式来源有哪些,实例演示
选做: css优先级冲突的解决方案
作业：
1.css元素样式来源有哪些?
index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css元素样式来源有哪些</title><link rel="stylesheet" href="static/css/common.css" /><style>h1 {color: red;font-size: 1rem;}</style></head><body><h1>一、当前文档，行内样式表style</h1><h2 style="color: rgb(38, 41, 207); font-size: 2rem">二、当前元素的属性，style="..."</h2><h3>三、外部公共属性：common.css</h3></body></html>common.cssbody {color: green;font-size: 3rem;border: 1px solid;}
效果图如下：
3.css优先级冲突的解决方案?
| 案例 | 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 |
注意事项
- 尽可能不要用
！important 尽可能不要用
id为什么要少用或者不用 ID ?
- 原因是级别太高，丧失了灵活性
- 为什么尽可能不用 TAG ?
- 因为 CSS 的本质是为了“样式复用”
- 尽可能在可用的情况下，使用 class 来完成
以下视频学习笔记
CSS 第一课
1.CSS 是什么
- CSS : cascade style sheet (层叠样式表)
- CSS 是编程语言吗？不是
- CSS 难吗？因人而异
- 核心：层叠，盒模型，单位(px/em/rem/vh/vw/fr)，定位，浮动
2.层叠
- 当一个元素可以被多种选择器匹配时，层叠可以解决样式设置上的冲突
3.层叠解决样式冲突的三种方案
- 1.样式表的来源
- 2.选择器的优先级
- 3.源码的顺序
4. 样式表的来源（自定义样式）
- 1.当前文档
<style> - 2.当前元素的属性：
style="..." - 3.外部公共样式：
common.css,jQuery.css,layui.css通过<link>标签引入
5.选择器的优先级
tag < class < id
6. 源码的顺序的影响
7. 用户代理样式
- 用户代理：就是浏览器，代理的是用户的 HTTP 请求，请求一个网络资源 URL
- 浏览器默认样式
8.选择器的优先级方案
| 案例 | 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 |
9.注意
- 尽可能不要用
！important 尽可能不要用
id为什么要少用或者不用 ID ?
- 原因是级别太高，丧失了灵活性
- 为什么尽可能不用 TAG ?
- 因为 CSS 的本质是为了“样式复用”
- 尽可能在可用的情况下，使用 class 来完成
10. 继承
- 有的属性可以被继承，如颜色，字体等文本，有的则不能，如盒模型
- 二个关键字
inherit: 继承initail: 初值
代码示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>层叠的意义</title><!-- 内部样式表，仅适合当前的文档 --><style>/* 标签：选择器selector *//* 选择器 规则集 rule */h1 {/* 声明 ： 属性color ：值green *//* 声明块 ： 使用大括号 将多个声明包裹起来 */color: green;font-weight: normal;}/*1.声明：由属性和属性值二部分组成2.声明块：由一个或多个声明，包裹在一对大括号中3.选择器：写在声明块签名的一个标识符，用来选择页面中一个或多个元素4.规则集：选择器和声明块组成 *//* #ID选择器 */#page-title {color: chartreuse;}/* class 类选择器 */.title {color: crimson;}</style></head><body><h1 id="page-title" class="title">我在PHP中文网学习PHP</h1><h1>php中文网：php.cn</h1><!-- 三个选择器，选中了同一个元素，但是呈现的效果却不一致，原因是这些选择器具有优先级 --><script>console.log(document.querySelector(".title"));console.log(document.querySelector("#pgge-title"));console.log()document.querySelector("h1");</script></body></html>
代码实例：选择器的优先级
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>选择器的优先级</title><style>h1 {color: red;}.title {color: green;}#page-title {color: blue;}</style></head><body><h1 class="title" id="page-title" style="color: yellow">我喜欢PHP中文网：php.cn</h1></body></html>
代码示例：继承
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="static/css/style1.css" /><title>继承</title></head><body><header><h1>我现在学习PHP编程</h1><h2>我现在学习CSS样式层叠</h2><p>来自中文PHP中文网学习</p><h3 class="red">老师晚上好</h3></header><footer>©php.cn版权所有</footer></body></html>css/* 0,0,4 */html body header h1 {color: red;}/* 0,1,3 */body header.page-header h1 {color: green;}/* 0,2,2 *//* header.page-header h1.title *//* 0,2,0 */.page-header .title {color: greenyellow;}/* 1,0,0 */#page-title {color: red;}.red {color: brown;}body {color: initail;font-size: 2rem;/* 边框不可以继承 */border: 1px solid;}