1,189 人查看过本文  1 条留言  发布日期:2008年05月19日   文章位于: CSS  

CSS学习经验总结

1. 如何使用CSS样式?

方法总共有五种:链接外部文件、页头部分植入、导入外部文件、行内加入、脚本引用。五种方法可以同时使用,但是我认为最好还是只使用一种方法,就是链接外部文件。
页头部分的样式代码,只会定义单独一个页面的内容,而对于网站来说,它有许多的页面需要定义样式,使用页头定义就会造成代码的重复率比较高,没有工作效率。
导入外部文件与链接外部文件是同等作用,只是调用的关键字不同而已,所以二者之中只选择一个就够了。
行内加入所起到的效果相当于头疼医头,脚疼医脚,效果是很明显的,如果是多人维护一个网站的话,一个人添加的代码而其它人不知道的话应该怎么办?
有许多人都提议,减少脚本代码,或是尽量不使用脚本代码,以做到优化网页的效果。就算你不太明白是什么含义,那为何不使用一个简单的方法呢?

2.长度单位的使用

长度的单位在CSS里有很多个,有相对长度的单位,也有绝对的长度单位,还有一些关键字就代表了一定的大小。为了能够做到统一,我同样建议,只使用一个长度的单位:px 。不过百分比的单位有时用起来也会省点事。

3.网页的文字控制

如果你没有设定这部分,网页也会照常显示出来,因为一切都有默认的设定。
文字的样式我觉得最不好理解的就是字体的族科属性(font-family),首先是把字体分为几个大类别,这几个大类别下又拥有许多的字体,书写的格式就是:“字体,字体类别”。它的意思就是说,如果你设定的字体在电脑里没有的话,那就去用字体类别里的其它字体来显示。而我,是不知道都有什么字体,也不知道它们都属于哪个类别,所以让我比较犯愁。
文字其它属性,还有倾斜(font-style),变体(font-variant),加粗(font-weight),大小(font-size),这些属性全部都可以放在一起,只用一个font就可以列出。

4.网页的文本控制

许多的文字堆在一起就成为了文本。
水平排列(text-align),纵向排列(vertical-align),首行缩进(text-indent),文本间隔(letter-spacing),行间距离(line-height),文本转换(text-transform),文本修饰(text-decoration)。这些非常全面的属性设定,却也不是全部都有用到的地方。文本修饰基本上只有超链接使用到,文本转换与首行缩进几乎没有人用,可以下岗了,行高与文本间隔使用默认的就很好,无需改变,水平排列比较简单,调整左,中,右的位置,用的地方也多一些,难的就是纵向排列,这实际上也是图片与文字两者的比较,要弄清楚哪一个是参考的对像,是图片依照文字为参考,还是文字依照 图片为参考,才能做出正确的纵向排列。

5.颜色的定义标准

我推荐使用用十六进制的数组来定义颜色。强调的还是统一性,使用关键字来表示色彩只是有限的几个单词,整数与百分比的表示法,与十六进制的表示法相像。如果没有统一使用的话,那你就需要牢记四种代表色彩的方法,那不如你就牢记一种方法,岂不是省事吗?

6.网页背景的控制

在网页背景里只有两种元素:颜色与图片。它们都可以加入到任何一个块级元素中去。块级元素指的就是以成对标签出现的的元素。下划线(<br>),它就不是块级元素,因为它只有一个,而不是成对。背景色与背景图片同时的设定,可以起到相辅相成的功效,背景图片并不一定会占据整个背景,那么剩下的空间就要由背景色来填补,让整个页面形成完整性。背景图片可以设定的有:平铺(background-rrpeat),滚动(background-attachment),定位(background-position),灵活运用每一种属性,才能做出优秀的网页。

7.边界与填充距的区别

在我学习用的的书中写道,它们有很大的区别,但是我却没有感觉到。填充距(padding)指的是元素到达边框的距离,边界(margin)指的是从边框到这个元素的上一级元素的距离。在没有边框的情况下,边界的作用与填充距的作用就是相同的了。
元素与浏览器之间的距离只能使用边界来完成设定,不过这样也就只限于<body>这一个元素标签而已了。

2010.4.8--重新编辑填充距(padding)边界(margin)
边界与填充距的关系,简单来说,如同外交部与内务部的区别。
边界处理的内容是元素与外界的距离;
填充距处理的内容是元素内部与这个元素所处在的块级标签的距离;

