CSS基础复习（续）

旧城等待， 2022-09-25 15:15 293阅读 0赞

**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; 效果等同<u> 也是有个下划线。

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

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

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

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

p\{

height:50px;

line-height:50px;

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

<p>666的python，<a href="\#">华山杯</a>，写writeup</p>

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>

![Center 2][]

[Center]: /images/20220717/d7b39da10fac48a08be48d2c4c0bff0e.png
[Center 1]: /images/20220717/6d6f8983f87e4df7aebc388101a48acb.png
[Center 2]: /images/20220717/a137275505c0433ea9e74ddac6beb3b7.png