写给CSS初学者——-成为高手要学会“自学”

以前写的，无意中翻到，感觉对初学者还有用，就发出来吧，虽然有点老（CSS2时的产物，会CSS2后，再学CSS3，会觉得也很容易）。

CSS其实很简单，只要把所有“标签”都理解为“方形框”，写CSS代码就相当于用“方形框”拼图形。

什么是“块”标签，什么是“内联”标签。

“块”标签，可以理解为，和div类似的标签，定义width height 有效果的标签。

“内联”标签，可以理解为，和span类似的标签，定义width height 没有效果的标签。

（“块”标签一般用于网页布局，“内联”标签用于修饰文本）

选择器的种类和用法，以及优先顺序。

style关联>id选择器>class选择器>html标签选择器

对于初学者一定要做的事（一直到你真正熟练运用CSS才可省略步骤1）：

1，给所有“标签”都要写“border”线，直到整段代码写完，并确认没问题才去掉“border”线

（目的是让肉眼可以看到框的具体占用的位置，同时理解属性的功能。注意：此方法比较老土，在IE6时代比较适用。如今：一定要熟练使用浏览器的F12快捷键，熟练掌握审查元素功能，对你学习非常有帮助。）

2，“从外到内”的思路。（目的是清晰思路，知道怎样去实现拼图）

代码使用技巧（什么时候使用他们）：

1，边框 border 代替网页中的线条；(IE6时代：另外主要用于调试时，帮助理解代码时使用)

2，宽度 width 所有“块”标签，都要写宽度。(除非你真正理解“继承”)

3，高度 height “块”标签高度是固定时才使用，其他时绝对不要写height，容易出兼容性问题。

4，外边距 margin “块”标签居中时；另外“块”标签之间有间距时使用（不要动不动就乱加margin）

5，内边距 padding “块”标签与内部文字之间的间距（紧记他与width和height之间的尺寸关系，非常重要）

6，浮动 float “块”标签按列排版时使用（紧记2列时建议left right,3列时left left right，还有不清除浮动会造成的问题，以及解决办法，这个标记非常重要，精通css，必先掌握之）

7，背景 background “块”标签中图片做为背景时使用（这个标记非常重要，精通css，必先掌握之）

8，定位 position 浮动实现不了或难以实现的布局，如：某些导航（使用不多，可先掌握background后，再掌握之）

9，行高 line-height 对文字排版时都要用到（注意：不是line-height height一定要一起用，这是错误的理解）

10，缩进 text-indent 文本缩进时使用（只左边文字缩进时，尽量使用text-indent，而不是使用padding-left）

11，列表 list-style 一般用于清除li属性时使用（如：li{list-style:none}）

12，居中 text-align 通常用于文本居中 （注意：“块”居中用marong:auto；文本居中用text-align:center）

13，溢出 overflow 通常用于“不显示超过对象尺寸的内容”，以及定义块标签“显示滚动条”

14，显示 display 通常三种用途 1.隐藏某一块内容；2.转换成“块”标签；3.转换成“内联”标签

15，可见性 visibility 和display:none类似，用于隐藏某一块内容，但保留占用空间（使用非常少）

技巧代码（经验的积累）：

1，一定要掌握代码的初始化写法，这个写好了，能解决以后写代码的很多问题

2，overflow:hidden; 这种写法能解决浮动高度问题；还能解决内部尺寸大，把网站撑破的问题

3，display:inline;float:left; 用于解决ie6 margin间距双倍问题。

4，word-wrap:break-word 或 word-break:break-all; 用于解决长英文字母把网站撑出问题

需要背下来的：

长度单位，如：px em

颜色单词，如：red blue yellow

颜色十六进制，如：#FF0000 #FFFFFF

（只需要背几个常用的就可以了，以上内容具体可查看“CSS2.0中文手册.chm”）

另外几个非重点代码：

伪类 :link(只做了解，不推荐写代码时使用) :hover :visited

规则 @import @charset 这两个一般不使用，但看到别人写这个代码要明白什么意思

声明 !important 一般不使用，特殊情况使用

表格 border-collapse border-spacing 能代替table标签的两个属性

关于浏览器兼容性：

我推荐写代码时,尽量用所有浏览器都支持的写法。（这需要对css属性的深刻理解和一定经验）

对于选择器前加 _ + * if 之类的兼容性写法尽量不用或少用（虽然不推荐兼容性写法，但要知道，以备不时之需）

以上是我对常用CSS代码的所有总结，其实CSS 2.0常用就这么点内容。

学会以上内容，已经踏入CSS高手（指初学者）殿堂。

另外掌握上以内容后，要想成为一个直正高手，还需要积累经验，同时，熟悉CSS手册，看一些大牛写的CSS代码，以及关注CSS新技术，逛一些技术型网站。

目前手册推荐“CSS2.0中文手册.chm”和“w3school.chm”，首选“CSS2.0中文手册.chm”，因为它更简单，适合初学者。

所在请阅读“CSS2.0中文手册.chm”的“目录”中的所有内容，要达到遇到不懂的代码，能马上准确找到你要的代码的位置，真正熟悉这个手册，熟悉程度要像一本你非常熟悉的书一样，这样你才能真正成为CSS高手。

所以要养成，写代码就打开“CSS2.0中文手册.chm”手册，没事就翻翻“CSS2.0中文手册.chm”手册，在不知不觉中提升。

==============================================

成为一个真正的高手，一定要锻炼出“自学能力”。

也就是遇到问题，不需要问别人，自己就能解决。这需要积累经验，需要一个过程。

学习最忌讳：

1，遇到点问题，就跑去问别人，别人帮解决后，还不去记下来。如果一直这样，永远不可能提升。

2，遇到点问题，就坐着发呆。

提高“自学能力”的步骤：

1，掌握不一个懂的属性的方法：

1）查手册，或者查百度，google （一般查手册就足够了）

2）照着手册的例子写代码测试。如：新建一个html文件，给属性加border线，然后修改属性值，观看显示变化

2，遇到问题，想想问题可能出现在哪里？然后，立即动手调试代码，而不是坐着发呆。

3，调试代码方法分“加边框法”和“排除法”

1）加边框法：给可以存在问题的“标记”加 border 线，这样很容易看到代码问题所在。

2）排除法：删除可能出问题的代码，如果删除代码后，网页就正常了，那么问题就出现在删除的代码部分。

一般使用“加边框法”就能解决网页问题，但有时候需要通过“加边框法”和“排除法”结合才能解决问题。

文章出自：https://www.zuifengyun.com/css-xuexi.html 版权所有，除注明外皆为原创。文章仅为作者个人观点，不代表醉风云立场。