比如你设置二个div的标签块,它们之间的间隔就是用边界来处理。
或者在一个div标签块中,一个图片到达边界的距离就是用填充距来处理。
但是在边界与填充距之间还有一个CSS属性,那就是边框。当这三个元素值为0的时候,它们的作用也就是一样的,若你是缩小边界,扩大填充距,或是扩大边框,实际的效果还是一样的,但是在网页的制作中,遵循统一的标准是必须的,让三个属性执行不同的功能是很有必要的。

8.边框
默认情况下边框的值为0,增加边框,再与填充距相配合,就可以调整元素的精确位置,或者为元素增加一点样式的变化。

9.图文排列的另一种方式:漂浮(float)

前面说过文本的纵向排列属性,实际上指的是文本与图片在纵向排列时的位置。现在就来说一下横向排列方法。它的参数只有三个,一个是左(left),一个是右(right),还有一个就是没有(none)。这个属性只能使用在图片上(用在文字上也不起作用),产生的效果却是由文字来体现的。它命令图片出现在文字的左边,或是右边,或是没有(不与文字排成一行)。举例来说,当图片的属性为{float:left},是把图片放置到文字的左边,而文字很多的时候,文字就把图片包围起来,形成环绕。但是要注意的是,这种环绕,只是对于图片后面的文字有效,图片前面的文字是不会参与图片的这种环绕的。

10.图文排列的另一种方式:清除环绕(clear)
经过我反复的测试,无论图片是在文字的前面或是后面,无论使用的是左(left),还是右(right),或是不清除(none),产生的效果都是一样的。图片都不会与文字排成一行,而是纵向排成一列。
究竟是我的错误,还是这个属性已失去效应了呢?有知道的可以给个答复吧。

11.网页元素的定位控制
定位(position)的参数有三个:绝对定位(absolute),相对定位(relative),默认值(static)。这个的属性决定了其它定位属性的坐标起点。绝对定位指的是从浏览器到元素的距离,相对定位则是指相邻的或是上级的元素,到需要定位的元素的距离。
left和top,指的是元素的左上角顶点到达上级元素的左侧距离和上侧距离。
width和height,指的是元素的宽度和高度,但是也只有在绝对定位的情况下才可以使用这两个属性。
剪切属性(clip),定义四个坐标点,在坐标点之外的内容将会被剪切掉,也就是隐藏起来不显示。网页上的坐标点的顺序,都是以上右下左排下来的。坐标点的定位一般都是从元素的左上角的顶点开起算起。

12.再讲一次环绕 与清除
继续学习的过程中了解到。清除的对像是有目标的,而且这个属性(clera)也只能用给文字。当多个图片设为漂浮状态,有左有右。这时再给文字填加清除的属性为左,那么它的命令就是漂浮状态为左的图片取消环绕,让那个图片单独一行地排列。漂浮状态在右的图片是不会受到清除命令的影响的。

13.隐藏与不显示的区别
visibility属性的参数:隐藏(hidden),当它用到元素上,在网页上面仍然保留了元素的空间,元素不显示出来;而不显示(display:none)用到元素上,它不会为元素在网页上保留空间,元素同样不显示出来。

14.项目列表
在WP的侧边栏里,用到的项目列表是比较多的地方。但是更多的是掺杂在PHP 的代码中间,有时不太好理解,恰好PHP的语言也不是太复杂,基本上还是可以能看的懂。
在项目列表里的每一项前面,都有一个标记,这个标记你可以使用数字,字母,点,这里可以使用关键字代表,同时可以使用图片来代表它,与背景图片的设置一样,图片的地址使用相对或是绝对的地址就可以了。
项目列表的文字样式也可以设置(list-style-position),这里指的是每一项列表的文字,第二行的第一个字与第一行的排列方式。如果关键字是(outside)的话,那就是默认值,第二行的第一个字与第一行的第一个字符对齐。如果关键字是(inside)的话,那么第二行的字会和第一行的列表的标记对齐。

对于CSS来说,还有更多的内容我没有接触到,不过就目前的情况来说,我是为了制作WP的主题而学习CSS。这一篇总结性的文章也是基与制作WP主题而写下,希望可以给一些有需要的朋友一点帮助。

最多人看的文章

此文章有 1 条留言

  1. langmuir 说:

    博主很有心,针对wp的css学习经验。
    深入的学习,可以搞本css权威指南嘛。

发表评论

(例如:http://erdaoo.cn)