【字节第二届青训营】01.16 理解CSS

1 CSS是什么： Cascading Style Sheets 用来定义页面元素的样式 设置字体颜色 设置位置和大小 添加动画效果 2 基本规则： h1{color：white；font-size：14px； } 选择器Selector、选择器Property 属性值Value、声明Declaration 3 在页面中使用CSS： 外链、嵌入、内联 4 CSS如何工作

选择器Selector： 通配选择器、标签选择器、id选择器、类选择器、属性选择器 伪类pseudo-classes：不属于标签和属性定位元素 状态伪类、结构性伪类 组合标签、属性、类 选择器组

颜色 红绿蓝RGB：#000000 16进制 rgb(0-255,0,0) HSL色相饱和度亮度 hsl(0-360,100%,50%) 关键字 透明度：0～1

字体font-family 通用字体族： 字体列表最后写上通用字体族 英文字体放在中文字体前面 web Fonts

font-size：关键字small medium large、长度px em、百分数 相对于父元素字体大小 斜体 粗细

间距：line-height font：style weight size/height family text-align：left center right justify spacing：letter-spacing word-spacing text-indent text-decoration：none underline...

white-space：normal、nowrap、pre、pre-wrap、pre-line

选择器的特异度 继承：某些属性会自动继承其父元素的计算值，除非显示指定一个值 显示继承：inherit 初始值

CSS求值过程

布局layout是什么 确定内容的大小和位置的算法 依据元素、容器、兄弟节点和内容等信息来计算 布局相关技术： 常规流（行级、块级、表格布局、FlexBox、Grid布局） 浮动、绝对定位

高度 宽度 padding（指定元素四个方向的内边距 百分数相对于容器的宽度）border、margin、overflow