这是我参与【第五届青训营】伴学笔记创作活动的第2天。

CSS是什么

CSS全称Cascading Style Sheets

用来定义页面元素的样式

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

CSS的基本组成

选择器{属性：属性值；}
属性：属性值;=声明

在页面中使用CSS

在页面中使用CSS有三种方法，分别是：

• 外链
• 嵌入
• 内联
  比较推荐的是外链，它涉及到内容和样式的分离。
  组件中比较常用的是嵌入，经常将HTML、CSS和JS写在一个文件里。

CSS是如何工作的

首先，我们打开一个页面后浏览器会加载这个页面的HTML，然后对HTML进行解析，解析出来是一个DOM树。
另外HTML会使用外链或者嵌入或者内联的方式去使用CSS，然后对所有的CSS进行加载并解析DOM树中每一个节点的CSS属性到渲染树，最后展示页面。
如下图所示是一个简单的CSS工作流程图：

选择器Selector

作用：找出页面中的元素，以便给他们设置样式。

可使用多种方式选择元素：

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

选择器的种类：

1. 通配选择器：*（匹配所有）
2. 标签选择器，例：p
3. id选择器：#id（在页面中id应该是唯一的）
4. 类选择器：.class(与id不同，class可出现多次，比较常用）
5. 属性选择器，样式如下：

• [disabled]：被禁用的，所有有这个属性的样式都将被定义
• input[type="password"]：所有type是password的样式都将被定义
• a[href^="#"]：所有以#号开头的href的样式都将被定义
• a[href$=".jpg"]：所有以.jpg结尾的href的样式都将被定义

6. 伪类（pseudo-classes):不基于标签和属性的定位元素

• 状态伪类
     a:link（a的默认样式）
     a:visited（被访问过的a的样式）
     a:hover（鼠标放在a链接上的样式）
     a:active（鼠标点击后的链接的样式）
     :focus（在输入框中输入文字时的样式）
• 结构性伪类：根据伪类在DOM树中的位置进行定位
     li:first-child（在有序列表中的第一个li）
     li:last-child（在有序列表中的最后一个li）
  

组合（Combinators）

选择器组

用“，”隔开
如下图所示：

颜色

RGB

通过指定三原色红绿蓝的多少来确定颜色的值。
两种写法：

• #000000
• rgb（0，0，0）
  点开链接体验颜色-RGB的组成：cdpn.io/webzhao/deb…

HSL

点开链接体验颜色-HSL的组成：cdpn.io/webzhao/deb…

最简单且最复杂的颜色设定方式

英文单词法cdpn.io/webzhao/deb… 不常用

alpha透明度

数值是0-1
alpha=0时完全透明，alpha=1时完全不透明。
使用时，新版浏览器可省略a,直接在颜色后用“，”隔开加第四个值。
cdpn.io/webzhao/deb…

字体

font-family（字体样式）

因为有些浏览器没有相应的字体，可以按照字体选择的先后顺序用“，”隔开选择多种字体。

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

通用字体族

通常会在最后加上通用字体族：

• Serif(衬线体)：Georgia、宋体
• Sans-Serif（无衬线体）：Arial、Helvetica、黑体、微软雅黑
• Cursive（手写体）：Caflisch Script、楷体
• Fantasy（比较夸张的字体）：Comic Sans MS、Papyrus
• Monospace（等宽字体）：Consolas、Courier、中文字体

使用Web Fonts

通过浏览器下载字体的方式定义字体样式，比较消耗。
同时因为中文的字体文件较大，在使用这种方法时需要先对字体文件进行裁切，将不需要用到的字符删掉，来减小性能消耗。

font-size（字体大小）

使用方法：

1. 关键字：small、medium、large
2. 长度：px、em
   例：2em=父元素大小×2
3. 百分比：相对于父元素的字体大小

font-style（文字效果）

• font-style:normal;非斜体
• font-style:italic;斜体

font-weight（字重）

字体粗细，数值是100-900，其中400=normal，700=bold
使用的前提是文字字体支持字重设置。有些字体在设计时并没有设置字重。

line-height（行高）

单位是像素px
注意：当行高使用一个没有单位的数字时，它表示原行高的多少倍。

font

关于字体所有样式都可以缩成一个font:style weight size/height family

排版

text-align

• text-align:left靠左
• text-align:center居中
• text-align:right靠右
• text-align:justify分散

spacing（间距）

• letter-spacing：0px字符间距
• word-spacing：0px单词间距
  cdpn.io/webzhao/deb…

text-indent（段落首行缩进）

text-indent：0px

text-decoration（文本修饰）

• text-decoration：none无修饰
• text-decoration:underline加下划线
• text-decoration:line-through加删除线
• text-decoration:overline加上划线

white-space（空白格）

• white-space：normal默认的、合并多个空格
• white-space:nowrap强制不换行
• white-space:pre保留所有空格和换行，加宽度
• white-space:pre-wrap保留空格和换行，但是页面不够宽的时候自动换行
• white-space:pre-line保留换行，缩进空格，但是页面不够宽的时候自动换行

调试CSS

• 右键点击页面，选择【检查】
• 使用快捷键
  Ctrl+Shift+I（Windows）
  Cmd+Opt+I（Mac）