CSS —— 元素、背景属性

CSS —— 元素、背景属性

 

目录

CSS —— 元素、背景属性

一、元素

1. 元素显示模式

2. 块元素

3. 行内元素

4. 行内块元素

5. 各元素的相互转换

二、CSS背景属性

1. 背景颜色

2. 背景图片

3. 背景平铺

4. 背景图片位置

5. 背景附着

6. 背景属性简写和背景透明度

#END（部分图源b站pink老师）

---

一、元素

1. 元素显示模式

1.1 元素标签以什么方式进行显示；

1.2 HTML元素：块元素、行内元素；

 

2. 块元素

2.1 常见的块元素：<h1>~<h6>、<p>、<div>、<ol>、<ul>、<li>等；

2.2 块元素特点：

2.3 注意点：

 

3. 行内元素

3.1 常见的行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<span>等；

3.2 行内元素特点：

3.3 注意点：

 

4. 行内块元素

4.1 同时具有块元素和行内元素的特点：<img/>、<input/>、<td>；

4.2 特点：

 

5. 各元素的相互转换

 

 

二、CSS背景属性

1. 背景颜色

1.1 background-color：定义元素的背景颜色；（默认值transparent（透明））

1.2 语法格式：

div {
     width: 200px;
     height: 200px;
     background-color: pink;
}

 

2. 背景图片

2.1 background-image：描述元素的背景图像；

2.2 用处、优点：常用于logo或者一些装饰性的小图片或者是超级大的背景图，非常便于控制位置；

2.3 语法格式：

background-image : none | url(url)

 

3. 背景平铺

3.1 background-repeat：定义背景图像是否平铺，怎么平铺；

3.2 语法格式：

background-repeat : repeat | no-repeat | repeat-x | repeat-y;

 

4. 背景图片位置

4.1 background-position：定义图片在背景中的位置；

4.2 语法格式：

background-position : x y;

4.3 x、y：既可以使用方位名词、也可以使用精确单位；

4.4

① 如果两个参数都是方位名词，那么两个值的前后顺序无关，即top center 和 center top 效果一样；

② 如果只指定了一个方位名词，那另外一个值默认为居中对齐；

③ 参数如果是精确坐标，那么两个值的顺序不能改变，第一个一定为x，第二个一定为y；

④ 如果只指定了一个数值那么一定为x，y默认为居中对齐；

 

5. 背景附着

5.1 background-attachment：定义背景图像是否固定或者随页面的其余部分滚动；

5.2 语法格式：

background-attachment : scroll | fixed;

 

6. 背景属性简写和背景透明度

6.1 简写属性一般没有特定的书写顺序，一般约定为：

background : 背景颜色 背景图片地址 背景平铺 背景附着 背景图片位置；

6.2 背景透明度：

background ： rgba(0,0,0,0.0~1.0)

最后一个参数为 alpha（透明度），范围在0~1之间，0为完全透明，1为不透明；

6.3 背景半透明指盒子背景半透明，盒子里面内容不受影响；

 

#END（部分图源b站pink老师）