CSS2+DIV的学习心得

一、对CSS和页面布局的理解

1. 首先在如何写CSS之前，要先了解页面的整个布局结构，例如：主页面内容、站点导航(主菜单)、子菜单、搜索框、功能区、页脚，清楚了页面的结构，才能更好的去设计CSS样式。

2. 样式表优先级：外部<内部<内联。有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

3. 在编写样式表之前一定要注意CSS文档的编码类型一定要和HTML文档的字符集类型一致。

4. 网站一般采取HTML结构与样式分离的纯CSS布局形式，所以采取外部样式表导入的方法。样式表按区块分为几个不同的CSS文件，是为了使结构更加清晰，也是为了站点的访问及维护更加容易。

5. 先定义全局的CSS文件来定义例如body，a，p，form，input这些标签统一的规则，具体的还可以把文字，边框，链接，宽高都具体定义多个样式、。之后再定义各个部分的样式创建各自的CSS文件。

6. 选择器的优先级：标签（HTML标签，如：a{...}）< 类（以“.”开头，class="top"，如：top{...}）< ID（以“#”开头，id="ppp"，如：#ppp{...}）。

注意在同一组属性设置中标有“!important”规则的优先级最大。

7. 群选择器：定义多个标签的样式规则(标签间用逗号隔开)。例如：p,form,ul,li{...;...;...;}；

8. 派生选择器：给一个元素里的子元素定义样式。

　　①用不同规则定义不同内容块的样式，例如：#globalnav a:link或者 #subnav a:link或者#content a:link

　　②用不同规则定义相同元素的不同样式，例如：#content p和#footer p分别定义#content和#footer中p的样式

二、需要注意的一些样式用法

1. float: none || left || right;

在层布局中经常用到的一个属性，可以left/right浮动任何元素:图片、段落、div、标题、表格、列表等等，使用float属性，必须给这个浮动元素定义一个宽度。

2. clear：none || left || right || both;

不允许有浮动元素，有时可以利用clear:both;来解决浮动超出的问题达到布局效果。

3. display: block || none || inline;

设置或检索对象是否及如何显示， block:默认值，显示； none:层内容不可见，不保留层所占据的物理空间； inline:层内容不可见，但保留层所占据的物理空间。 visibility: inherit || visible || hidden;设置或检索是否显示对象。 inherit:默认值，继承父对象的可见性； visible:对象可视，hidden:对象隐藏。与 display 属性不同，此属性为隐藏的对象保留其占据的物理空间。

4. border : border-width || border-style || border-color;

5. magin x x x x(检索或设置对象四边的外补丁); padding x x x x(检索或设置对象四边的内补丁);

如果提供全部(x x x x)四个参数值，将按顺时针的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上下，第二个用于左右。
如果提供三个，第一个用于上，第二个用于左右，第三个用于下。
也可以单方向进行设置： magin-top/-right/-bottom/-left； padding-top/-right/-bottom/-left。

6. list-style-type : none;

可以设定ul/ol列表的li为无样式显示，通常与div相结合可实现表格的布局形式。

7. overflow: hidden;

不使用滚动条，也不显示超过对象范围的内容，有时要对层或者层里的对象进行clear的时候，也可以用。还有overflow-x和overflow-y，他们可以分别设置x或y轴方向的滚动条。

8. text-decoration: none || underline || blink || overline || line-through;

设置对象中的文本的装饰。 none:无装饰;underline:下划线;blink:闪烁;overline:上划线;line-through:贯穿线。

9. a:link、a:visited、a:hover、a:active

CSS中用四个伪类来定义链接的样式。
a:link{ text-decoration:none; color:#c00;}链接未访问原来的样式
a:visited { text-decoration:none; color:#c30;} 链接已被访问的样式
a:hover { text-decoration:underline; color:#f60;} 鼠标悬停在链接上的样式
a:active { text-decoration:none; color:#F90;} 在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

10. background: background-color | background-image | background-repeat | background-attachment | background-position;

11. text-align: left || right || center || justify(两端对齐);

设置或检索对象中文本的水平方向的对齐方式。 vertical-align: baseline || sub(对齐文本下标) || super(对齐文本上标) || top || text-top || middle || bottom || text-bottom，设置或检索对象内容的垂直对其方式。 baseline:默认值，对象内容与基线对齐；注意：baseline、top、text-top、middle、bottom、text-bottom，这些值的参数对象必须支持valign 的特性，这几个值才有效果。

12. position : static || absolute || relative;

static: 默认值。无特殊定位，对象遵循HTML定位规则；
absolute: 绝对定位，将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义 relative: 相对定位，对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

三、CSS编写的一些规范和技巧

1. 样式的命名规范：全部小写，类选择器和ID选择器的命名可以为了表明语义采用Camel命名法。另外要尽量使用缩写形式，不仅可以减少CSS文件的大小，而且更加容易阅读

2. 只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，而且一定不要在数值和单位之间加空格。

3. 为了避免层布局受到最大化和最小化的影响，都采用固定宽高规则。(可根据情况灵活运用)

4. 在一个标签定义多个类样式时，注意用空格隔开，要尽量避免重复的样式。

5. 调试布局时，通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。而不要用边框，例如”border:solid 1px;”，如果是添加边框的方法会增加元素的尺寸并破坏横/纵向margin的值，所以使用background更加清晰合理。

6.一些CSS文件名的命名规范：

base或basic	基本样式
layout	全部页面布局。除非改变布局否则不修改此文件。
general	颜色，风格，排版，非结构的布局。本文件可据需要经常编辑。
forms	表单的布局和风格。如果需要可以为不同的页面而分别制作表单的css文件。
index或home	用来控制主页而不考虑其他页面的样式。
print	基本的打印样式。
themes	主题样式表。
master	主要的CSS样式。
font	字体样式表。

posted on 2013-03-01 12:10 飞凡阅读(656) 评论(3) 编辑收藏举报

刷新页面返回顶部

飞凡人生路