CSS基础复习（续）-蒲公英云

border 与box 边线，盒子模型

border属性：用来设置元素的边框

(块级元素有边线)

四边设置

border:width值 style值 color值；

单边设置

border-left:width

p，段落也是块级

四边设置 border

p{ border:1px solid #CCC;}

border 加冒号多粗,然后空格虚线还是实线实线是 solid ，然后空格颜色。

单边设置border

有些时候标题会加上边框，左边是一个比较宽的边，然后下面是一个比较窄的边框。。

h1{

border-left:15px solid #999;

border-bottom:2px solid #999;

}

就在标题的左面加了一个框框，因为很粗是5px的，所以像一个实心的块块，在左面

然后下面是一个2px厚的线。

也就是说，不是直接进行四边设置，而是单独的对某一边进行设置。

RGB 调颜色，每一个都是从0-255的

rgb(10,20,30 ) 就代表一个颜色用10进制表示

rgb( 20%,30%,50% ) 用百分比表示

每一位用16进制表示十六进制表示

以#号开头，前两位红色，中间两位绿色，后两位蓝色

背景色

background-color

背景图片

background-image:url(‘ ’);

#qwe{color:#F00;background-image:url(1.png);}

默认情况下，背景图片在水平和垂直方向上重复出现，创建一种墙纸的效果。

background-repeat 属性可以控制背景图片的平铺效果

取值：

repeat: 在垂直方向和水平方向重复，为重复值

repeat-x : 仅在水平方向重复

repeat-y：仅在垂直方向重复

no-repeat: 仅显示一次

background-position 属性用于改变背景图片在元素中的位置。

background-position:center; 图片居中

默认情况下，背景图片会随着页面的滚动而移动。

可以通过background-aattachment属性改变此特征

默认值是scroll :背景会随着文档滚动。

可取值为fixed :背景图像固定，并不会随着页面的其余部分滚动，长用于实现水印的图像。

例如：

body{ background-attachment:fixed; }

这个背景图片就不会随着滚动条滚动了。

这个是让背景图片铺满整个屏幕。

background-size:100%;

文本格式化

指定字体：

font-family:value1,value2;

body{font-family:’微软雅黑’,’文泉驿正黑’,’黑体’;

}

字体大小：

font-size:value;

font-sizze:50px

字体加粗：

font-weight

font-weight:bold

控制文本格式：

文本颜色

color：value;

文本排列

text-aligin left/right/center;

文本修饰

text-decoration:none/underline;

行高

line-height:value(1.6em);

首行文本缩进

text-indent:value(2em);

例子：

text-align:center; 居中。

text-decoration:underline; 效果等同也是有个下划线。

text-indent:2em; 首行缩进2个文本。

line-height:1.6em; 设置行高为1.6.

默认文字在段落居中，设置文本的行高与p一样高。

设置了段落的height为50px；那么设置行高等于段落的高就会让段落中的文字垂直居中。

height:50px;

line-height:50px;

}

例子：设置一个超链接，点击和没点击都是白色的。

666的python，华山杯，写writeup

p a:link{color:#fff;}

p a:visited{color:#fff;}

去掉下划线：

text-decoration:none;

使文本居右

text-align:right;

设置内边距

padding-right:40px;

外边距：

margin-right:40px;

在div中居中，设置行高等于div的高。

去掉外边距：

margin:0;

表格样式

表格同样可以使用box模型，可以设置边框，内边距，宽高，以及文本格式属性。

合并相邻的边框

如果设置了单元格的边框，相邻单元格的边框会单独显示，类似双线边框。

Center

border-collapse属性：合并相邻的边框

设置是否将表格边框合并为单一边框。

border-collapse:separate/collapse;

Center 1

实例：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格样式</title>
<style type="text/css">
#t1{
    width:200px;
    border:1px solid #F00;
    padding:10px;
    margin:30px auto;
    }
#t1 td{
    border:1px solid #000;
    padding:10px;
    text-align:center;
    }
#t2{
    width:910px;
    border:1px solid #0;
    border-collapse:collapse;
    }
#t2 thead th{
    border:1px solid #ccc;
    height:40px;
    text-height:40px;
    background-color:#fbedce;
    }
#t2 tbody td{
    border:1px solid #ccc;
    width:32px;
    text-height:32px;
    text-align:center;
    }
#t2 tbody tr:hover{
    background-color:#f7f9fd;
    }
</style>
</head>
<body>
<table id="t2">
<tr>
<td>aa</td>
<td>bb</td>
</tr>
<tr>
<td>cc</td>
<td>dd</td>
</tr>
</table>
<div>
<table id="t2">
<thead>
<tr>
<th><input type="checkbox" id="all"/><label for="all">全选</label></th>
<th>序号</th>
<th>角色</th>
<th>职业</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>唐僧</td>
<td>法师</td>
<td>
<input type="button" value="删除" class="shanchu"/> 
<input type="button" value="修改" class="xiugai"/> 
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>2</td>
<td>猪八戒</td>
<td>战士</td>
<td>
<input type="button" value="删除" class="shanchu"/> 
<input type="button" value="修改" class="xiugai"/> 
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>3</td>
<td>孙悟空</td>
<td>战士</td>
<td>
<input type="button" value="删除" class="shanchu"/> 
<input type="button" value="修改" class="xiugai"/> 
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>3</td>
<td>沙僧</td>
<td>NPC</td>
<td>
<input type="button" value="删除" class="shanchu"/> 
<input type="button" value="修改" class="xiugai"/> 
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>