1、Css 知识点总结Css 知识点总结 .1基本格式： 31、派生选择器 32、 id 选择器（选择器以 “#“ 来定义）： .3如何插入样式表 41、外部样式表 42、内部样式表 43、内联样式 44、多重样式 4css 背景 51、背景色 52、背景图像 53、背景重复 64、背景定位 65、背景关联 6css 文本 71、文本颜色：text-indent 属性： 72、水平对齐：text-algin 属性： 73、字间隔：word-spacing 属性 .85、字符转换 text-transform 属性 86、文本装饰 87、 direction 属性规定文本的方向 / 书写方向。 .8
2、CSS 字体 91、 font 属性 92、 font-family 属性 93、 font-style 属性 .104、 font-variant 属性 .105、 font-weight 属性 .106、 font-size 属性 117、 line-height 属性 .11CSS 列表 121、 设置所有的列表属性 .122、 list-style-type 属性 123、 list-style-position 属性 .134、 list-style-image 属性 13CSS 表格 141、 border-collapse 属性 .142、 border-spacing 属性 1
3、43、 caption-side 属性 154、 empty-cells 属性 155、 table-layout 属性 .15CSS 框模型概述 16CSS 内边距 16CSS 边框 171、 border 简写 .172、 4 个边框分别设置 .18CSS 外边距 181、 margin 属性 .18基本格式：三种格式：（CSS 语法由三部分构成：选择器、属性和值）例：body color: blue1、派生选择器例：Css 部分：strong color: red;h2 color: red;h2 strong color: blue;Html 文件部分:The strongly emp
4、hasized 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: centerHtml 文本：This heading will be center-alignedThis paragr
5、aph will also be center-aligned.如何插入样式表1、外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。标签在（文档的）头部：浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。2、内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 标签在文档头部定义内部样式表，就像这样:hr color: sienna;p margin-left: 20px;body background-image: url(“imag
6、es/back40.gif“);3、内联样式要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：This is a paragraph4、多重样式如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。例如，外部样式表拥有针对 h3 选择器的三个属性：h3 color: red;text-align: left;font-size: 8pt;而内部样式表拥有针对 h3 选择器的两个属性：h3 text-align: right; font-size: 20pt;假如拥
7、有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：color: red; text-align: right; font-size: 20pt;即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。css 背景1、背景色background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。例：这条规则把元素的背景设置为灰色：p background-color: gray;2、背景图像background-image 属性为元素设置背景图像。background-image 属性
8、的默认值是 none，表示背景上没有放置任何图像。例：如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：body background-image: url(/i/eg_bg_04.gif);3、背景重复background-repeat 属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始。例：body background-image: url(/i/eg_bg_03.gif);
9、background-repeat: repeat-y;4、背景定位background-position 属性改变图像在背景中的位置：例：在 body 元素中将一个背景图像居中放置：body background-image:url(/i/eg_bg_03.gif);background-repeat:no-repeat;background-position:center;background-position 属性提供值有很多方法a) background-position 属性后面的值可为关键字：b) background-position 属性后面的值可为百分数：例 backgrou
10、nd-position:50% 50%;c) background-position 属性后面的值可为 长度值：例：background-position:50px 100px;5、背景关联您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed） ，因此不会受到滚动的影响：body background-image:url(/i/eg_bg_02.gif);background-repeat:no-repeat;background-attachment:fixedcss 文本1、文本颜色： text-indent
11、属性：例：p background-color: gray;a) 使用负值：例：text-indent: -5em;注意：在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：p text-indent: -5em; padding-left: 5em;b) 使用百分比值例：p text-indent: 20%;2、水平对齐：text-algin 属性：值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。3、字间隔： wo
12、rd-spacing 属性word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：p.spread word-spacing: 30px;p.tight word-spacing: -0.5em;This is a paragraph. The spaces between words will be decreased.This is a paragraph. The spaces between words will be increased.5、字符转换 text-transform
13、 属性text-transform 属性处理文本的大小写。这个属性有 4 个值：none 、uppercase 、lowercase 、capitalize 。默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。例：h1 text-transform: uppercase6、文本装饰text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。text-decoration 有 5 个值：none 、underli
14、ne、overline 、line-through、blink。 不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。a text-decoration: none;7、 direction 属性规定文本的方向 / 书写方向。该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不
15、支持双向文本的用户代理可以忽略这个属性。实例：把文本方向设置为“从右向左”：div direction: rtl CSS 字体1、 font 属性解释：简写属性在一个声明中设置所有字体属性。可以按顺序设置如下属性： font-style font-variant font-weight font-size/line-height font-family 可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。实例：在一个声明中设置所有字体属性：p.ex1 font:italic arial,sans-serif;p.ex2 font:ital
16、ic bold 12px/20px arial,sans-serif;2、 font-family 属性定义： font-family 属性用于设置字体系列例：如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：body font-family: sans-serif;3、 font-style 属性定义：font-style 属性定义字体的风格可能值：normal 默认值。浏览器显示一个标准的字体样式。italic 浏览器会显示一个斜体的字体样式。oblique 浏览器会显示一个倾斜的字体样式。inherit 规定应该从父元素继承字体样式。
17、实例：h1 font-size:250%;4、 font-variant 属性定义：设置小型大写字母的字体显示文本，这意味着所有的小写字母均换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。可能值：normal 默认值。浏览器会显示一个标准的字体。small-caps 浏览器会显示小型大写字母的字体。inherit 规定应该从父元素继承 font-variant 属性的值。实例：p.smallfont-variant:small-caps;5、 font-weight 属性定义：设置文本的粗细可能的值：normal 默认值。定义标准的字符。bold 定义粗体字符。bold
18、er 定义更粗的字符。lighter 定义更细的字符。100 200 300 400 500 600 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。700 800 900 inherit 规定应该从父元素继承字体的粗细。实例：p.normal font-weight:normal;6、 font-size 属性定义：可设置字体的尺寸可能的值：xx-small x-small small medium large x-large xx-large 把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。smaller 把
19、font-size 设置为比父元素更小的尺寸。larger 把 font-size 设置为比父元素更大的尺寸。length 把 font-size 设置为一个固定的值。% 把 font-size 设置为基于父元素的一个百分比值。inherit 规定应该从父元素继承字体尺寸。实例：h1 font-size:250%;7、 line-height 属性定义：设置行间的距离（行高）可能值：normal 默认。设置合理的行间距。number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。length 设置固定的行间距。% 基于当前字体尺寸的百分比行间距。inherit 规定应该从父元素继承 li
20、ne-height 属性的值。实例p.small line-height:90%CSS 列表1、 设置所有的列表属性定义：list-style 简写属性在一个声明中设置所有的列表属性。可能值：list-style-type 设置列表项标记的类型。参阅：list-style-type 中可能的值。list-style-position 设置在何处放置列表项标记。参阅：list-style-position 中可能的值。list-style-image 使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。inherit 规定应该从父元素继承 list-style 属性的
21、值。实例：ullist-style:square inside url(/i/arrow.gif);2、 list-style-type 属性定义：设置列表项标记的类型可能值：实例：ul.circle list-style-type:circle;3、 list-style-position 属性定义：设置在何处放置列表项标记可能值：实例：ul list-style-position:inside;4、 list-style-image 属性定义：使用图像来替换列表项的标记可能值：实例：ul list-style-image:url(“/i/arrow.gif“);CSS 表格所有属性列表：1
22、、 border-collapse 属性定义：设置表格的边框是否被合并为一个单一的边框可能值：实例：table border-collapse:collapse; 2、 border-spacing 属性定义：设置相邻单元格的边框间的距离（仅用于“边框分离 ”模式） 。可能值：实例：table border-spacing:10px 50px; 3、 caption-side 属性定义：设置表格标题的位置可能值：实例：caption caption-side:bottom; 4、 empty-cells 属性定义：设置是否显示表格中的空单元格（仅用于“分离边框 ”模式）可能值：实例：table
23、 empty-cells:hide; 5、 table-layout 属性定义：用来显示表格单元格、行、列的算法规则可能值：实例：table table-layout:fixed; CSS 框模型概述假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：CSS 内边距单边内边距属性：也通过使用下面四个单独的属性，分别设置上、右、下、左内边距： padding-top padding-right padding-bottom padding-left 您也许已经想到了，下面的规则实现的效果与上面的简
24、写规则是完全相同的：例：h1 padding-top: 10px;padding-right: 0.25em;padding-bottom: 2ex;padding-left: 20%;CSS 边框1、 border 简写定义：属性在一个声明设置所有的边框属性（给 4 个边框设置相同的值）可以按顺序设置如下属性： border-width border-style border-color 实例：p border:5px solid red;2、 4 个边框分别设置以上边框为例：可以按顺序设置如下属性 border-top-width border-top-style border-top-color 实例p border-style:solid; border-top:thick double #ff0000;CSS 外边距1、 margin 属性定义：属性在一个声明设置所有的外边框属性（给 4 个边框设置相同的值）可以按顺序设置如下属性： margin-top margin-right margin-bottom margin-left 实例：p margin: 20px 30px 30px 20px;
