第三次网页前端培训(CSS)

一,常用属性

1,背景

背景颜色

背景图片

是否重复

<style type="text/css">
  #div1 {
   width:1700px;
   height:800px;
   /*背景颜色*/
   background-color:#EEE8AA;
   /*背景图片*/
   background-image: url(img/dd.png);
   /*是否重复*/
   background-repeat: no-repeat;
  }
  </style>
 </head>
 <body>
  <div id="div1">
   Hello
  </div>

第三次网页前端培训(CSS) 

2,字体

#div2 {
   /*字体颜色*/
   color:#0000FF;
   /*对齐方式 left center right*/
   text-align: left;
   /*文本修饰*/
   text-decoration: line-through overline underline;
   /*首行缩进*/
   text-indent: 2em;
  }
  a {
   /*去除文本下划线(去除超链接的下划线)*/
   text-decoration:none;
  }
  </style>
 </head>
 <body>
<div id="div2">
   Hello World
  </div>
  < a href="">百度</ a>
 </body>
</html>

 第三次网页前端培训(CSS)

3,对齐方式(left center right justify)

#p1 {
   /*对齐方式*/
   text-align: justify;
  }
  </style>
 </head>
 <body>
<p id="p1">
   选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开
   选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开
   选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开
   选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开
   选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开
   选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开
   选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开
   选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开
   选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开
   选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开
   选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开
   选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开
   选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开
  </p >
 </body>
</html>

第三次网页前端培训(CSS) 

4,display属性

h2{
   /*display属性 none隐藏元素 block显示元素*/
   display:none;
  }

5,浮动

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>常用属性</title>
  <style type="text/css">
 /*浮动*/
  #d1 {
   width: 100px;
   height: 100px;
   background-color: #DA70D6;
   /*浮动 左浮动*/
   float: left;
  }
  #d2 {
   width: 100px;
   height: 100px;
   background-color: indianred;
   /*浮动 左浮动*/
   float: left;
  }
  </style>
 </head>
 <body>
 <div id="d1"></div>
  <div id="d2">
   
  </div>
 </body>
</html>

第三次网页前端培训(CSS) 

 二,盒子模型

1,border边框

(1)设置边框的颜色,样式,宽度

border:颜色,样式,宽度

例如:border:red soild 1px

(2)单独设置边框的宽度,颜色,样式

border-width

border-style

border-color

(3)border-collapse

设置是否将表格边框折叠为单一边框。

属性值:separate(默认,单元格边框独立),collapse(单元格边框合并)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style type="text/css">
		     #d1 {
		     	width: 100px;
		     	height: 100px;
		     	background-color: #DA70D6;
		        /*设置边框*/
				border: #008000 5px outset;
				/*设置内边距*/
				/*padding:15px;*/
				/*padding-left:20px;*/
		     }
		</style>
	</head>
	<body>
		<div id="d1"></div>
	</body>
</html>

第三次网页前端培训(CSS) 

 

2,padding 内边距

设置所有内边距的宽度,或者设置各边上内边距的宽度。

单独设置各边的内边距:padding-top,padding-left,padding-bottom,padding-right

默认按照上右下左的顺序设定

设定1个值:上右下左都一致

设置2个值:上下一致,左右一致

设置3个值:上右下,左和右一致

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style type="text/css">
		     #d1 {
		     	width: 100px;
		     	height: 100px;
		     	background-color: #DA70D6;
		        /*设置边框*/
				border: #008000 5px outset;
				/*设置内边距*/
				/*padding:15px;*/
				padding-left:20px;
		     }
		</style>
	</head>
	<body>
		<div id="d1"></div>
	</body>
</html>

第三次网页前端培训(CSS) 

 

3,margin 外边距

设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度

 单独设置各边的外边框:margin-top, margin-left, margin-bottom,margin-right

 

/*设置外边距*/
				margin-top:100px;
				margin-left:100px;

第三次网页前端培训(CSS) 

 

 

 

 

上一篇:实验8:数据平面可编程实践——P4


下一篇:CSS画三角形