前端-理解CSS | 青训营笔记

107 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第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.持续学习