理解CSS|青训营笔记

小塔_Zrea
109 阅读2分钟

理解CSS|青训营笔记

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

css 选择器

image-20220725113216108.png css 的三种引用方式

外链（推荐）

嵌入

内联

css 是如何工作的

image-20220725113455711.png

选择器 Selector

  • 找出页面中的元素，以便给他们设置样式 使用多种方式选择元素 按照标签名、类名或id 按照属性 按照DOM树中的位置

通配选择器 * 选择所有

标签选择器

id选择器

类选择器 给某一些元素设置样式

属性选择器 比如 [disabled] 、 input[type = "password"]

image-20220725114113692.png

第一个是选中以#开头、第二个是选中以$结尾 来设置样式

伪类(pseudo-classes)

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

  • 几种伪类

    • 状态伪类 如 ：focus
    • 结构性伪类 如 ：first-child

组合(Combinators)

名称 语法 说明 示例 直接组合 AB 满足A同时满足B input:focus 后代组合 A B 选中B,如果它是A的子孙 nav a 亲子组合 A>B 选中B,如果它是A的子元素 section p 兄弟选择器 A~B 选中B,如果它在A后且和A同级 h2 p 相邻选择器 A+B 选中B,如果它紧跟在A后面 h2 p

颜色RGB

红绿蓝rgb(0,0,0) 十六进制 #000 = #000000 可简写用一个代替两个

颜色 HSL

image-20220725115440881.png

指定颜色值 用关键字 如black white

alpha 透明度

#ff0000ff rgba(255,0,0,1) hs1a(0,100%，50%,1)

字体font-family image-20220725120447474.png 确保要有通用字体，建议：在中英混合页面中，英文字体要在中文字体前面

强制使用某种字体 使用Web Fonts

font-size

  • 关键字

    • small、medium、large

  • 长度

    • px、em

  • 百分数

    • 相对于父元素字体大小

行高

line-height

在html 中多个空格会被合并

使用 css 的 white-space 来进行调整

深入理解CSS

根据选择器的特异度决定那条样式生效

继承

某些属性会自动继承其父元素的计算值，除非显式指定如个值 如宽度

显示继承

image-20220725135741418.png

初始值

  • CSS中，每个 属性都有一个初始值

    • background-color的初始值为transparent
    • margin-left的初始值为0

  • 可以使用initial关键字显式重置为初始值

    • background-color:initial

css 求值过程

image-20220725140013989.png

image-20220725140332902.png

image-20220725140517185.png

布局(Layout)是什么？

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点积
  • 内容等信息来计算

布局相关技术

  • 常规流 (行级 块级 表格布局 FlexBox Grid布局)
  • 浮动
  • 绝对定位
avatar
文章
阅读
粉丝