前端与 HTML ｜ 青训营笔记

星河xh
163 阅读1分钟

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

一、本堂课重点内容：

  • 理解CSS

二、详细知识点介绍：

1. CSS是什么

image.png

2. CSS基础代码即其组成

image.png

     1：选择器    2：属性     3：属性值     4：声明
  
     多条声明用分号隔开放在大括号里

3. 在页面中使用CSS

(3种方法，推荐外链)

image.png

页面完整例子：

image.png

image.png

4.浏览器CSS工作过程

image.png

5.选择器

image.png

‘*’ 匹配所有

image.png

标签设置样式

image.png

id需要唯一

image.png

比较常用

image.png

根据特定值选择元素

image.png

image.png

伪类

image.png

1> . 状态伪类

链接

image.png

输入框

image.png

2> . 结构性伪类

image.png

image.png

image.png

image.png

image.png

image.png

6. 颜色-RGB

rgb

image.png

image.png

hsl

image.png

image.png

image.png

透明度

image.png

image.png

7.字体

字体样式

image.png （不同设备字体有限）

image.png

image.png

image.png

字体大小

image.png

image.png

效果

image.png

粗细（100~900）

image.png

image.png

行高

image.png

image.png

image.png

image.png

8.特异度

image.png

image.png

9.继承

image.png

image.png

10.初始值

image.png

11.CSS求值过程

image.png

image.png

image.png

12.布局

image.png

image.png

image.png

盒子模型

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

13.盒子摆放规则

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

行盒，块盒 image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png image.png image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

avatar
文章
阅读
粉丝