Css知识点归纳总结

Css 知识点总结

Css 知识点总结 (1)

基本格式： (3)

1、派生选择器 (3)

2、id 选择器（选择器以"#" 来定义）： (3)

如何插入样式表 (4)

1、外部样式表 (4)

2、内部样式表 (4)

3、内联样式 (4)

4、多重样式 (4)

css背景 (5)

1、背景色 (5)

2、背景图像 (5)

3、背景重复 (6)

4、背景定位 (6)

5、背景关联 (6)

css文本 (7)

1、文本颜色：text-indent 属性： (7)

2、水平对齐：text-algin属性： (7)

3、字间隔：word-spacing 属性 (8)

5、字符转换text-transform 属性 (8)

6、文本装饰 (8)

7、direction 属性规定文本的方向/ 书写方向。 (8)

CSS 字体 (9)

1、font 属性 (9)

2、font-family 属性 (9)

3、font-style 属性 (10)

4、font-variant 属性 (10)

5、font-weight 属性 (10)

6、font-size 属性 (11)

7、line-height 属性 (11)

CSS 列表 (12)

1、设置所有的列表属性 (12)

2、list-style-type 属性 (12)

3、list-style-position 属性 (13)

4、list-style-image 属性 (13)

CSS 表格 (14)

1、border-collapse 属性 (14)

2、border-spacing 属性 (14)

3、caption-side 属性 (15)

4、empty-cells 属性 (15)

5、table-layout 属性 (15)

CSS 框模型概述 (16)

CSS 内边距 (16)

CSS 边框 (17)

1、border 简写 (17)

2、4个边框分别设置 (18)

CSS 外边距 (18)

1、margin 属性 (18)

基本格式：

三种格式：（CSS 语法由三部分构成：选择器、属性和值）例：body {color: blue}

1、派生选择器

例：

Css部分：

strong {

color: red;

}

h2 {

color: red;

}

h2 strong {

color: blue;

}

Html文件部分:

The strongly emphasized word in this paragraph isred.

This subhead is also red.

The strongly emphasized word in this subhead

isblue.

2、id 选择器（选择器以"#" 来定义）：

例：

Css部分：

#red {color:red;}

#green {color:green;}

Html 文本：

这个段落是红色。

这个段落是绿色。

3、类选择器

例：

Css部分：

.center {text-align: center}

Html文本：

This heading will be center-aligned

This paragraph will also be center-aligned.

如何插入样式表

1、外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。

标签在（文档的）头部：

浏览器会从文件mystyle.css 中读到样式声明，并根据它来格式文档。

2、内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

3、内联样式

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何CSS 属性。本例展示如何改变段落的颜色和左外边距：

This is a paragraph

4、多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对h3 选择器的三个属性：

h3 {

color: red;

text-align: left;

font-size: 8pt;

}

而内部样式表拥有针对h3 选择器的两个属性：

h3 {

text-align: right;

font-size: 20pt;

}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3 得到的样式是：color: red;