这是我参与
「第四届青训营」笔记创作活动的第2天
什么是CSS
CSS指层叠样式表(Cascading Style Sheets)
- 用于定义页面元素样式
- 将样式定义存储在样式表中，能方便修改和使用，极大提高工作效率
- 能设置文本字体和颜色、位置和大小、添加动画效果
CSS基本用法
CSS的编写格式主要由两部分组成
选择器 和 声明块
- 选择器指需要改变样式的HTML元素
- 声明由属性和属性值组成，用冒号隔开
选择器概述
类型
- 根据标签名、类名、ID(ps:id名需要唯一)
- 按照属性
- 按照DOM树中的位置
- 伪类：不基于标签和属性定位(状态伪类,结构性伪类)
选择器组合方式
优先级
简要概括为越特别的选择器级别越高 : ID名 > class名 > 标签名
优先级高的选择器会覆盖低级别的选择器
如何使用CSS
- 通过
<link>标签引用外部单独的CSS文件(外部样式表) - 通过
<style>标签在HTML的<head>头标签中定义样式表(内部样式表) - 直接在相关标签中使用
style样式属性(内联样式)
// 推荐使用外部样式
CSS如何工作
在进入一个网页时，首先加载HTML，然后解析HTML，当HTML中引入了CSS时会同时加载CSS并解析，当HTML解析完成时，根据DOM树浏览器会将相应的样式添加到对应的节点中，再渲染出页面。
CSS中的属性
颜色
- RGB
- HSL
- ALPHA(不透明度)
字体
font-family
font-size：
- 关键字 small\medium\large
- 长度 px\em
- 百分数 font-weight
white-space
layout（布局）
布局相关技术（常规流、浮动、绝对定位）
- width
- height
- padding
- border
- margin
- box-sizing
- border-box
- overflow
- 块级、行级
- display
- BFC排版规则
- flex box
- flexibility（弹性）
- flex-grow
- flex
grid布局
- display-grid(划分网格)
- grid line
- float
- position
