理解CSS | 青训营笔记

VII
85 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天，整理一下昨天上课关于前端开发中CSS部分的内容。

一、本堂课重点内容

  1. 什么是CSS，CSS的基本结构及用法
  2. CSS是如何工作的
  3. CSS中的选择器，选择器的组合及选择器之间的优先级关系
  4. CSS中的常见属性

二、详细知识点介绍

1. 什么是CSS

Cascading Style Sheets（级联样式表）

用于定义页面元素的样式

基本结构：选择器 + 声明（属性 + 属性值）

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

2. 如何在页面中使用CSS

  • 外链：<link rel="stylesheet" href="/assets/style.css">
  • 嵌入：
<style>
    // 这里是CSS内容
</style>
  • 内联（不推荐）：<p style="font-size: 14px">段落内容</p>

3. CSS如何工作

基本原理：

CSS工作原理.png

深入原理：

  1. 匹配声明值
  2. 筛选优先级高的声明值
  3. 若层叠值为空，则使用继承或初始值

image.png

  1. 将相对值或关键字转换为绝对值，将相对路径转换为绝对路径，获得使用值
  2. 在对使用值进行规整后得到实际值

image.png

4. 选择器Selector

作用：找出页面中的元素，以便给他们设置样式

方式：

  • 通配选择器（*）

  • 标签选择器（通过标签名）

  • id选择器（通过页面唯一的id标识）

  • 类选择器（class）

  • 属性选择器

    • [disabled]
    • [href="xxx"]
    • [href^="#"]匹配 href 属性值以 # 开头的标签
    • [href$=".jpg"]匹配 href 属性值以 .jpg 结尾的标签

  • 伪类选择器：不基于标签和属性定位元素

    • 状态伪类：:link（链接的默认状态）、:visited（已访问的链接）、:hover（鼠标悬停）、:focus（处于焦点的状态）
    • 结构性伪类：:first-child（父标签下的第一个子标签）、:last-child

选择器的组合

名称语法说明示例
直接组合AB满足A同时满足Binput: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

更多关于选择器的内容参考：CSS 选择器参考手册 (w3school.com.cn)

选择器组：使用逗号进行分割多个选择器，为所有选择器指定相同的样式

选择器的优先级（计算特异度）：

行内样式优先级最高；

其次是id选择器，每出现一次则在百位数上加一；

然后是类选择器、属性选择器和伪类选择器，每出现一次则在十位数上加一；

优先级最低的是元素选择器和伪元素选择器，每出现一次则在个位数上加一。

最终得到的权重总和越大，则代表该选择器的优先级越高。

5. 常见CSS属性

（1）颜色

RGB：#000000、rgb(0,0,0)

HSL：hsl(0,100%,100%)

Hue：色相（0-360）；Saturation：饱和度（0-100%）；Lightness：亮度（0-100%）

常用关键字：red、blue等

透明度：#ff0000ff、rgba(255,0,0,1)、hlsa(0,100%,50%,1)

alpha 值越小越透明

（2）字体

font-family：浏览器在定义的所有字体中选择本地存在的一种字体（按照定义的先后顺序）

通用字体族：只表示一类效果的字体，不指定某一种具体字体，如Serif、Sans-Serif、Cursive、Fantasy、Monospace等

使用建议：

  • 在设置字体时应至少指定一种保底的通用字体族
  • 英文字体放在中文字体前面

使用Web Font：

@font-face {
    font-family: "myfont";
    src: "http://xxx.woff2" format("woff2");
}

p {
    font-family: myfont;
}

为避免字体资源过大，可以根据页面某字符是否出现对字体文件进行裁切

font-size：

  • 关键字：small、medium、large
  • 长度：px、em（相对于父标签的字体大小）、rem（相对于根标签的字体大小）
  • 百分数：相对于父元素字体大小

font-style：normal、italic（斜体）

font-weight：100 - 900（400 为 normal，700 为 bold）

line-height：行高（每行文字的base-line之间的距离），如1.6表示行高为字体大小的1.6倍

text-align：left、center、right、justify

spacing：

  • letter-spacing
  • word-spacing

text-indent：为1em时表示向右缩进一个字符的大小，为负数时表示向左缩进

text-decoration：none、underline（下划线）、line-through（删除线）、overline（上划线）

white-space：normal、nowrap（不换行）、pre（保留空白符）、pre-wrap（保留空白符，但是正常进行换行）、pre-line（合并空白符序列，但是保留换行符）

三、课后个人总结

这节课主要讲解的是关于CSS的基本使用和工作原理，其中重难点在于选择器部分，选择器的组合以及选择器的优先级计算都是重难点，需要在实践中熟悉和掌握。

关于CSS中最复杂的布局部分将在下一篇文章中进行总结~

四、引用参考

avatar
文章
阅读
粉丝