这是我参与「第四届青训营 」笔记创作活动的的第2天
一、CSS是什么
Cascading Style Sheets,缩写为CSS,又称为串样式列表、级联样式表、串接样式表、阶层式样式表。是一种用来为结构化文档添加样式。 用来定义页面元素的样式。
1.设置字体的颜色
2.设置位置和大小
3.添加动画效果
CSS的工作
1.根据页面生成一颗DOM树 2.将解析出来的CSS附加到DOM树上,变成一颗渲染树 3.通过渲染树展示页面
二、选择器Selector
找出页面中的元素,以便给他们设置样式
使用多种方法选择元素
1.按照标签名、类名或id
2.按照属性
3.安装DOM树中的位置
三、组合Combinators
1.直接组合 AB
2.后代组合 A B
3.亲子组合 A>B
4.兄弟选择器 A~B
5.相邻选择器 A+B
四、颜色RGB
透明度alpha
字体font-family
字体大小font-size
行高line-height
文字装饰text-decoration
五、布局Layout
1.常规流
行级、块级、表格布局、FlexBox、Grid布局
2.浮动
3.绝对定位
六、常见属性
宽度width
高度height
内边距padding
边框border
外边距margin
文字颜色(前景色)color
文字的装饰线text—decoration
对齐方式text—align 缩进text—indent
七、块级VS行级
1.块级:不和其它盒子并列摆放、适用所有的盒模型属性
2.行级:和其他行级盒子一起放在一行或拆开成多行、盒模型中的height不适用
3.display属性
块级盒子:block
独占父元素一行
行级盒子:inline
本身是行级,可以放在盒中,可以设置宽高:inline-block
排版时完全被忽略:none
隐藏方法:display:none;
八、学习CSS的建议
1.充分利用MDN和M3C CSS规范
2.保持好奇心、善用浏览器的开发者工具
3.持续学习