CSS学习|青训营笔记

Bug_ERROR
84 阅读8分钟

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

CSS基础

此部分主要包括：CSS的定义、CSS的工作原理、选择器、颜色、字体相关。

CSS的定义

CSS是一种样式表语言，用于描述 HTML 或者 XML 文档的样式表现。

CSS示例

选择器Selector {
    属性Property: 属性值Value; 
}

CSS的使用方式

CSS有三种使用方式：内联、嵌入、外链。

  1. 内联

<p style="margin: 1em 0">This is a example.</p>

2.嵌入

<style>
    body {
        width: 100px;
        height: 100px;
    }
</style>

3.外联

<link rel="stylesheet" href="xxx.css">

在编码过程中尽可能使用外链的方式，这样可以做到CSS和HTML的职责分离。不推荐使用内联样式。

CSS工作原理

screenshot-20220725-101105.png

选择器

选择器的作用

选择器（选择符）就是根据不同的需求把不同的标签选出来，以便给他们设置样式。

选择器选择元素的方式：

  • 按照标签名、类名或者ID
  • 按照属性
  • 按照在DOM书中的位置

常见的选择器类型：

通配选择器

*{
  width: 100px;
}

功能：匹配出现的所有HTML元素。

元素选择器

div{
  width: 100px;
}

功能：匹配是所有元素名相同的元素。

类选择器

.className{
  width: 100px;
}

功能：匹配所有类名相同的元素，可同时定义多个元素的样式。

id选择器

#idName{
  width: 100px;
}

功能：匹配对应ID的元素（保持唯一性）。

属性选择器

/* 存在 href 属性并且属性值以"example"开头的<a> 元素 */
a[href^="example"] {
  font-size: 2em;
}

