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

来源：互联网发布：python多进程共享对象编辑：程序博客网时间：2024/06/05 09:30

有页面就会有背景，开始怎么用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=""><!--css,js--><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用的比较多，这个就没有案例了

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

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

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

1 0