第四次网页前端培训笔记（P11-P12）

CSS常用属性设置

1 背景

CSS背景属性用于定义HTML元素的背景效果

1.1 background-color

设置元素的背景颜色

body {

background-color:#ff0000;

}

1.2 background-image

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

body {

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

}

1.3background-repeat

设置是否及如何重复背景图像

body {

background-image:url(img/logo.jpg);

background-repeat:no-repeat;

}

2 文本

2.1 color

body {

color:blue;

}

h1 {

color:#00ff00;

}

h2 {

color:rgb(255,0,0);

}

2.2 text-align

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

body {

text-align:center;

}

h1 {

text-align:right;

}

h2 {

text-align:right;

}

2.3 text-decoration

规定添加到文本的修饰，属性值：none\underline\overline\line-through

underline:对文本添加下划线，与HTML的u元素相同

overline:对文本添加下滑线

line-through:对文本添加中划线，与HTML中的s和strike元素相同

none:关闭原本应用到元素上的所有装饰 h3{text-decoration:underline;}

2.4 text-indent

设置文本首行缩进

p.ident2 {

text-indent:2em;

}

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

3 对齐方式

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

left ~把文本排列到左边。默认值：由浏览器决定。

right~把文本排列到右边。

center~把文本排列到中间。

justify~实现两端对齐文本效果。

inherit~规定应该从父元素继承text-align属性的值。

4 display属性

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

none~此元素不会被显示

block~此元素将显示为块级元素，此元素前后会带有换行符。

inline-block ~行内块元素。

list-item~此元素会作为列表显示。

5. 浮动

float的属性值有none、left、right

只有横向浮动

6. 盒子模型

border

设置所有的边框属性。

（1）可同时设置边框的宽度、样式、颜色

table,th,td{

border:1px solid black;

}

table {

width:100%;height:50px;

}

（2）使用border-width、border-style、border-color单独设置。

table.td {

border-width:1px;

border-style:dotted;

border-color:green;

}

（3）border-style的属性

none:默认无边框

dotted:定义一个点线边框

（4）border-collapse

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

table {

border-collapse:collapse;

}