html让背景颜色有过渡效果,前端html--背景，文本，过渡效果属性

1. 背景相关属性

1. 背景颜色

属性 : background-color

取值 : 颜色值

2. 背景图片

属性 : background-image

取值 : url(‘‘)

3. 背景图片相关属性

1. 背景图片重复平铺显示

属性 : background-repeat

取值 :

1. repeat (默认值)

当图片尺寸小于元素尺寸,会自动沿水平和垂直方向

重复平铺,直到铺满元素

2. repeat-x

设置图片沿水平方向平铺

3. repeat-y

设置图片沿垂直方向平铺

4. no-repeat

设置图片不重复平铺

2. 背景图片的尺寸

属性 : background-size

取值 :

1. 像素值

取两个值,分别表示背景图片的宽和高;

取一个值,设置背景图片宽度,高度等比缩放

2. 百分比

百分比取一个值或两个值等同于像素的取值情况

百分比参照当前元素的宽高计算

---------------

3. cover

覆盖,等比拉伸图片至足够大,完全覆盖元素

4. contain

包含,等比拉伸图片至刚好被元素容纳的最大尺寸

3. 背景图片的位置

属性 : background-position

取值 :

1. 像素值 x y

x表示背景图片水平偏移距离,正值表示向右

y表示背景图片垂直偏移距离,正值表示向下

默认背景图片从元素左上角显示

2. 百分比

0% 0% 显示在左上角

50% 50% 显示在元素中间位置

100% 100% 显示在右下角

3. 方位值

水平方向 : left center right

垂直方向 : top center bottom

设置方位值时,如果缺少某个方向,默认为center

使用场景 :

"精灵图"技术,网页开发过程中为了节省资源,减少网络请求,

通常会将一组小图标以一张图片的形式存储,通过一次

网络请求加载图片,配合background-position控制

图标切换显示

4. 背景属性简写:

属性 : background

取值 : color url() repeat position;

et :

background:pink url(northStar.jpg) no-repeat 10px 10px;

注意 :

background-size 单独设置

2. 文本与字体相关属性

1. 字体相关

1. 字体大小

属性 : font-size

取值 : 像素值

2. 指定字体名称

属性 : font-family

取值 : 字体名称

语法注意 :

1. 字体名称如果是中文,或者由多个英文单词组成,

必须加引号

2. 可以设置多个字体名称,做备用字体,名称之间使用

逗号隔开

et :

font-family: Arial,‘黑体‘,‘Microsoft YaHei‘;

3. 设置字体加粗

属性 : font-weight

取值 :

1. 可以取关键字

bold(加粗显示) / normal (默认,正常显示)

2. 取无单位的整百数

范围 100~900

400 : 等价于normal

700 : 等价于bold

4. 设置字体样式(斜体)

属性 : font-style

取值 :

1. normal (默认正常显示)

2. italic (斜体显示)

--------------

3. oblique (文本倾斜显示)

一般作为italic的替换样式,可以实现斜体效果.

在某些情况下,可以指定倾斜角度

5. 字体属性简写

属性 : font

取值 : style weight size family; (顺序强制)

语法注意 :

size,family为必填项

2. 文本相关

1. 文本颜色

属性 : color

取值 : 颜色值

2. 文本水平对齐方式

属性 : text-align

取值 : left(默认) / center / right;

3. 文本装饰线

属性 : text-decoration

取值 :

1. underline 下划线

2. overline 上划线

3. line-through 删除线

4. none 取消装饰线

4. 行高

属性 : line-height

取值 : 像素值

注意 :

所有文本在其所属行中都是垂直居中的

使用场景 :

1. 行高可以用来设置一行文本的垂直居中 :

行高与元素的高度保持一致

2. 行高可以实现文本在元素中上下位置的微调:

et :

1. {

height : 100px;

line-height : 120px;

}

2. {

height : 100px;

line-height : 70px;

}

3. 表格相关属性

1. 表格尺寸

表格在设置宽高时,可以选择 :

