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
取值 : 字体名称
语法注意 :
html表格内外边框颜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为必填项
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 (指定多个属性名，使⽤逗号隔开)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。