CSS2+DIV的学习心得

作者: 来源: 更新时间:2013-03-02 12:12:34 点击:
一、对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;

设置对象的边框样式。 当你指定了边框颜色( border-color )和边框宽度( border-widtd )时,你必须同时指定边框样式( border-style ),否则边框不会被呈现。
border-width : medium | thin | thick | length;设置对象边框的宽度。
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;设置对象边框的样式。
border-color : color;设置对象边框的颜色。
border-collapse: collapse;可以使表格无边框。

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;

使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
background-color: transparent | color;设置对象的背景颜色。
background-image: none | url ( url );设置对象的背景图像。
background-repeat: repeat | no-repeat | repeat-x | repeat-y;设置对象的背景图像是否及如何铺排。
background-attachment: scroll | fixed;设置对象的背景图像是随对象内容滚动还是固定的。
background-position:x y;设置对象的背景图像的位置,注意,x是图片相对于层x轴方向的位置,y是图片相对于层y轴方向的位置,x、y如果他们的值是具体的像素值或百分比,那就是他们相对于层的间距;
如果值是x( left | center | right) y(top | center | bottom)这种方位,就是他们相对于层的定位。

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更加清晰合理。