css修饰html (背景属性,文本格式化属性,表格属性)

一.背景属性
1.背景颜色
属性:background-color
取值:合法颜色
注意:背景颜色是从边框位置开始绘制的。
2.背景图像
属性:background-image
取值:url(“图片路径”)
3.背景平铺
属性:background-repeat
取值:默认值 repeat或no-repeat
4.背景图片尺寸
属性:background-size
取值:以px 或者 %
1.width height(以px为单位的数值)
2.width:百分比% height:百分比%(采用当前元素的尺寸占比作为背景图的尺寸)
5.背景图片位置
1.作用:改变背景图在元素中的默认位置
2.属性
属性:background-position
值:
1.x y 以px为单位的数值,并且用空格分开。
x:背景图像水平偏移的一个距离。
取值为正 向右偏移
反之向左偏移
y:背景图像垂直偏移的一个距离。
取值为正 向下偏移
反之向上偏移
2.x% y%
1.0% 0%背景在左上角
2.100% 100%背景图在右下角
3.50% 50%背景图在中间。
3.关键字
x:left / center /right
y:top / center /bottom
6.背景属性 - 简写方式
属性:background
取值:color url() repeat position;

	ex: 
		background:red;
		background:url(a.jpg) repeat 95% center

二.文本格式化属性:
1.字体属性
1.指定字体
属性:font-family
取值:由,隔开字体列表。
注意:字体用英文引号括起来。
2.指定字体大小
属性:font-size
值:px pt
3.字体加粗
属性:font-weight
取值:
1.normal: 非加粗显示
2.bold: 加粗
3.value: 取值为无单位的数字
400:normal
900:bold
4.字体样式
属性:font-style
取值:
1.normal:非斜体显示
2.italic:斜体显示

栗子:
!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
    		p{
    			font-family: "微软雅黑";
    			font-size: 20px;
    			color: #DAD55E;
    		}
     </style>
 </head>
 <body>     
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat neque odit esse eum explicabo nobis ut dolorem necessitatibus inventore dignissimos iure tempora blanditiis. Beatae suscipit inventore cupiditate commodi doloribus saepe.</p>
 </body>
</html>

三.表格属性
1.表格的常用属性
1.尺寸
通过 width 和 height 属性定义表格的宽度和高度。
2.边框
border:1px(粗细) solid(实线) green(颜色);
border-collapse 属性设置是否将表格边框折叠为单一边框:
3.文本对齐
text-align 水平对齐方式,比如左对齐、右对齐或者居中 (left/center/right)
vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐。(先设高度在设置这个属性例如vertical-align:bottom;)
4.内边距:如需控制表格中内容与边框的距离,请为 td 和 th 元素设置 padding 属性:
5.背景颜色:background-color: red(颜色);
6.文本格式化(使用上面讲的属性)
7.背景属性。。。。
8.框模型
2.表格的特有属性
1.边框合并
属性:border-collapse
取值:
1.separate :默认值,分离边框(双线边框)模式
2.collapse: 边框合并
2.边框的边距
作用:设置每两个单元格之间的距离
属性:border-spacing
取值:
1.指定一个数值
水平和垂直之间的间距 他们是一个值
2.给定两个数值
第一个值:水平间距
第二个值:垂直间距
两个数值之间使用空格隔开。

	栗子:				
<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
    		table, th, td{
					border: 5px solid red;
					}
			table{
					border-collapse:collaps;
					}
     </style>
 </head>
 <body>     
		<table class="p1" cellspacing="" cellpadding="">
			<tr><th>Header</th>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
		</table>
 </body>
</html>

你可能感兴趣的:(css,html5,css3,html)