了解CSS ｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第3天 CSS是什么？ Cascading Sty

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

CSS是什么？

Cascading Style Sheets
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

页面中使用CSS的三种方法：

推荐外链，JavaScript (行为)、CSS (样式)、HTML (内容) 相分离，更容易阅读和维护。

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">

<!-- 嵌入 -->
<style>
  li { margin: 0; list-style: none; }
  p { margin: 1em 0; }
</style>

<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>

CSS 基本样式：

CSS规则 = 选择器 + 声明块

微信截图_20220725111248.png

CSS 是如何工作的？

微信截图_20220725111742.png

CSS 选择器（Selector）

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

ID选择器：选中的是对应id值的元素
标签选择器
类选择器：.”类名”
属性选择器
通配符选择器

伪类 (pseudo-classes)

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类

状态伪类：处于特定的状态才会被选中，如：链接

颜色

颜色设置--RGB 相关函数：1.rgb(x,y,z)

--HSL 相关函数：hsl(x,y%,z%)

--alpha透明度调节

字体设置

font-family:”字体名字”，”字体名字”，，，，，”字体名字”

使用建议：

字体列表最后写上通用字体族
英文字体放在中文字体前面

font-size:

关键字：small，mediu，large

长度：px,em

百分数：相对于父元素字体大小

font-weight:字体粗细数值

Line-height：设置每行文字的间距

上面的属性可以写在一个font当中，格式是：

font:style(样式） weight（粗细） size（大小）/height（行高） family(字体族）

text-aligin文本对齐：left,center,right,justify

letter-space文本间距：字母之间的间距，word-space单词之间的间距

Text-indent缩进

text-decoration 文本修饰

white-space:

normal：在默认情况下,多个连续空白符会被合并为一个空百符，

nowrap:段落内的文字只在一行中展示

pre:保留字节写的所有内容

pre-wrap:一行内显示不下则换行

pre-line:合并空格

调试 CSS

右键点击页面，选择「检查」
使用快捷键
- ```
Ctrl+Shift+I (Windows)
```
- ```
Cmd+Opt+I (Mac)
```

了解CSS ｜ 青训营笔记