CSS学习经验总结

我是二道 — Sun, 18 May 2008 18:26:20 +0000

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.网页背景的控制

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

7.边界与填充距的区别

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

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主题而写下，希望可以给一些有需要的朋友一点帮助。

把一切美化 » CSS

CSS学习经验总结