1.背景
1.背景色
属性:background-color
取值:合法的颜色值
注意:背景颜色和背景图片默认都从边框位置处开始填充
2.背景图片
属性:background-image
取值:url(图片的路径);
ex:
background-image:url(a.jpg);
3.背景图片平铺
属性:background-repeat
取值:
1.repeat 平铺
2.no-repeat 不平铺,只显示一次
3.repeat-x 只在横向平铺
4.repeat-y 只在纵向平铺
4.背景图片尺寸
属性:background-size
取值:
1.value1(宽) value2(高)
2.x% y%
3.cover 将背景图等比放大,直到背景图完全覆盖到元素的所有区域为止。
4.contain 将背景图等比放大,直到背景图碰到元素的某一个边缘为止。
5.背景图片的固定
属性:background-attachment
取值:
1.scroll 默认值,滚动
2.fixed 固定
6.背景图片定位
作用:改变背景在元素中的位置
属性:background-position
取值:
1.x y
x:背景图在水平方向的偏移距离
取值为正,向右移动
取值为负,向左移动
y:背景图在垂直方向的偏移距离
取值为正,向下移动
取值为负,向上移动
2.x% y%
0% 0% 背景在左上角
100% 100% 背景在右下角
50% 50% 背景在正中间
3.关键词
x:left/center/right
y:top/center/bottom
7.背景的简写属性
在一个属性中指定多个属性值
background:color url() repeat attachment position;
ex:
background:red;
background:url(a.jpg) no-repeat fixed center center;
2.渐变
1.什么是渐变
渐变指的是多种颜色平缓变化的一种显示效果。
2.渐变的主要因素
1.色标:一种颜色 及其 出现的位置
一个渐变是由多个色标组成(至少两个)
3.渐变的分类
1.线性渐变
以直线的方向来填充渐变色
2.径向渐变
以圆形的方式来填充渐变色
3.重复渐变
将线性渐变 或 径向渐变 重复几次实现渐变填充
4.线性渐变
属性:backgrond-image
取值:linear-gradient(angle,color-point1,color-point2,...);
angle:表示渐变填充的方向或角度
取值:
1.关键词
to top 从下向上填充渐变色
to bottom 从上向下填充渐变色
to left 从右向左填充渐变色
to right 从左向右填充渐变色
2.角度值
0deg 从下向上(等同于to top)
180deg 从上向下(等同于to bottom)
color-point:色标
表示颜色及其位置
取值:颜色和位置的组和,中间用空格隔开。
ex:
red 0px;
blue 100px;
green 200px;
5.径向渐变
属性:background-image
取值:radial-gradient([size at position],color-point1,color-point2,...);
size:半径,以px为单位的数字
position:圆心所在位置
1.x y:具体数字
2.x% y%:元素宽和高的占比
3.关键词
x:left/center/right
y:top/center/bottom
6.重复渐变
1.重复线性渐变
background-image:repeating-linear-gradient(angle,color-point,...);
color-point:位置一定要给绝对数值(px),不要用百分比。
2.重复径向渐变
backgrond-image:repeating-radial-gradient([size at position],color-point);
练习:
给一个div设置高宽各400px,然后设置重复线性渐变背景色。
7.浏览器兼容性
各浏览器的新版都支持渐变属性
对于不支持的浏览器版本,可以通过增加浏览器前缀的方式,让浏览器支持渐变。
Firefox:-moz-
Chrome&Safari:-webkit-
IE:-ms-
opera:-o-
ex:
background-image:-webkit-linear-gradient();
www.caniuse.com
3.文本格式化属性
1.字体属性
1.指定字体
属性:font-family
取值:用逗号隔开字体名称列表
ex:
font-family:"微软雅黑","黑体",Arial;
2.字体大小
属性:font-size
取值:以px或pt为单位的数值
3.字体加粗
属性:font-weight
取值:
1.bold 加粗(b标记)
2.normal 正常
3.value 整百倍的数字 400-900
4.字体样式
属性:font-style
取值:
1.italic 斜体(i标记)
2.normal 正常
5.小型大写字母
将小写字符变为大写,但大小与小写字符一致。
属性:font-variant
取值:
1.normal 正常
2.small-caps 小型大写字符
练习:
在网页中定义一个div元素,并设值id为main,内容随意,中英文结合
设置以下格式:
1.字体:微软雅黑
2.文字大小:24px
3.加粗并且倾斜显示文本
4.将所有小写字符转为小型大写字符
6.字体属性的简写方式
属性:
font:style variant weight size family;
注意:使用简写方式时,必须要设置family的值,否则无效。
ex:font:24px;//错误
font:24px "微软雅黑";//正确
2.文本格式化
1.文本颜色
属性:color
取值:合法的颜色值
2.文本排列
作用:指定文本(行内,行内块)在水平方向的对齐方式。
属性:text-align
取值:left/center/right/justify(两端对齐)
3.线条修饰
属性:text-decoration
取值:
1.none 无任何线条修饰
2.underline 下划线
3.overline 上划线
4.line-through 删除线
4.行高
作用:一行数据所占的高度
如果行高大于字体本身的大小,那么改行文本将在指定的行高内呈现垂直居中的效果。
属性:line-height
取值:以px为单位的数值
5.首行文本缩进
属性:text-indent
取值:以px为单位的数值
6.文字阴影
属性:text-shadow
取值:h-shadow v-shadow blur color;
练习:
在上面文本练习的基础上,增加以下效果:
1.文本排列方式为两端对齐
2.文本的修饰为下划线
3.行高设为100px,并观察设完行高后的文本效果
4.文本阴影,水平和垂直偏移0px,模糊距离为3px,颜色红色
4.表格
1.表格的常用属性
1.边距属性:padding
2.边框属性:border
3.尺寸属性:width,height
4.文本格式化属性:font-*,text-*,line-height
5.背景属性:颜色,图片,渐变
6.vertical-align
作用:指定单元格数据的垂直对齐方式
取值:
top:上对齐
middle:居中对齐
bottom:下对齐
原文地址:https://www.cnblogs.com/QiliPING9/p/9027760.html