这是我参与[第五届青训营]伴学笔记创作活动的第二天

2. CSS

2.1 CSS是什么？

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

h1{
    color:white;
    font-size:14px
}

2.2 在页面中使用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 >

2.3 CSS是如何工作的？

2.4 类的组合

2.5 调试CSS

• 右键点击页面选择检查
• 使用快捷键
  • Cirl + Shift + I(Windows)
  • Cmd + Opd + I(Mac)

2.6 类的继承

文字一开始整体显示蓝色，em中继承也会为蓝色
但是又重新添加红色，会将蓝色赋值为红色，所以test显示红色。

2.7 CSS中各种显示效果的优先级

第一优先级：

无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。

第二优先级：

在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。

第三优先级：

由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}

第四优先级：

由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}

第五优先级：

由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}

第六优先级：

通配选择器，如*{marigin:6px;}

行内样式（style="…"）>ID 选择器(#id{…})>类选择器(.class{…})>标签选择器(div{…})>通用选择器(*{…})

2.7 盒子模型

CSS 盒模型本质上是一个盒子，盒子包裹着HTML 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距 margin

2.7.1 标准盒子模型(box-sizing: content-box)

width = content.width
height = content.height 

2.7.2 IE盒子模型(box-sizing: border-box)

width = content.width+padding+border
height = content.height+padding+border