您的位置：首页 > Web前端 > CSS

css总结知识点

2011-10-03 10:15 369 查看

css总结知识点

(2011-09-24 12:52:42)[编辑][删除]

标签：

1. HTML 标签，分为结构性和修饰性，结构性的标签是有实际意义的（例如 p,a）,修饰性的标签是为了让网页变得有样式，更好看（例如 b, font）,css（层叠样式表）就是为了把结构和样式分离

2. css必须写在<head></head>里面的<style></style>里面

3. css 由选择器 + 规则组成, 规则由属性和值组成，格式示例：div{color:red;}

4. 常用的选择器有：标签选择器（类型选择器）、class选择器（类选择器）、id选择器、后代选择器、组合选择器和并列选择器等等

5. class选择器与id选择器的区别是，class可以样式重用，而id不行，因为id就像是人的身份证，是唯一的

6. 当规则冲突，后面的覆盖前面的（最近原则）

7. css规则中

1）有数字，就要带单位（零除外），例如 div{width:200px;}

2）边框三要素：颜色大小形状例如 div{border:#F00 1px solid;}

3）层居中的要决：1、有宽度 2、左右外补丁要为auto 例如div{width:200px; margin:auto;}

4）margin的提供参数值不同个数代表不同的意思，可以参考手册

5）高度=行高，字就可以垂直居中例如div{height:200px; line-height:200px;}

8. 标签还可以分为行内标签和块级标签，行内标签的占用空间取决于内容（例如 a、span），块级标签不管内容多与少都会占用一整行（例如 div、 p）。由于行内标签一般不支持width、height，所以排版过程中都会用块级标签来布局

9. 如果需要块级标签排版在同一行，只需要给它们都加上float:left的规则即可

10. 用选择器的时候，注意不要伤及无辜。

11. 背景图默认会平铺（也叫重复），如果想背景图水平居右，垂直居中，不重复的话，可以写background:url(bg.jpg) right center no-repeat;

12. 网页当中的空白，不要再用的方法来实现（out了），而应该考虑用外补丁（margin）或内补丁（padding）来实现

13. 鼠标的形状可以通过cursor来实现，例如 div{cursor:pointer;}

二、

1. 建议将样式表独立成外部文件（有利于SEO和样式重用），然后用

<link href="XXX.css" rel="stylesheet" type="text/css" />

导入进来。

要注意两点：

1）css文件中不能有<style></style>标签

2）css样式中的背景图路径以css文件为基准

2. 有些属性是可继承的（颜色、大小、字体……），有些是不可以的（边框，内外补丁）

3. 链接有四种状态

<style>

a:link{color:red; text-decoration:none;}

a:hover{color:yellow; text-decoration:underline;}

a:active{color:green;}

a:visited{color:black;}

</sytle>

4. 优先级算法

1）选择器的总分数高，优先级就高。 100分/id选择器 10分/class 选择器 1分/标签选择器

2）分数相等的，后面的覆盖前面的（就近原则）

5. 有些属性具有相同的前缀，并且前缀本身也是一个属性，这个前缀就叫其它人的“复合属性”，例如 font就是font-size font-weight font-family .......的复合属性。复合属性多个值之间用空格隔开，有些复合属性的值有讲究顺序（例如font、margin、padding），有些没有讲究顺序（例如border）。

6. 标签（也叫节点，元素）的定位机制有三种：普通流（默认的）、浮动流和绝对定位

浮动流是一种半释放机制，它脱离文档位置向左浮动或向右浮动，本来占用的文档空间就释放出来，但浮动层的投影位置不能放内容

7. 当一个行内标签与块级标签相邻的时候，行内标签也表现为像块级一样可以独占一行，这时的行内标签称之为“隐式块级”

8. 有时可以灵活采用ul和li实现导航栏，为了避免多DIV症

三、

1. 浮动能使得块级标签排在同一行，但由于浮动脱离了文档位置，因为假如浮动层有一个不浮动的父亲层，父亲层是包不住浮动层的，就得清除浮动。

2. clear:left;叫清除左浮动，意思就是不允许左边出现浮动层

3. 清除浮动有四种常用的方法

1）给父亲层加一个子层<div class="clear"></div> 其中 .clear{clear:both;}

缺点：多一个空节点

2）给父亲层加一个高度

缺点：不适合内容高度不确定的情况

3）给父亲层加一个float属性

缺点：不适合父亲层需要居中的情况

4）给父亲层加 overflow:hidden; _height:1%;

缺点：_height:1%;的写法不符合W3C规范

以上四种方法，假如内容确定的话，优先考虑方法 2）, 然后才是方法 1）和方法 4）

一般不考虑方法 3）。另外，完善一下，

层居中的要点：

1、要有宽度

2、左右外补丁为auto

3、不能有浮动！！！！

4. overflow:hidden; 有高度height以及浮动，都会创建一个BFC（Block Format Content，块格式化内容），BFC的特点之一就是具有自动清除浮动的能力

5. 样式表可大体分为公共样式（也叫全局样式）和个性化样式，一般会习惯将公共样式独立成一个外部css文件，再通过 @import "style.css";导入进来。由于公共样式一般会写在所有样式的最前面，如果需要提高它的优先级，只需要在值后台加上!important;就可以了

6. 样式优先级的算法是

另外，用import导入的样式表优先级都会比较低，因为它会被优先加载

7. 标签的默认块级与行内是可以改变的，甚者可以隐藏的

a {display:block; }

div {display:inline; }

p {display:none; }

8. a去掉激活时的虚线框的小技巧

a {

outline:none!important;

*hide-focus:expression_r(this.hideFocus=true);

}

四、

1. css的盒子模型（box模型）

1）width和height指的不是边框与边框之间的距离，而是内容的宽高，也叫有效宽高

2）一个块级标签所占的空间等于 width或height + border +padding + margin

3）由于text-indent是算在width里面的，因些当一个容器里面只有一行文本，文本离边框需要一定距离时，优先考虑用text-indent而不是padding-left。

小技巧：text-indent:2em;可以实现首行空两格的效果

4）行高的特点是文本的上下空白会相等，因此当一个容器里面只有一行文本，容器的height等于line-height时，文本便可以垂直居中

5）一个标签（容器）与另外一个标签之间的距离，要靠外补丁margin来实现，而一个标签内部如果有多行文本，每行文本之间的距离要靠行高line-height来实现

6）普通流的块级标签中，上下的margin如果直接接触，会发生融合（重叠），融合后的高度等于最大值

2. 利用IE8，9下的F12功能，或者Firefox 的firebug功能，可以实现css的调试和预览

3. background-position的X轴和Y轴的值可以是负值，利用这个特性可以把多张小背景图合成一个大的背景图，这种称为“图像翻转技术”，优点是：

1）可以通过减少一个页面的请求连接数从而提高服务器的负载承受能力

2）提高图片的下载速度

3）保证设计特效的完整性

可以通过ImageManipulation软件来制作背景合成图

注意：

1）只能是小背景图才能合

2）如果需要背景图X轴平铺（重复），就得把合成图做成垂直排列，否则就做成水平排列。但是如果需要X轴和Y轴都平铺，就独立成一张图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航