css3基础知识第二章控制背景-字体-文本-表格

灰太狼 2022-08-10 06:17 116阅读 0赞

有页面就会有背景，开始怎么用css控制页面背景

**控制背景：background**  
1 background-color: 规定要使用的背景颜色;  
2 background-position: 规定背景图像的位置;

作用很大，目前普遍将很多张图片放到一张图片中，可以通过该方法获取某一图片  
3 background-size:规定背景图片的尺寸;  
4 background-repeat:规定如何重复背景图像;

no-repeat:背景图片不平铺;

repeat-x:背景图片沿x轴平铺;

repeat-y:背景图片沿y轴平铺  
5 background-image:把图像设置为背景;

<!doctype html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>background</title>
    		<meta name="Keywords" content="关键词,关键词">
    		<meta name="Description" content="">
    		
    		<style type="text/css">
    			*{margin:0;padding:0;}
    			.img1{background:url("images/1.gif")no-repeat;width:130px;height:130px;}
    			.img2{background:url("images/1.gif")repeat-x;height:130px;}
    			.img3{background:url("images/1.gif")repeat-y;width:130px;height:390px;}
    			.img4{background:url("images/1.gif")repeat;width:390px;height:390px;}
    		</style>
     
    	</head>
    	<body>
    		<div class="img1">no-repeat 不复制，单独存在</div>
    		<div class="img2">repeat-x 以x轴复制</div>
    		<div class="img3">repeat-y 以y轴复制</div>
    		<div class="img4">repeat 以x,y轴一起复制，即全屏</div>
    	</body>
    </html>

**控制字体：font**

字体： font-family:"";

大小： font-size:;

粗细： font-weight:"blod"或者填数字

颜色： color:;

样式： font-style:;  normal(默认) italic(斜体) oblique(倾斜)；

**控制文本：text**

缩进： text-indent:2em; 2em指的是字体的2倍

下划线：text-decoration:underline;

none：去下划线；

underline：加下划线；

overline：加上划线；

line-through：中间加线；

大小写：text-transform:;

none：默认；

capitalize：每个单词首字母大写；

uppercase：全部大写；

lowercase：全部小写；

对齐：text-align:center/left/right;

首行缩进：text-index:;

行间距：line-height:2em;

字母间距：letter-spacing:50px;

单词间距：word-spacing:50px;

<!doctype html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>名字</title>
    		<meta name="Keywords" content="关键词,关键词">
    		<meta name="Description" content="">
    		<style type="text/css">
    			*{margin:0;padding:0;}
    			body{font-family:"微软雅黑";font-size:14px;font-style:oblique;font-weight:600;
    				letter-spacing:36px;color:#000;line-height:15px;text-indent:2%;}
    			p{display:block;width:300px;height:200px;}
    			.underline{text-decoration:underline;}
    			.overline{text-decoration:overline;}
    			.linethrough{text-decoration:line-through;}
    			.capitalize{text-transform:capitalize;}
    			.uppercase{text-transform:uppercase;}
    			.lowercase{text-transform:lowercase;}
    		</style>
    	</head>
    	<body>
    		<p>css3基础知识第二章控制背景-字体-文本-表格</p>
    		<span class="underline">underline</span><br /><br />
    		<span class="overline">overline</span><br /><br />
    		<span class="linethrough">linethrough</span><br /><br />
    		<span class="capitalize">capitalize transform</span><br /><br />
    		<span class="uppercase">uppercase transform</span><br /><br />
    		<span class="lowercase">LOWERCASE TRANSFORM</span><br /><br />
    	</body>
    </html>

控制表格：

1 表格边框：border ;  
2 折叠边框：border-collapse:collapse;  
3 表格宽度和高度：width ，height;  
4 表格文本对齐：text-align;  
5 表格内边距 ：padding;

因为datatables用的比较多，这个就没有案例了![大笑][laugh.gif]

如果忘记了css样式肿么办？可以在浏览器控制台中的自动补齐的功能来找到想要的内容

一起进步，一起成长，如果有问题可以留言，我会及时修改

更多干货等你来拿 [http://www.itit123.cn/][http_www.itit123.cn]

[laugh.gif]: /images/20220731/463366581dc1467e8768a73d9060c05b.png
[http_www.itit123.cn]: http://www.itit123.cn/