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;