CSS基础

常见样式声明

color

1. 指示：元素内部的文字颜色
2. 表示如下：

• rgb表示法：rgb(0, 255, 0) 

注：每个颜色可以使用0-255之间的数字来表达色值（红、绿、蓝）

• hex（16进制）表示法：#红 绿 蓝（#000000）

background-color

元素背景颜色

font-size

元素内部文字的尺寸大小

1. px：像素，绝对单位，简单的理解为文字的高度占多少个像素
2. em：相对单位，相对于父元素的字体大小

注：每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。

 font-weight

文字粗细程度，可以取值数字，可以取值为预设值(blod.normol)

 font-family

文字类型，🐖：必须用户计算机中存在的字体才会有效。

font-style

字体样式，通常用它设置斜体

 text-decoration

文本修饰，给文本加线

text-indent

首行文本缩进（通常为：2em）

 line-height

每行文本的高度，该值越大，每行文本的距离越大

注：行高可以设置为纯数字，表示相对于当前元素的字体大小

  width

宽度

 height

高度

 text-align

元素内部文字的水平排列方式(居中、左、右)

元素属性值判断

• 确定声明值    

判断元素属性是否声明

• 层叠冲突    

比较同一元素的属性值取源

1.比较重要性

重要性从高到底：

1.  作者样式表中的普通样式
2. 浏览器默认样式表中的样式

2. 比较特殊性

看选择器———选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个4位数（x x x x）

1. 千位：如果是内联样式，记1，否则记0

2. 百位：等于选择器中所有id选择器的数量

3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量

4. 个位：等于选择器中所有元素选择器、伪元素选择器的数量

 3. 比较源次序

代码书写靠后的胜出

• 使用继承    

子元素会继承父元素的某些CSS属性

注：有些元素无法继承：background-color

• 使用默认值

未被提及的元素

特别地

inherit：手动（强制）继承，将父元素的值取出应用到该元素

initial：初始值，将该属性设置为默认值

盒模型

• 分类

1. 块盒：display等于block的元素（独占一行）
2. 行盒：display等于inline的元素（不换行）

• 组成

内容 content

width、height，设置的是盒子内容的宽、高

填充  padding

盒子边框到盒子内容的距离

padding-left、padding-right、padding-top、padding-bottom

padding: 简写属性

padding: 上 右 下 左

注：填充区+内容区 = 填充盒 

边框  border

边框 = 边框样式 + 边框宽度 + 边框颜色

边框样式：border-style(solid)

边框宽度：border-width

边框颜色：border-color

注：边框+填充区+内容区 = 边框盒 border-box

外边距  margin

边框到其他盒子的距离

margin-top、margin-left、margin-right、margin-bottom

margin：简写属性