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

一、本堂课重点内容：

了解什么是CSS
CSS的基础内容

二、详细知识点介绍：

了解CSS

CSS是什么(Cascading Style Sheets)

用来定义页面元素的样式

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

如何使用CSS

外链(推荐)
嵌入
内联(不推荐)

CSS是如何工作的

Pasted image 20230116103418 (小).png

CSS基础内容

选择器

找出页面中的元素，以便给它们设置样式

类别

*：通配选择器
标签选择器
类选择器：.开头
id选择器：#开头

伪类(类选择器)

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

状态伪类例如超链接中的lv(f)ha原则
- a:link - 未访问过(a标签独有)
- a:visted - 访问过(a标签独有)
- :focus - 拥有焦点
- :hover - 鼠标悬停
- :active - 鼠标按下
结构伪类
- first-child
- last-child
- ...

组合

我们可以将不同的选择器进行组合

Pasted image 20230116112630 (小).png

优先级

当同一个元素有多个声明的时候，浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值

优先级计算(从高到低)

内联样式(最高)
id选择器
类选择器
标签选择器

Pasted image 20230116153601 (小).png

优先级一致时，看先后顺序，后面的会覆盖前面的

可以使用!important来覆盖其他任何声明，慎用！！！ 例子:

p {
  color: red !important; /* 覆盖其他样式 */
}

.box p {
  color: blue;
}

在vscode中把鼠标移到选择器上，可以预览定位到元素和查看优先级

Pasted image 20230116151408.png

颜色相关

RGB
HSL
- Hue(色相)：色彩的基本属性(0-360)
- Saturation(鲜艳程度)：越高越香艳(0-100%)
- Lightness(亮度): 越高越亮(0-100%)
alpha(透明度)：越小越透明(0-1)

字体

font-family：指定多种不同的字体作为字体族，提供页面显示的备选字体，以防某些用户电脑没有首选字体，建议最后加上一个通用字体族，当用户没有之前的所有字体时，浏览器会选择用户本地选择一个属于该通用字体族的字体来展示页面
使用Web Fonts，先在加载某种字体，在显示页面，解决了字体问题，但增加了资源消耗
font-size
- 预设值：small，medium, large
- 长度：px, em
- 百分数(相对于父元素字体大小)
line-height
font-weight：粗细(100 - 900)
font-style
缩写 font: style weight size/height family
text-align(对齐方式)
spacing(间距)
text-index(首行空格)
text-decoration
white-space(空格的显示)

调试CSS

右键点击页面，选择检查
使用快捷键F12

三、课后个人总结：

今天学习的内容比昨天多了很多，最常见的颜色，字体相关的，还有很重要的排版相关的和盒模型，还有如何css是怎么计算值的，排版和一些内容看来不是很懂，笔记也就没有体现，后面会补回来的

四、引用：

字节内部课
CSS优先级
LVHA原则

走进CSS ｜ 青训营笔记