Css知识点归纳总结.docVIP

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文件部分: pThe strongly emphasized word in this paragraph isstrongred/strong./p h2This subhead is also red./h2 h2The strongly emphasized word in this subhead isstrongblue/strong./h2 2、id 选择器选择器以 # 来定义Css部分： #red {color:red;} #green {color:green;} Html 文本： p id=red这个段落是红色。/p p id=green这个段落是绿色。/p类选择器Css部分： .center {text-align: center} Html文本： h1 class=centerThis heading will be center-aligned/h1 p class=centerThis paragraph will also be center-aligned./p 如何插入样式表外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。link 标签在（文档的）头部：head link rel=stylesheet type=text/css href=mystyle.css / /head 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。 内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表，就像这样: head style type=text/css hr {color: sienna;} p {margin-left: 20px;} body {background-image: url(images/back40.gif);} /style /head 内联样式要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距： p style=color: sienna; margin-left: 20px This is a paragraph /p 多重样式 如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样