CSS2+DIV的学习心得

shandian03

浏览: 15935 次
性别:
来自: 洛阳

最近访客更多访客>>

a133312203

guiwuye

陈雨山余

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2013-02 ( 8)
更多存档...

博客分类：

web前端

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

1. 首先在如何写CSS之前，要先了解页面的整个布局结构，例如：主页面内容、站点导航(主菜单)、子菜单、搜索框、功能区、页脚，清楚了页面的结构，才能更好的去设计CSS样式。
2. 样式表优先级：外部<内部<内联。有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
3. 在编写样式表之前一定要注意CSS文档的编码类型一定要和HTML文档的字符集类型一致。
4. 网站一般采取HTML结构与样式分离的纯CSS布局形式，所以采取外部样式表导入的方法。样式表按区块分为几个不同的CSS文件，是为了使结构更加清晰，也是为了站点的访问及维护更加容易。
5. 先创建一个全局的CSS文件来定义例如body，a，p，form，input这些标签统一的规则，具体的还可以把文字，边框，链接，宽高都具体定义多个样式、。之后再为布局中各个部分的样式创建各自的CSS文件。
6. 选择器的优先级：标签（各个标签，如：a{..}）<类（以"."开头，定义一类标签，如.top{..}）<Id（以“#”开头，定义单一标签，如：#ppp{..}）。

注意在同一组属性设置中标有“!important”规则的优先级最大。
7. 群选择器：定义多个标签的样式规则(标签间用逗号隔开)。
例如：p,form,ul,li{...;...;...;}；
派生选择器：给一个元素里的子元素定义样式。
①用不同规则定义不同内容块的样式，
例如：#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更加合理。