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

本次课程重点内容

CSS样式

CSS简介

CSS是什么
Cascaing Style Sheets（层叠样式表)
用来定义页面元素的样式

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

CSS的基础结构

一个基础的CSS样式由：选择器（Selector，选中页面中的元素来给该元素定义样式）+选择器（Property，属性）+属性值（value）+声明（Declaration）构成。

在页面中使用CSS
CSS样式的使用方式有三种分别是：外链、嵌入、内联。

CSS是如何工作的

CSS选择器(Selector)

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

通配选择器

*:匹配所有

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
*{
  color: red;
  font-size: 20px;
}
</style>

标签选择器

根据标签设置样式

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1{
  color: orange;
}
p{
  color: gray;
  font-size: 20px;
}
</style>

id选择器

根据id来设置样式

<h1 id="app">This is heading</h1>

<style>
#app{
  color: gray;
  font-size: 20px;
}
</style>

类选择器

根据class属性来设置样式

<h1 class="app">This is heading</h1>
<p class="app">this is some paragraph.</p>

<style>
.app{
  color: gray;
  font-size: 20px;
}
</style>

属性选择器

通过元素的属性、属性值来设置样式

<h1 disabled>This is heading</h1>
<p >this is some paragraph.</p>

<style>
[disabled]{
  color: gray;
  font-size: 20px;
}
</style>

伪类（pseudo-classes）

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

组合（Combinators）

例如：
ul li{}:表示ul下的所有li标签同时设置样式
ul>li{}:表示ul下第一个li标签进行设置样式

选择器组：选择多个标签用逗号隔开。
例如：
boby,h1,h2,ul,ol{}

颜色

颜色-RPB

rgb(红0-255,绿0-255,蓝0-255)或者#8fac87(每两位分别表示每种颜色的数量，按照16进制显示)

颜色-HSL

Hue:色相(H)是色彩的基本属性，如红色、黄色等；取值范围是0-360。
Saturation:饱和度(s)是指色彩的鲜艳程度，越高越鲜艳；去做范围0-100%。
Lightness:亮度(L)指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。

alpha 透明度

0是透明，1是不透明

字体

font-family

通过font-family来设置字体

使用Web Fonts

font-size

用来设置字体大小

关键字
small、medium、rge
长度
px、em
百分数
相对于父元素字体大小

font-style

可以给字体效果，font-style:italic（表示斜体）normal（正常）

font-weight

用来设置字体的粗细。
font-weight属性字重（100-900）
400可以用normal表示。
700可以用bold表示。

line-height

用来设置字体行高。
行高表示二行文字的基准线之间的距离。
行高一般表示字体大小的多少倍
默认行高1.1倍行高。
比如:h1字体大小30，行高45

注意：以上属性都可以写一个属性里(font)

空格处理

用white-space来处理空格

normal:只显示一个空格会把多个空格合并掉。
nowrap:强制不换行。
pre:保留所有，包括空格和换行。
pre-wrap:一行内显示不下时会自动换行。
pre-line:合并空格，保留换行。

调试CSS

右键点击页面，选择检查
使用快捷键
Ctrl+Shift+I （Windows） cmd+opt+I（Mac）

走进前端技术栈-css | 青训营笔记