这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。
1.CSS 代码构成
选择器(Selector)
选择器(Property)
属性值(Value)
声明(Declaration) = Property + Value
2.CSS 使用方法
在页面中使用外链
<!-- 外链 -->
<link rel="stylesheet" href="">
内嵌
<!-- 内嵌 -->
<style></style>
内联
<!-- 内联 -->
<p style=""></p>
3.CSS是如何工作的？
4.CSS 流程之选择器组、文本渲染
-
选择器(Selector)
找出页面中的元素，以便于给他们设置样式 -
使用多种方式选择元素：
按照标签名、类名或id
按照属性
按照DOM树中的位置
通配
<style>
* {
color: aqua;
font-size: 32px;
}
</style>
<h2>通配</h2>
<p>内联</p>
标签
h2 {
color: red;
}
<h2>通配</h2>
<p>内联</p>
id (需要唯一)
#a {
color: aqua;
font-size: 32px;
}
<h2>通配</h2>
<p id="a">内联</p>
类
.b {
color: blue;
}
<p class="b">类选择器</p>
属性
[disabled] {
background: #eee;
color: #999;
}
<label>用户名</label>
<input type="text" value="zhao" disabled/>
<label>密码</label>
<input value="12345" type="password">
伪类
a:link {
color: black;
}
a:visited {
color: #999;
}
a:hover {
color: orange;
}
a:active {
color: red;
}
<a href="https://www.baidu.com">百度</a>
组合(Combinators)
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:foucs |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A>B | 选中B，如果它是A的子元素 | section>p |
| 兄弟选择器 | A~B | 选中B，如果它在A后且和A同级 | h2~p |
| 相邻选择器 | A+B | 选中B，如果它紧跟在A后面 | h2+p |
5.调试 CSS
- 右键点击页面，选择检查
- 使用快捷键
Ctrl+Shift+I (windows)
Cmd+Opt+I (Mac)
6.CSS 选择器的特异度
- 特异度
| #(id) | .(伪/类) | E(标签) | |
|---|---|---|---|
| #nav .list li a:link | 1 | 2 | 2 |
| .hd ul.links a | 0 | 2 | 2 |
7.CSS 继承
某些属性会自动继承其父元素的计算值，除非显示指定一个值
初始值
- CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为О
- 可以使用initial关键字显式重置为初始值
- background-color: initial
8.CSS 求值过程解析
9.CSS 布局方式及相关技术
-
布局(Layout)是什么？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
-
布局相关计算
- 常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
- 浮动
- 绝对定位
- 常规流
