CSS学习 | 青训营笔记

57 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

一、走进前端技术栈——css

CSS是什么

  • 全称:Cascading Style Sheets.
  • 用来定义页面元素的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 增添动画效果

基础代码样式

image.png

在页面中使用CSS

外链(最常用 ) 嵌入 内联

image.png

CSS是如何工作的

image.png

选择器

通配选择器 id选择器 类选择器 属性选择器

伪类

什么是伪类

不基于标签和属性定位元素

几种伪类

  • 状态伪类:元素处于某种状态下才被选中
  • 结构性伪类

关系组合

image.png

###选择器组 比如选中多个标签

image.png

颜色

rgb(红,绿,蓝) hsl(色相,饱和度,亮度) alpha:透明度

字体

一般多准备几个字体,浏览器自动选择。 使用web fonts。

深入css(上)

选择器的特异度

继承

某些属性会自动继承其父元素的计算值,除非显式指定一个值。

显式继承

image.png

初始值

image.png

css的求值过程

image.png

image.png ##布局(Layout)是什么?

布局相关技术

常规流 浮动 绝对定位

盒子

image.png ##块级vs行级

image.png #深入css(下)

Flex box是什么?

image.png

Flexibility

image.png