1. 为table标签固定宽高,单元格自动分配大小

2. 为td单元格设置宽高,由内容决定表格整体大小

二选一

2. table标签完全支持盒模型,默认采用border-box计算尺寸

tr,td标签,不完全支持盒模型.

td不支持margin属性

3. 表格边框合并

将单元格边框与表格边框合并在一起

属性 : border-collapse

取值 :

1. separate (默认值,边框分离)

2. collapse 设置边框合并

4. 调整单元格边框之间的距离

属性 : border-spacing

取值 : h-value v-value;

语法注意 :

h-value 表示水平方向上的边距

v-value 表示垂直方向上的边距

该属性必须添加给table标签,要求必须是边框分离状态

才起作用

4. 过渡效果

1. 什么是过渡 :

过渡指的是元素在两种状态切换时的平滑过渡效果

2. 过渡相关的属性 :

1. 指定过渡时长

属性 : transition-duration

取值 : 以s/ms为单位的数值

2. 指定过渡属性

属性 : transition-property

取值 : 大部分的CSS属性名

语法 :

1. width (指定单个属性名)

2. width,height (指定多个属性名,使用逗号隔开)

3. all (指定所有发生值改变的属性)

3. 指定过渡发生的时间变化曲率

属性 : transition-timing-function

取值 :

1. linear 匀速变化

2. ease 默认值,慢速开始,中间加速,慢速结束

3. ease-in 慢速开始,加速结束

4. ease-out 快速开始,慢速结束

5. ease-in-out 慢速开始和结束,中间过程先加速

后减速

4. 指定延迟时间

属性 : transition-delay

取值 : 以s/ms为单位的数值,设置过渡效果延迟多久执行

练习 :

创建200*200的元素

鼠标悬停时,

改变背景颜色,改变尺寸为300*300

改变元素形状为圆形

所有变化在3秒内完成

3. 简写属性

属性 : transition

取值 : property duration timing-function delay;

语法 :

1. duration 是必填项,其他项可以省略

2. 可以分别为属性设置过渡时长

et :

transition: width 2s,height 3s,background 5s;

5. CSS 常用的布局方式

1. 布局 :

设置元素的排列和显示

2. 分类 :

1. 标准流布局(静态布局,文档流布局)

默认的布局方式

特点 : 元素按照类型和书写顺序,从左到右,从上到下

依次显示

2. 浮动布局

元素设置浮动之后,可以停靠在其他元素的边缘

属性 :

float

取值 : left / right / none(默认值)

left : 元素左浮动,直到紧靠其他元素边缘

right : 元素右浮动,直到紧贴其他元素边缘

特点 :

1. 元素浮动之后,会脱离文档流,在文档中不再占位.

表现为悬浮在文档上方.后面正常的元素会向前占位

2. 多个元素浮动时,会依次停靠在前一个浮动元素的

边缘,如果当前父元素中宽度无法容纳,会自动换行

显示.

3. 任何元素只要设置浮动,都可以设置宽高

4. 文字环绕效果.浮动元素不占位,会遮挡正常元素的

显示,只遮挡正常元素的位置,不影响正常内容显示,

内容会围绕在浮动元素周围显示

5. 浮动元素水平方向没有缝隙,可以解决行内元素或

行内块元素,水平方向上由于换行导致的空隙问题

浮动引起的问题 :

由于子元素全部浮动,在文档中不占位,造成父元素

高度为0,影响页面布局

解决办法 :

1. 给父元素固定高度

2. 给父元素设置overflow:hidden;

3. 标准做法 :清除浮动元素带来的影响

属性 : clear

取值 : left/right/both

用法 :

为元素设置clear属性

left : 当前元素不受左浮动元素的影响

right : 当前元素不受右浮动元素的影响

both : 不受左浮动或右浮动元素的影响

解决父元素高度为0 :

步骤 :

1. 在父元素的末尾添加空的子元素(块元素)

2. 为空元素设置clear:both;