CSS 语法学习笔记 | 青训营
CSS(Cascading Style Sheets) 层叠式样式表
CSS 引入方式
| 引入方式 | 内容 | 备注 |
|---|---|---|
| 行内样式 | 直接在元素上，加style属性 | 优先级最高 |
| 内部样式表 | 直接写在<head>标签内，添加<style>标签 | |
| 外部样式表 | 用<head>标签内的<link>标签引入样式文件 |
CSS 盒子模型
同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
CSS 如何进行工作
CSS 选择器
// 通配选择器
* {
}
// 标签选择器
h1 {
}
// id 选择器
#logo {
}
// class 选择器 {
}
// 选择器组
body,h1,h2,h3,h4,h5,h6,ul,ol,li {
margin:0;
padding:0;
}
选择器的组合
选择器的优先级
选择器的特异度(Specificity)：通过计算特异度来判断选择器的优先级
例如
继承
某些属性会自动继承其父类的计算值，除非显式指定一个值
显式继承
* {
box-sizing: inherit; // 该属性默认不继承，因此指定所有元素继承父类的box-sizing
}
html {
box-sizing: border-box;
}
.some-widget {
box-sizing: content-box;
}
初始值
-
CSS中，每个属性都有一个初始值
- background-color 的初始值为transparent
- margin-left 的初始值为 0
-
可以使用initial关键字显式重置为初始值
- background-color: initial
文本格式化
颜色
-
RGB：R(Red)、G(Green)、B(blue)
-
HSL：H(Hue)、S(Saturation)、L(Lightness)
-
alpha(透明度) [0-1]
rgba(255,0,0,1) hsla(0,100%,50%,1)
字体(Font-Family)
-
通用字体族
-
Web Fonts
通过插入url，浏览器渲染时会尝试通过url下载该字体文件
@font-face { font-family:"Megrim"; src:url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5wjvLqJZVam_hVUdI1w.woff2) format('woff2'); } -
font-size
-
font-weight
-
line-height(行高)
-
white-space(空格)
overflow
滚动条 visible hidden scroll
块级 & 行级
| Block Level Box | Inline Level Box |
|---|---|
| 不和其它盒子并列摆放 | 和其它行级盒子一起放在一行或拆 开成多行 |
| 适用所有的盒模型属性 | 盒模型中的width、height不适用 |
| display: block | display: inline |
displsy 属性
- block：块级盒子
- inline：行级盒子
- inline-block：本身是行级，可以放在行盒中；
- none：排版时完全忽略
CSS 布局技术
CSS 提供了多种布局技术，用于控制元素在页面上的位置和排列。
- 流动布局（Flow Layout）：元素按照其在HTML中出现的顺序自上而下流动排列。
- 浮动布局（Float Layout）：通过将元素浮动到左侧或右侧，实现元素的排列和文本环绕效果。
- 弹性布局（Flexbox）：通过使用
display: flex属性，实现灵活的盒子模型布局。 - 网格布局（Grid Layout）：通过使用
display: grid属性，实现二维网格布局。
总结
通过青训营课程学习和相关文献阅读，熟悉了
- CSS 引入方式
- CSS 工作原理
- CSS 选择器
- CSS 继承原理
- oveerflow、块级&行级(displsy属性)
了解了：
- CSS 布局技术：流动布局、浮动布局、弹性布局、网络布局
