CSS 基础（三） web前端基础 [CSS背景颜色，三大特性]

一、CSS的背景

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等等。

属性	描述
background-color	背景颜色
background-image	背景图片的地址
background-repeat	图片是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

1.1 背景颜色

background-color属性定义了元素的背景颜色。
语法：
background-color:颜色值;
注意：
一般情况下，元素背景颜色默认值是transparent（透明）

1.2 背景图片

background-image描述背景的图片。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置。
语法：

background-image : none | url (url) 

参数：
none : 　无背景图（默认的）
url : 　使用绝对或相对地址指定背景图像

小技巧： 我们提倡 背景图片后面的地址，url不要加引号。

注意：
background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复的话，图片覆盖不到的地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
背景颜色会置于底层，在背景图片下。

1.3 背景平铺

background-repeat 属性可以设置背景图片的平铺。

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

参数值	描述
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	横向平铺
repeat-y	纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

1.4 背景位置

利用background-position属性可以改变图片在背景中的位置。
语法：

background-position : length || length
background-position : position || position 

参数	作用
length	百分数
position	top 、center 、 bottom | left 、 center 、 right ——方位名词

说明：

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

注意：

1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

1.5 背景附着 ( scroll fixed ）

语法：

background-attachment : scroll | fixed 

参数	描述
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

说明：
设置或检索背景图像是随对象内容滚动还是固定的。

1.6 背景透明

背景可以设置透明度，与文字的透明同理。

background-color: grba ( 0, 0, 0, 0.3 ) 
/* 取值范围 0~1之间 */

注意：
背景半透明是指盒子背景半透明， 盒子里面的内容不受影响

同理，文字与边框也可以设置半透明

color : grba ( 0, 0, 0, 0.3 ) 
border : 1px, solid grba ( 0, 0, 0, 0.3 ) 

1.7 背景简写

为了把代码简洁、方便、美观，方便后续维护，建议把背景样式简写在同一段代码上。

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

1.8 背景缩放

背景可以设置大小，可设置长度单位或者百分比

background-sizi :  100px  200px  或者  50%

• cover: 等比例缩放大小，如有溢出部分则会被隐藏。不会显示出来，但是会让图片不完整。

background-sizi ： cover;

• contain : 按容器的大小来缩放，只要满足一个边就会停止缩放，但是不满足的那一边会有空白边多出来，此方法可保证图片的完整度。

background-sizi ： contain;

注意：
背景图片大小尽量只写一个数值或用百分比，防止图片缩放导致失真，扭曲。

1.9 多背景

1. 以逗号分隔可以设置多背景，可用于自适应布局
2. 如果设置的图片存在多张背景图片，前面的背景会覆盖在后面的背景之上，
3. 为了避免背景色将图片盖住，背景色通常都定义在最后一组上。

background-image: url('images/gyt.jpg') no-repeat;
background-image: url('images/robot.png') no-repeat;
background-image: url('images/one.png') no-repeat c #aaa;

简写：

background-image: url('images/gyt.jpg'), url('images/robot.png');

2.0 凹凸文字效果

需要用文字阴影来设置效果。

 .tu{
     text-shadow: -1px -1px 1px #fff,1px 1px 1px #000;
  }
  .ao{
      text-shadow: 1px 1px 1px #fff,-1px -1px 1px #000;
  }

2. 1 文本装饰 ( text - decoration )

在CSS中，使用 text-decoration属性，可以在文本上方、下方、或中间添加装饰线。
在正常情况下，文字是没有装饰的，但是 a 标签，超链接除外

• a 标签 超链接中，默认自带下划线，但是如果把下划线取消的话，需要设置 none

a {
text-decoration: none;
}
/* 去掉下划线 */

具体 参数：

参数	效果
none	默认，定义标准的文本
underline	定义文字下方的一条线
overline	为文字上方添加一条线
line-through	文字中间贯穿线 ， 定义穿过文本的一条线
blink	闪烁

可做文字效果：

1. 去掉超链接的下划线，当鼠标悬停后，再为文字添加下划线，来提醒用户当前文本为链接文本。如：

 a:hover {
text-decoration: underline;
}

2. 可做修订文本，在被删除文本上增加删除线。还有团购网站，在原价上增加删除线，做删除状。

p {
text-decoration: underline overline line-through;
}

效果如下 ：

二、CSS 三大特性

2.1 CSS 层叠性

css 层叠，是多种样式的叠加。

如在一个页面中，有一个div文字第一个标注写了颜色为红色 ，但是下面又有样式为蓝色，这样为多种样式叠加。
这样就会出现一个属性把另外一个属性的样式重叠。一般情况下，如出现这种冲突的情况，则会按照css的书写顺序，按最后面的样式为准。* 就近原则

.red {
color : red;
}
.red {
color : blud;
}
/* 就近原则。识别为蓝色

2.2 CSS 继承性

子标签会继承父标签的某些样式，如文本颜色和字号等。

子承父业。

• 继承性：如果页面中有div, 后面跟有 ul ——Li 如果只书写div 的样式属性时，那么此时li 也会识别到div的属性。
• 子标签会继承父标签的某些样式 ，简单的理解就是： 子承父业。
• 元素可以继承父元素的样式（text-,font-，line-这些元素开头的都可以继承，以及color属性）

<div>
	<ul>
		<li> 子元素继承父元素的属性 li>
	ul>
div>

2.3 CSS 优先性

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

1. 继承的权重为 0
2. 行内样式优先
3. 权重、样式相同时，就近原则
4. ！important 具有最大优先级。

2.4 CSS 特殊性

CSS Specificity : 称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准

值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

1. 继承或者*的值：0，0，0，0
2. 每个元素（标签）值：0，0，0，1
3. 每个类，伪类值为：0，0，1，0
4. 每个ID为：0，1，0，0
5. 每个行内样式值：1，0，0，0
6. 每个 ! important值：无穷大

注意：
数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10而不是0,0, 1, 0， 所以不会存在10个div能赶上-一个类选择器的情况。

总结优先级：

1. 使用 ! important声明的规则
2. 内嵌在HTML元素的sytle属性里面的声明
3. 使用了ID选择器的规则
4. 使用了类选择器、属性选择器、伪元素和伪类选择吕的规则
5. 使用了元素选择器的规则
6. 只包含一个通用选择器的规则

特点：
权重是优先级的算法， 层叠是优先级的表现。

耐心总结，快乐分享，欢迎讨论。