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

1.什么是css？

• cascading style sheets
• 用来定义页面元素的样式
• 设置字体和颜色
• 设置位置和大小
• 添加动画效果

2.由什么组成

选择器和与样式相关的一些属性

3.如何使用css

• 1.外链
• link rel = "stylesheet" href = "/assets/style.css" >
• 2.嵌入
• < style >

• li { margin : 0 ; list-style : none; } 
  

• p { margin : 1em 0 ; } 
  

• </ style >
• 3.内联
• < p style = "margin:1em 0" > Example Content </ p >

4.css是如何工作的

5.选择器

selector

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

6.伪类

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

7.组合方式

8.对多个选择器进行相同样式

9.颜色

运用rgb来进行调试 rgb（ 数字 ，数字 ，数字 ）

或者用#加数字字母（十六进制）

hue色相色彩的基本属性

saturation饱和度色彩的鲜艳程度

lightness亮度指颜色的明亮颜色

alpha透明度

10字体font-family

通用字体族

font-size

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

排版可以用line-height进行设置行高

调试CSS

右键点击页面选择检查

快捷键的的使用方法

Cirl + Shift + I(Windows)

Cmd + Opd + I(Mac)

盒子模型

CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。 如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中