/* 存在 href 属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

CSS属性选择器的详解补充见

CSS 属性选择器详解 (w3school.com.cn)

>`j[属性选择器语法中^=等的使用问题](https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2FAttribute_selectors "https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors")

伪类/元素选择器

它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候，他们表现的会像是你向你的文档的某个部分应用了一个类一样，帮助在标记文本中减少多余的类，提高代码的灵活性和可维护性。

具体可分为两种类型：动态伪类和结构伪类

动态伪类：用户以某种方式和文档和交互时应用，也可理解为伪元素在某种特定状态时被选中。

  • 表单：:disbaled（禁用）、:enabled、:checked、:invalid（输入内容无效）
  • :link、:visited、:hover、:active

结构伪类：根据元素在DOM树中的位置进行选中

  • :first-child、:last-child

选择器的组合方式

名称语法说明
直接组合AB同时选中A和B
后代组合A B当它是A的子孙，选中B
亲子组合A>B当它是A的子元素，选中B
兄弟选择器A~B当它在A的后面且和A同级，选中B
相邻选择器A+B当它紧跟在A的后面，选中B

选择器组

将相同样式的选择器组合在一起，并用逗号分隔

h1,h2,h3,h4,h5,h6{
  color: red;
}

颜色

CSS中使用颜色的三种方式： RGB模型、HSL模型、关键字。

RGB模型： #000000或rgb(0,0,0)

HSL模型： hsl(100,30%,50%)

  • Hue:色相（0~360）

  • Saturation:饱和度，取值越高颜色越鲜艳（0~100%）

  • Lightness:亮度，取值越高颜色越明亮（0~100%）

关键字：yellow

透明度alpha:取值越高越不透明（0-1）

`#ff006e`、`rgba(200,0,0,0.42)`、`hsla(0,100%,50%,0.42)`

字体相关

字体族

5种通用字体族：

  • Serif 衬线体；
  • Sans-Serif 无衬线体；
  • Cursive 手写体；
  • Fantasy：梦幻字体族；
  • Monospace：等宽字体。

字体族的一些注意事项：

1.font-family 属性中的字体族名称应使用字体的英文 Family Name ,其中如有空格，需放置在引号中。 2.按照去「西文在前、中文字体在后」、「效果佳的字体在前、效果一般的字体在后」的顺序编写。 3.在最后必须指定一个通用字体族。 4.font-family 不区分大小写，但在同一个项目中，同样的Family Name 大小写必须统一。

一般来说字体族同时设置多个以解决设备兼容性问题，匹配规则按照从前往后的方式进行匹配。

远程字体：使用@font-face,

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

附上mdn文档

空白设置：white-space,mdn文档white-space可辅以进行学习。

CSS选择器优先级

在常规情况下，样式的优先级规则一般为：!import > style > id > class > 元素,但在有多类选择器同时存在的情况下判断优先级，就需要更进一步的计算。

优先级使用A、B、C、D四个值进行判度，对应的计算规则如下：

  • 如果存在内联样式则A为1，否则为0；
  • B为ID选择器出现的数量；
  • C为类选择器、属性选择器、伪类选择器出现的个数；
  • D为标签选择器和伪元素选择器出现的个数；

经过上述计算，我们会得到一个组合数ABCD，组合数最大的，优先级最高。当优先级相同时，遵循后面的优先级更高的原则。

样式属性的覆盖与冲突

覆盖：当样式属性相同的情况下，遵循优先级高的覆盖优先级低的，后面的覆盖前面的这个原则。

继承：当样式属性没有设置且可以继承的时候，它会自动继承其父元素的计算值，除非用inherit属性显示指定一个值。

显示继承示例如下：

*{
    box-sizing : inherit;
   }
 html {
    box-sizing : border-box;
 }
   
   .some-widget {
    box-sizing : content-box;
 }

初始值：属性的默认初始值，CSS中的每个属性都有一个初始值。

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

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

  • background-color:initial

CSS求值过程

CodePen - 青训营/CSS/取值过程 (cdpn.io)

如上图所示，CSS属性计算过程的流程描述如下：

  1. HTML解析成DOM树，解析过程中将从CSS中搜集的样式放在一起组成样式规范；
  2. 对样式规范进行筛选，获得符合规则的一组声明值；
  3. 按照优先级顺序选出优先值最高的属性值即层叠值；
  4. 若层叠值为空，此时采用继承或使用初始值的方法得到指定值（指定值一定不为空）；
  5. 将一些相对值转换为绝对值，从而获得计算值（此时，属性值之中的关键字、百分比等还没有转换）；
  6. 进一步将计算值转换从而获得使用值（此时的使用值中存在小数，要结合实际环境才能得到使用值）；
  7. 将小数转换为整数，从而得到实际值。

布局

定义

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

CSS中的布局相关技术主要有三种：常规流、浮动和绝对定位，其中常规流包括行级、块级、表格布局、Grid布局和FlexBox。

首先，我们来了解下盒模型，基本结构如下图所示。

屏幕截图 2022-08-05 231612.png

Width

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

Height

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

margin

  • 取值可为长度、百分数、auto（将margin-left/margin-right均设为auto可实现水平居中。
  • 百分数相对于容器宽度。

Overflow：有三种状态可设置，表示不同的溢出状态，分别为visible、hidden、scroll

盒模型一共有两种，分别为content-box和border-box,上面提到的是一个content-box盒模型。border-box盒模型如下图所示：

屏幕截图 2022-08-05 233314.png

这两种盒模型的基本组成大致相同，但是width和height的计算方式不同。

  • 在content-box盒中，width和height只包含content。
  • 在border-box盒中，width和height由content + padding + border组成。

这两种盒模型可以使用box-sizing属性进行转换。

   box-sizing:content-box;
   box-sizing:border-box;

块级元素和行级元素的比较

屏幕截图 2022-08-05 233820.png

屏幕截图 2022-08-05 233834.png

我们可以通过设置display属性来控制块级盒子和行级盒子的转换。

屏幕截图 2022-08-05 234118.png

行级排版上下文IFC与块级排版上下文BFC

screenshot-20220725-151914.png

screenshot-20220725-152227.png

对于BFC深入学习可参阅此文档，可能是最好的BFC解析了...

flex box

flex box是一种新的排版上下文，它可以控制子级盒子的：

1.摆放的流向 2.摆放的顺序 3.盒子宽度和高度 4.水平和垂直方向的对齐 5.是否允许折行

详细可参考CSS3 弹性盒子(Flex Box)_w3cschool

Grid布局

grid布局

avatar
文章
阅读
粉丝