第四次网页前端培训笔记

css的常用属性设置

1.背景

background-color：设置元素的背景颜色。

body {background-color:#b0c4de;}

background-image：设置元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

body {background-image:url('paper.gif');}

background-repeat：设置背景图像是否及如何重复。

2.文本

color：

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

texe-align:设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐。

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:left;}

3.对齐方式

 

4.display属性

 

5.Float（浮动）（left，right，，none）：

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

css盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

 

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

1.border-style属性用来定义边框的样式：

none	默认无边框
dotted	定义一个点线边框
dashed	定义一个虚线边框
solid	定义实线边框
double	定义两个边框。 两个边框的宽度和 border-width 的值相同
groove	定义3D沟槽边框。效果取决于边框的颜色值
ridge	定义3D脊边框。效果取决于边框的颜色值
inset	定义一个3D的嵌入边框。效果取决于边框的颜色值
outset	定义一个3D突出边框。 效果取决于边框的颜色值

2.padding:定义元素边框与元素内容之间的空间，即上下左右的内边距。

<style>
p.padding
{
	padding-top:25px;
	padding-bottom:25px;
	padding-right:50px;
	padding-left:50px;
}
</style>

3.Margin:定义元素周围的空间。(也可以认为定义两个元素之间的距离)

<style>
p.margin
{
	margin-top:100px;
	margin-bottom:100px;
	margin-right:50px;
	margin-left:50px;
}
</style>