Css知识点归纳总结.doc

资源ID：14921630 资源大小：398KB 全文页数：18页
资源格式： DOC 下载积分：4元

快捷下载

会员登录下载

微信登录下载

三方登录下载：

微信扫一扫登录

下载资源需要4元

邮箱/手机：
温馨提示：	用户名和密码都是您填写的邮箱或者手机号，方便查询和重复下载（系统自动生成）
支付方式：
验证码：	换一换

加入VIP免费专享

账号：
密码：
验证码：	换一换
当日自动登录忘记密码？

友情提示

1、下载资料失败解决办法

2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。

3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。

4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。

5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。

网站客服

侵权投诉

Css知识点归纳总结.doc

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 属性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 属性143、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文件部分:<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p><h2>This subhead is also red.</h2><h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>2、id 选择器（选择器以 "#" 来定义）：例：Css部分：#red color:red;#green color:green;Html 文本：<p id="red">这个段落是红色。</p><p id="green">这个段落是绿色。</p>3、类选择器例：Css部分：.center text-align: centerHtml文本：<h1 class="center">This heading will be center-aligned</h1><p class="center">This paragraph will also be center-aligned.</p>如何插入样式表1、外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。2、内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:<head><style type="text/css"> hr color: sienna; p margin-left: 20px; body background-image: url("images/back40.gif");</style></head>3、内联样式要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：<p style="color: sienna; margin-left: 20px">This is a paragraph</p>4、多重样式如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。例如，外部样式表拥有针对 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;即颜色属性将被继承于外部样式表，而文字排列（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_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 元素中将一个背景图像居中放置：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、背景关联您可以通过 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 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：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 设置一个负值，会把它拉近：p.spread word-spacing: 30px;p.tight word-spacing: -0.5em;<p class="spread">This is a paragraph. The spaces between words will be decreased.</p><p class="tight">This is a paragraph. The spaces between words will be increased.</p>5、字符转换text-transform 属性text-transform 属性处理文本的大小写。这个属性有 4 个值：none 、uppercase 、lowercase 、capitalize 。默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，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 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。a text-decoration: none;7、direction 属性规定文本的方向 / 书写方向。该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。实例：把文本方向设置为“从右向左”：div direction: rtl CSS 字体1、 font 属性解释：简写属性在一个声明中设置所有字体属性。可以按顺序设置如下属性：u font-style u font-variant u font-weight u font-size/line-height u font-family 可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。实例：在一个声明中设置所有字体属性：p.ex1 font:italic arial,sans-serif; p.ex2 font:italic 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规定应该从父元素继承字体样式。实例：h1 font-size:250%;4、 font-variant 属性定义：设置小型大写字母的字体显示文本，这意味着所有的小写字母均换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。可能值：normal默认值。浏览器会显示一个标准的字体。small-caps浏览器会显示小型大写字母的字体。inherit规定应该从父元素继承 font-variant 属性的值。实例：p.small font-variant:small-caps; 5、 font-weight 属性定义：设置文本的粗细可能的值：normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。100 200 300 400 500 600 700 800 900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。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把 font-size 设置为比父元素更小的尺寸。larger把 font-size 设置为比父元素更大的尺寸。length把 font-size 设置为一个固定的值。%把 font-size 设置为基于父元素的一个百分比值。inherit规定应该从父元素继承字体尺寸。实例：h1 font-size:250%;7、 line-height 属性定义：设置行间的距离（行高）可能值：normal默认。设置合理的行间距。number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。length设置固定的行间距。%基于当前字体尺寸的百分比行间距。inherit规定应该从父元素继承 line-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 属性的值。实例：ul list-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、 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 empty-cells:hide; 5、 table-layout 属性定义：用来显示表格单元格、行、列的算法规则可能值：实例：table table-layout:fixed; CSS 框模型概述假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：CSS 内边距单边内边距属性：也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：u padding-top u padding-right u padding-bottom u padding-left 您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的：例：h1 padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; CSS 边框1、 border 简写定义：属性在一个声明设置所有的边框属性（给4个边框设置相同的值）可以按顺序设置如下属性：l border-width l border-style l border-color 实例：p border:5px solid red;2、 4个边框分别设置以上边框为例：可以按顺序设置如下属性l border-top-width l border-top-style l border-top-color 实例 p border-style:solid; border-top:thick double #ff0000;CSS 外边距1、margin 属性定义：属性在一个声明设置所有的外边框属性（给4个边框设置相同的值）可以按顺序设置如下属性：u margin-top u margin-right u margin-bottom u margin-left 实例：p margin: 20px 30px 30px 20px;18 / 18文档可自由编辑打印

注意事项

本文（Css知识点归纳总结.doc）为本站会员（doc321）主动上传，三一文库仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对上载内容本身不做任何修改或编辑。若此文所含内容侵犯了您的版权或隐私，请立即通知三一文库（点击联系客服），我们立即给予删除！

温馨提示：如果因为网速或其他原因下载失败请重新下载，重复下载不扣分。