《Css知识点归纳总结》由会员分享，可在线阅读，更多相关《Css知识点归纳总结（18页珍藏版）》请在金锄头文库上搜索。
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 属性规定文本的方向 / 书写方向。8CSS 字体91、font 属性92、font-family 属性9
2、3、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 属性143、caption-side 属性154、empty-cells 属性155、table-layout 属性15CSS 框模型概述16CS
3、S 内边距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 emphasized word in this paragraph isred.This subhead is also red.The strongly emphasized word
4、 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 paragraph will also be center-aligned.如何插入样式表1、外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文
5、件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。2、内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 标签在文档头部定义内部样式表，就像这样: hr color: sienna; p margin-left: 20px; body background-image: url(images/back40.gif);3、内联样式要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距
6、：This is a paragraph4、多重样式如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。例如，外部样式表拥有针对 h3 选择器的三个属性：h3 color: red; text-align: left; font-size: 8pt; 而内部样式表拥有针对 h3 选择器的两个属性：h3 text-align: right; font-size: 20pt; 假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：color: red; text-align: right; font-size: 20pt;即颜色属性将被继
7、承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。css背景1、背景色background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。例：这条规则把元素的背景设置为灰色：p background-color: gray;2、背景图像 background-image 属性为元素设置背景图像。background-image 属性的默认值是 none，表示背景上没有放置任何图像。例：如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：body background-image: url(/i/eg
8、_bg_04.gif);3、背景重复background-repeat属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始。例：body background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; 4、背景定位background-position 属性改变图像在背景中的位置：例：在 body 元素中将一个背景图像居中
9、放置：body background-image:url(/i/eg_bg_03.gif); background-repeat:no-repeat; background-position:center; background-position 属性提供值有很多方法a) background-position属性后面的值可为关键字：b) background-position属性后面的值可为百分数：例background-position:50% 50%;c) background-position属性后面的值可为长度值：例：background-position:50px 100px;5、
10、背景关联您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：body background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed css文本1、文本颜色：text-indent 属性：例：p background-color: gray;a) 使用负值：例：text-indent: -5em;注意：在为 text-indent 设置负值时要当心，如果对一个段
11、落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：p text-indent: -5em; padding-left: 5em;b) 使用百分比值例：p text-indent: 20%;2、水平对齐：text-algin属性：值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。3、字间隔：word-spacing 属性word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近
12、：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 属性text-transform 属性处理文本的大小写。这个属性有 4 个值：none 、uppercase 、lowercase 、capitalize 。默认值 none 对文本不做
13、任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。例：h1 text-transform: uppercase6、文本装饰text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。text-decoration 有 5 个值：none 、underline、overline 、line-through、blink。 不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让
