css中的背景、渐变 文本格式化和表格的常用属性
一.背景属性background
background属性在一个生命中设置所有的背景属性
scroll:随着页面的其余部分滚动
fixed:固定在窗口的某个位置
语法结构:
background:url(背景图像地址)
1.背景定位(background-position)
值:(1).x% y%第一个值为水平位置,第二个值为垂直位置
(2).xpx ypx(同上)
(3).left在页面或者包含元素的左边显示;
(4).center在页面或者包含元素的中间显示;
(5).right在页面或者包含元素的右边显示;
(6).top在页面或者包含元素的顶部显示;
(7).bottom在页面或者包含元素的底部显示;
2.背景绘制区域(background-clip)
值:(1).border-box:背景被裁剪到边框盒;
(2).padding-box:背景被裁剪到内边距框;
(3).content-box:背景被裁剪到内容框;
3.背景的定位区域background-origin
值:(1).border-box:背景图像相对于边框来定位;
(2).padding-box:背景图像相对于内边距框来定位;
(3).content-box:背景图像相对于内容框来定位;
二.渐变属性
渐变指,两种或者多种颜色之间的平滑过渡,可以用在任何使用背景图片的地方.
有线性渐变.径向渐变和重复渐变.
使用background-image 属性进行设置
可以取值:
(1).linear-gradient:线性渐变
linear-gradient(angle,color-point1,color-point 2 ….)
angle:指定渐变的方向,
(2).radial-gradient:径向渐变
(3).repeating-linear-gradient:重复线性渐变
(4).repeating-radial-gradient:重复径向渐变
三.文本格式化概述
1. 字体属性(为简写属性)
font:font-style font-variant font-weight font-size font-family;
不设置的值,使用默认设置
控制字体
(1).指定字体
font-family:value,value2;
(2)字体大小
font-size:value;
(3)字体加粗
font-style:normal/bold/value;
(4)字体样式
font-style:normal/italic;
(5)小型大写字母显示
font-variant:normal/amall-caps;
2.文本属性
(1)文本颜色 color:value;
(2)文本排列 text-align:left/right/center;
(3)文字修饰 text-decoration:none/underline;
(4)行高 line-height;value;
(5)首行文本缩进 text-indent:value;
(6)文本阴影 text-shadow:h-shadow v-shadow blur color;
(7)处理空白 whit-space:normal/nowrap;
(8)文本溢出 text-overflow:clip/ellipsis;
换行
(1)长单词换行 word-wrap:normal/break-word;
(2)文本换行 Word-break:normal/break-all/keep-all;
四.表格常用样式属性
1.border: 外边框;
2.line-height:
3.text-align:
.4.vertical-align:
5.border-collapse:合并单元格之间的边框.
只能对table的border使用
6.border-spacing:设定两个单元格之间的间距
第一个值为水平间距,第二个值为垂直方向的间距.
7.caption-side:设置表格标题的位置,
值:top; bottom;
8.table-layout:用来帮助浏览器如何显示或者布局一张表,既用来设置显示表格单元格.行.列的算法规则
值:auto:列宽由单元格内容设定,为默认值,即自动表格布局
fixed:列宽由表格宽度和列宽度设定,既固定表格布局.
注意:auto:table中的td的宽度和高度会根据内容的多少而变化;
fixed:如果是中文的话td的宽度固定,高度根据内容的多少而变化,没有限制,如果是英文的话,内容宽度如果超出就会溢出.
