欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

16 , CSS 边框与边界

程序员文章站 2022-05-12 19:56:56
1.CSS 中边框的使用 2.CSS 中边界的使用 16.1 CSS 中边框的使用 属性名称 属性值 说明 border-color 十六进制 可依序设置上,右,下,左线颜色 英文名称 border-color:red(四边均为红色) 三原色 border-color:red green (上下为红 ......

1.css 中边框的使用

2.css 中边界的使用

16.1 css 中边框的使用

属性名称 属性值 说明

border-color 十六进制 可依序设置上,右,下,左线颜色

英文名称 border-color:red(四边均为红色)

三原色 border-color:red green

(上下为红色,左右为绿色)

border-color:red green blue

(上为红色、左右为绿色、下为蓝色)

border-color:red green blue yellow

(上右下左分别为红绿蓝黄)

border-style none 不显示边线

dotted 点线

dashed 虚线

solid 实线

double 双线

border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;

border-width:1 2 3 4;

简化方案:border:形态 长度 颜色

例如 border:1px solid black;

16.2 css 中边界的使用

padding 属性介绍

属性名称 属性值 说明

padding-bottom 长度/百分比 元件下端边线的空隙

padding-left 长度/百分比 元件左端边线的空隙

padding-right 长度/百分比 元件右端边线的空隙

padding-top 长度/百分比 元件上端边线的空隙

简易写法:padding:10px

padding:2px 4px

padding:2px 6px 10px

padding:1px 2px 3px 4px

margin 系列属性介绍

属性名称 属性值 说明

margin-bottom auto 自动调整空隙

长度/百分比 设置下端空隙

margin-left auto 自动调整空隙

长度/百分比 设置左端空隙

margin-right auto 自动调整空隙

长度/百分比 设置右端空隙

margin-top auto 自动调整空隙

长度/百分比 设置上端空隙

简化方案:margin:2px 4px

margin:2px 6px 10px

margin:1px 2px 3px 4px

常用网页顶格设置:margin:0;

css 1css 中边框的使用

<!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">
	img{
		border-width: 6px;
		border-color:red green blue yellow;
		border-style: solid;/*必须要填,不填默认为不显示边线*/
	}
	</style>
</head>

<body>
<img src="images/pic7.jpg">
<p><pre>
css 中边框的使用
属性名称 属性值 说明
border-color 十六进制 可依序设置上,右,下,左线颜色
			英文名称 border-color:red(四边均为红色)
			三原色 border-color:red green
			(上下为红色,左右为绿色)
			border-color:red green blue
			(上为红色、左右为绿色、下为蓝色)
			border-color:red green blue yellow
			(上右下左分别为红绿蓝黄)
border-style none 不显示边线
			dotted 点线
			dashed 虚线
			solid 实线
			double 双线
border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;
					border-width:1 2 3 4;
简化方案:border:形态 长度 颜色
例如 border:1px solid black;
</pre></p>

</body>
</html>

  css 2css 中边界的使用

<!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">
	td{
		padding-top:20px;
		padding-left:10px;
	}
	table{
		margin-top: 80px;
	}
	</style>
</head>

<body>
<table border="1" width="300" height="200" cellpadding="0" cellspacing="0">
	<tr>
		<td valign="top">padding 属性介绍</td>
	</tr>
</table>
<p><pre>
 css 中边界的使用
padding 属性介绍
		属性名称 属性值 说明
		padding-bottom 长度/百分比 元件下端边线的空隙
		padding-left 长度/百分比 元件左端边线的空隙
		padding-right 长度/百分比 元件右端边线的空隙
		padding-top 长度/百分比 元件上端边线的空隙
		简易写法:padding:10px
		padding:2px 4px
		padding:2px 6px 10px
		padding:1px 2px 3px 4px
margin 系列属性介绍
		属性名称 属性值 说明
		margin-bottom auto 自动调整空隙
		长度/百分比 设置下端空隙
		margin-left auto 自动调整空隙
		长度/百分比 设置左端空隙
		margin-right auto 自动调整空隙
		长度/百分比 设置右端空隙
		margin-top auto 自动调整空隙
		长度/百分比 设置上端空隙
		简化方案:margin:2px 4px
		margin:2px 6px 10px
		margin:1px 2px 3px 4px
常用网页顶格设置:margin:0;
</pre></p>

</body>
</html>