【第二届字节青训营 - 寒假前端场】 基础CSS学习笔记

CSS基础

CSS简介

CSS全称：Cascading Style Sheets。主要用于用来定义页面元素的样式、设置字体和颜色、设置位置和大小、添加动画效果。

在页面使用CSS方法

• 外链（推荐采用，使得前后端功能分离、便于模块化）
• 嵌入（通过<style>嵌入）
• 内联（应用于特殊场景，UI组件库中额外添加样式，一遍不推荐使用）

CSS工作原理

通过创建DOM树，加上解析后的CSS，可以形成渲染树

选择器Selector

选择器用于找出页面中的元素，以便给他们设置样式

使用多种方式选择元素

• 按照标签名、类名或id
• 按照属性
• 按照DOM树中的位置

e.g.通配符选择器、标签选择器 、id选择器、类选择器、属性选择器、伪类选择器

属性选择器

属性选择器常见格式: [^=]以开头 [$=]以结尾 [=]满足条件 []是否有该属性

<label>名称：</label>
<input value="jack" disabled>
<style>
  [disabled]{
  background:grey; 
  color:red;
  }
</style>

disabled="disabled"或者直接使用disabled会使标签失效，被禁用的input元素既不可用，也不可点击。可以设置disabled属性，直到满足某些其他的条件为止.被禁用的input可以通过CSS修改样式。

伪类选择器

伪类选择器不基于标签和属性定位元素，主要有状态伪类与结构性伪类

状态伪类，常见的如下：

• :link{}
• :visited{}
• :hover{}
• :active{}
• 对input，有:focus{}

结构性伪类：
根据DOM节点在DOM树中的位置，例如：
:firstchild{}

组合

名称	语法	说明9	示例9
直接组合	AB	满足A同时满足B	input:focus
后代组合	AB	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中B，如果它是A的子元素	section>p
兄弟选择器	A~B	选中B，如果它在A后且和A同级	h2～p
相邻选择器	A+B	选中B，如果它紧跟在A后面	h2+p

后代组合范围大于亲子组合，兄弟选择器范围大于相邻选择器

选择器组：将选择器之间用，分开

颜色

RGB模式

十六进制标识：#ffffff 等价于
rgb(255,255,255)

HSL模式：

使用场景：例如，可以设置button点击前后的不同状态

名称	含义
Hue色相（H）	是色彩的基本属性，如红色、黄色等；取值范围是0-360。
Saturation饱和度（S）	是指色彩的鲜艳程度，越高约鲜艳；取值范围0-100%。
Lightness亮度（L）	指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。

alpha:透明度:三种表示方法：#ff0000ff、rgba(255, 0, 0, 1) 、hsla(0, 100%, 50%, 1)

关键字模式

字体

为什么设置默认字体？防止不同设备渲染效果等原因导致显示结果与期望值不同，设置多个字体，中间以逗号分隔。设置兜底的通用字体簇。

常见字体簇	对应字体
Serif 衬线体	Georgia、宋体
Sans-Serif 无衬线体	Arial、Helvetica、黑体、微软雅黑
Cursive手写体	Caflisch Script、楷体型
Fantasy	Comic Sans MS，Papurus
Monospace 等宽字体	Consolas、Courier、中文字体

使用建议：

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

也可以通过Web Fonts来引用外部的字体库，英文只有26个字母，包相对较小。中文字符较多，因此包相对较大，可能大小达到几M，可能导致加载较慢

//Web Fonts引用外部字体
<style>
@font-face
{
font-family: ;//必需的。定义字体的名称。
src: url()//必需的。定义该字体下载的网址。可以设置多个地址，中间以逗号分隔
}
</style>

font-size设置

• 关键字：small、medium、large
• 长度：px、em(em相对父元素font-size的大小，rem相对root元素的大小、常用于移动端）（em弹性布局采用，px固定布局采用）
• 百分数：相对于父元素字体大小

font-size：设置字体样式

font-weight：设置字体粗细

line-height：设置行高。如果是小数，标识相对font-size的大小

font:style weight size/height family对应
/斜体 粗细 大小/行高 字体族/

text-align
文字对齐：left、center、right、justify（justify使得文本两端对齐，不包括最后一行）

spacing
1etter-spacing:字母间距
word-spacing:单词间距

text-indent:设置缩进

text-decoration
文字修饰：none、underline、line-through、overline

white-space空白格设置：
normal、nowrap（合并空格，不换行，自动设置水平滚动条）、pre（保留空白与换行）、pre-wrap（不合并空格，自动换行）、pre-line（合并空格，并且自动换行）

调试CSS

·右键点击页面，选择[检查]

使用快捷键
Ctr1+Shift+I（Windows）
cmd+opt+I（Mac）