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

了解CSS

知识要点：CSS如何使用，如何工作，选择器，颜色，字体，调试CSS

CSS 是什么？

Cascading Style Sheets用来定义页面元素的样式

使用CSS（3种引入方式）

<!-- 外部样式表 -->
<link rel="stylesheet" href="xxx.css">

<!-- 内部样式表 -->
<style>
  *{
    margin: 0
  }
</style>

<!-- 行内样式表 -->
<p style="margin:1em 0">Example Content</p>

CSS如何工作？

选择器

😁基础选择器：标签选择器、通配选择器、类选择器、id选择器、伪类选择器（因为之前学过就不再细说，可自行前往MDN或菜鸟教程查阅）

🤔咱们来详细讲讲比较复杂的属性选择器和复合选择器

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

简单上手一下：

<style>
  [disabled] {
    color: red;  /* 包含有disabled的元素变红 */
  }
</style>
<a href="#">百度</a>
<a href="#" disabled>掘金</a>

常见用法：

[属性名] 用法如上
[属性名=xx]
[属性名^=xx] 以xx开头就会被选中
[属性名*=xx] 有包含xx就会被选中，不区分大小写
[属性名$=xx] 以xx结尾就会被选中

<style>
/*第二个：[属性名=值]*/
[align=center]{
  color:#00f;
}
  /*第三个：[属性名^=xx] 
先找到font标签  然后再来匹配color的属性值以#FF开头的元素*/
font[color^="#FF"]{
  border：1px solid #00f;
}
  /*第四个:[属性名*=xx] 
先找到font标签  然后再来匹配color的属性值包含aa的元素
并且不区分大小写*/
font[color*="aa"]{
  border：1px solid #00f;
}
  /*第五个：[属性名$=xx]
先找到font标签  然后再来匹配color的属性值以00结尾的元素*/
font[color$="00"]{
  border：1px solid #00f;
 }
</style>

复合选择器

🤔简单选择器组合变成复杂的选择器，一般标签放前面（eg ：input.error）

组合方式

直接组合：AB，满足A且B （如：input:focus）
后代组合：A B ,选中B，如果它是A的子孙（注意：AB之间是有空格的）（如：nav a）
亲子组合：A>B ,选中B，如果它是A的子元素（如：section > p）
兄弟选择器：A~B ，选中B，如果它在A后面且同级（如：h2 ~ p）
相邻选择器：A+B，选中B，如果它紧跟在A后面（如：h2 + p）

颜色

用#十六进制数和RGB表示（数值表示每种颜色的数量）

（光学三原色（RGB）：红、绿、蓝）

用HSL表示：

色相：色彩的基本属性，范围0-360；
饱和度：鲜艳度，范围0-100%；
亮度：明亮程度，范围0-100%。

用颜色的关键字表示（如：red、pink、green）
透明度

有时候我们会在rgb和hsl后面看到多出了一个a，或者看到#ff000000 （比上面的多了两位），而这多出的就是（alpha 透明度） alpha透明度：1为不透明，0为完全透明。

字体

字体属性

🤔先来看一行样式代码，然后我们来一一解释。

h1 {
  /* 斜体 粗细 大小/行高 字体族 */
  font: bold 14px/1.7 Helvetica, sans-serif;
}

第一个指的是：字体效果： font-style

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

请注意，不是所有的字体都有确切的 oblique 和 italic 字形，即便如此，浏览器也会通过使用现有的字形来模拟所缺少的字形。

第二个：字重：font-weight

第三个：字体大小：font-size
第四个：行高：line-height

用于设置行间的距离(行高)，可以控制文字行与行之间的距离

第五个：字体族：font-family

family表示有多个，可以指定多个字体，但确保在后面要加上通用字体族（保底）

文本属性

属性	表示
color	文本颜色
text-align	文本对齐
text-indent	文本缩进
text-decoration	文本修饰
spacing	间距
white-space	控制空白符

🤔 white-space 了解一下吧

normal：连续的空白符会被合并，换行符会被当作空白符来处理。
nowrap：连续的空白符会被合并，永不换行
pre：保留连续的空白格和行（保留换行是指遇到换行符或者'br'元素才换行）
pre-wrap：保留连续的空白格，保留换行，或一行显示不下才自动换行
pre-line：合并连续的空白格，保留换行，或一行显示不下才自动换行

调试CSS

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

- Ctrl+Shift+I (Windows)
- Cmd+Opt+I (Mac)

🤔个人总结

通过第一天的课程，了解了之前不曾接触的属性选择器，还巩固了基础的CSS知识，
对于怎样去掌握这些CSS知识呢？那当然是上手敲代码啊！键盘敲烂，月薪过万 : ）
除了前端知识的学习，我觉得自己写文章的能力还提升了，这还是我第一次发这么长的文章😂

CSS基本理解 day1 ｜ 青训营笔记