深入CSS（上）| 青训营

用户1415385661368
91 阅读4分钟

CSS（上） 笔记

CSS是什么？

  • Cascading Style Sheets(层叠样式表）

  • 用来定义页面元素的样式

    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果

CSS是一种用于描述网页样式和布局的标记语言。它与HTML（超文本标记语言）一起使用，为网页提供了外观和样式。

CSS的基本语法

h1{
   color:white;
   font-size:14px;
   }

h1选择器（Selector）：选中页面中的一些元素，给其定义样式。

color选择器（Property）:选中元素之后，设置其样式相关属性值。

white属性值（Value）

font-size:14px;声明（Declaration）

CSS由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，声明块包含一系列属性和值，用于定义元素的样式。

例如，下面的CSS代码将选择所有<h1>元素，并将其文本颜色设置为红色：

css复制代码h1 {
  color: red;
}

选择器的特异度（Specificity）

image.png

特异度：选择其的特殊的程度。越特殊优先级越高。

id优先级最高

继承

  • 某些属性会自动继承其父元素的计算值，除非显示指定一个值。
  • 一般和文字相关的是可继承的，和和模型相关的是不可继承的
  • 当一个元素是不可继承的，它是会用到初始值，或许可继承但没有继承到，也会使用到初始值

显示继承

image.png

box-sizing为不可继承属性，使用*让不可继承可继承。inherit为关键字。

初始值

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

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

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

    • background-color:inital

CSS求值过程解析

image.png

浏览器拿到html之后，会将其解析成DOM树。

filtering：对应用到该页面的规则用以下条件进行筛选：选择器匹配，属性有效，符合当前media等

声明值：Declared Values，一个元素的某属性可能有0到多个声明值。比如：p{font-size:16px}和p.text{font-size:1.2em}

cascading:按照来源、！important、选择器特异性、书写顺序等选出优先级最高的一个属性值

层叠值：cascaded value,在层叠过程中，赢得优先级比赛的那个值。比如：1.2em

defaulting：当层叠值为空的时候，使用继承或初始值

image.png

指定值：Specified Value,经过cascading和defaulting之后，保证指定值一定不为空

resolving：将一些相对值或者关键字转化成绝对值，比如em转化为px，相对路径转化为绝对路径

计算值：Computed Value，一般来说，浏览器会在不进行实际布局的情况下，所能得到的最具体的值，比如60%

formatting：将计算值进一步转换，比如关键字、百分比等转换为绝对值

使用值：Used Value，进行实际布局时使用的值，不会再有相对值或关键字。比如400.2px

image.png constraining：将小数像素值转为整数

实际值：渲染时实际生效的值，比如400px

布局（Layout）是什么？

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

布局相关技术

  • 常规流
    • 行级
    • 块级
    • 表格布局
    • FlexBox
    • Grid布局
  • 浮动
  • 绝对定位

盒模型

image.png

默认情况下指定Content

width

  • 指定content box宽度
  • 取值为长度、百分数、auto
  • auto由浏览器根据其他属性确定
  • 百分数相对于容器的content box宽度

height

  • 指定content box高度
  • 取值为高度、百分数、auto
  • auto取值由内容计算得来
  • 百分数相对于容器的content box高度
  • 容器有指定的高度时，百分数才生效

padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器的宽度

image.png

border

  • 指定容器边框样式、粗细和颜色 image.png

  • 三种属性：

    • border-width

    • border-style

    • border-color

  • 四个方向

    • border-top

    • border-bottom

    • border-left

    • border-right

image.png

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度
  • 使用margin：auto水平居中 image.png

学习建议

对于0基础来学习，建议先把前面CSS基础知识看一下，然后再上深入课程。

avatar
文章
阅读
粉丝