认识css | 青训营笔记

73 阅读2分钟

这是我参与【第四届青训营】笔记创作活动的第一天

一 、认识css

css有三种用法:

外链,嵌入,内联。 各自的用法如图所示:

屏幕截图 2022-07-25 184443.jpg

css是如何工作的?

打开页面时,HTML加载时创建DOM树,HTML解析时,css通过外链或者嵌入,内联进入解析,最终展示出页面。

image.png

Selector选择器

1.作用

找出页面中的元素,一遍给他们设置样式。

2.选择器选择元素的方式?

1.按照标签名、类名或者id; 2.按照属性; 3.按照DOM树中的位置;

id和class的区别

class可以使用多个,所以一般用class来进行修饰

属性选择器

定义:通过属性进行选择 只要有这个属性就可以选中。属性匹配上就可以进行选择

伪类选择器

不同情况下的状态是不同的,(比如鼠标选中和未选中) 使用伪类选择器就可以实现,鼠标点击后的状态显示不同。 除了状态伪类选择器,还有很多其他选择器

几种常见的选择器组合

image.png

选择器组

用逗号“,”进行隔开用到的选择器就可以实现使用多个选择器。

颜色

1.三原色 红黄蓝 利用 rgb(0,0,0)中的数据进行调节。 老版的需要用到 rgba(0,0,0,0)

2.颜色鲜艳程度

3.饱和度(偏暗或者偏亮)

字体设计

image.png 使用Web Fonts进行字体设计,中文的字体同样可以用来修饰。 font.size设置字体格式。

继承

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

布局

布局的定义 1.确定内容的大小和位置的算法 2.一句元素、容器、兄弟节点和内容等信息来计算。