网页前端第四次学习笔记

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图片
repeat-y	只有垂直位置会重复背景图片
no-repeat	background-image不会重复
inherit	指定background-repeat属性设置应该从父元素继承

1.2文本

1.2.1color

body {

color:blue;

}

h1 {

color:#00ff00

}

h2 {

color:rgb(255,0,0);

}

1.2.2text-align

设置文本对齐方式，center（居中），left(左对齐)，right（右对齐）

body {

text-align:center;

}

1.2.3text-decoration

body {

text-decoration:none;

}

1.2.4text-indent

设置文本首行缩进

p.ident2 {

text-indent:2em;

}

注：em一个相对值，例如页面的文本大小为17px,则2em就为17px*2

1.3字体

1.3.1font-family

文本字体，该属性设置为文本的字体

1.4对齐方式

text-align规定元素中的文本的水平对齐方式。属性值如下：

值	描述
left	把文本排列在左边。默认值：由游览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果
inherit	规定应该从父元素继承text-align属性的值

注意：

值justify可以使文本的两端都对齐，在两端对齐的文本中，文本行的左右两端都防灾父元素的内边界上。然后调整单词和字母之间的间隔，是各行的长度恰好相等，对最后一行不生效。

display属性规定应该生成的框的类型，这个属性用于定义建立布局时元素生成的显示框类型。

值	描述
none	此元素不会被现实
block	此元素将会显示为块级元素，此元素前后会带有换行符
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
list-item	此元素会作为列表显示。

1.6浮动

float属性值有none，left，right。

1.只有横向浮动没有纵向浮动

2.会将元素的display属性变更为block

3.浮动元素的后一个元素会围绕着浮动元素（典型的运用是文字围绕图片）

4.浮动元素的前一个元素不会受到任何的影响。（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

1.7盒子模型

1.7.1border

设置所有的边框属性

可同时设置边框的宽度，样式，颜色

table，th，td {

border：1px solid black;

}

table {

width 100%;height:50px;

}

使用border-width、border-style、border-color单独设置

table，td {

border-width：1px;

border-style:dotted;

border-color:green;

}

border-style的属性

none默认无边框

dotted：定义一个点线边框

dashed：定义一个虚线边框

solied：定义实线边框

double:定义两个边框。两个边框的宽度和border-width的值相同

groove：定义3D沟槽边框。效果取决于边框的颜色值

ridge:定义3D脊边框。效果取决于边框的颜色值

inset：定义一个3D的嵌入边框。效果取决于边框的颜色值

outset：定义一个3D突出边框。效果取决于边框的颜色值

border-collapse

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

属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）

table {

border

}

1.7.2padding

设置元素的所有内边距的宽度，或者设置各边上内边距的宽度。

如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性：

td {

padding:15px;

}

单独设置个边的内边距：padding-top、padding-left、padding-bottom、padding-right

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

td.test1 {

padding:1.5cm

}

td.test2 {

padding:0.5cm 2.5cm

}

1.7.3margin

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

p.margin {

margin:2px 4px 3px 4px;

}

也可以单独设置各边的外边距，margin-top、margin-left、margin-bottom、margin-right。用法与padding相同。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1 {
				
				height: 600px;
				background-color: #EEE8AA;
				background-image: url(../img/2.jpg);
				/* 是否重复 */
				background-repeat: no-repeat;
			}
			
			#div2 {
				/* 设置字体颜色 */
				color: #0000FF;
				/* 对齐方式 */
				text-align: center;
				text-decoration: line-through overline;
			}
			a {
				/* 去除文本效果 */
				text-decoration: none;
			}
			#p1 {
				/* 对齐方式   left   center   right   justify */
				text-align: justify;
			}
			h2 {
				/* display属性 none隐藏属性 block显示属性 */
				display: none;
			}
			#d1 {
				width: 100px;
				height: 100px;
				background-color: #0000FF;
				/* 浮动 */
				float: left;
			}
			#d2 {
				width: 100px;
				height: 100px;
				background-color: #9ACD32;
				/* 浮动 */
				float: left;
			}
			
		</style>
	</head>
	<body>
		<!-- 
			背景
				背景颜色
				背景图片
				是否重复
				
		 -->
		 <div id="div1">
		 	Hello World
		 </div>
		 <hr >
		 <!-- 文本 -->
		 <div id="div2">
		 	Hello World
		 </div>
		 <!-- 去除文本效果 -->
		 <a href="">百度</a>
		 <hr >
		 <p id="P1"> 值justify可以使文本的两端都对齐，在两端对齐的文本中，文本行的左右两端都防灾父元素的内边界上。然后调整单词和字母之间的间
		 隔，是各行的长度恰好相等，对最后一行不生效。 值justify可以使文本的两端都对齐，在两端对齐的文本中，文本行的左右两端都防灾父元
		 素的内边界上。然后调整单词和字母之间的间隔，是各行的长度恰好相等，对最后一行不生效。 值justify可以使文本的两端都对齐，在两端
		 对齐的文本中，文本行的左右两端都防灾父元素的内边界上。然后调整单词和字母之间的间隔，是各行的长度恰好相等，对最后一行不生效。 
		 值justify可以使文本的两端都对齐，在两端对齐的文本中，文本行的左右两端都防灾父元素的内边界上。然后调整单词和字母之间的间隔，是
		 各行的长度恰好相等，对最后一行不生效。</p>
		 <h2 style="display: block;">Hello</h2>
		 <div id="d1"></div>
		 <div id="d2"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style type="text/css">
			#div1 {
				width: 100px;
				height: 100px;
				background-color: #FAEBD7;
				/* 设置边框 */
				border: #9ACD32 5px outset;
				/* 设置内边距 */
				padding: 15px;
				/* 设置外边距 */
				margin-top: 100px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
		 盒子模型
			padding  内边框
			border   边框
			margin   外边距
			
			border  边框
				设置边框的颜色，样式，宽度
				border：颜色 样式 宽度
					例：border：red soild 1px
				单独设置边框的颜色 样式 宽度
					border-color
					border-style
					border-width
				border-collapse
					设置是否将表格边框折叠为单一边框。
					属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）
			padding   内边距
				设置元素的所有内边距的宽度，或者设置各边上内边距的宽度。
				单独设置个边的内边距：padding-top、padding-left、padding-bottom、padding-right
				默认按照上右下左的顺序设定
				
				设置一个值：上右下左都一样
				设置两个值：上下一致，左右一致
				设置三个值：上右下，左
			margin   外边距
				设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
				可以单独设置各边的外边距，margin-top、margin-left、margin-bottom、margin-right
				
		 -->
		 <div id="div1">
		 	
		 </div>
	</body>
</html>