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 新技术, 逛一些技术型网站. 推荐两个: http://www.w3schools.com/ http://www.w3school.com.cn/
目前手册推荐 "CSS2.0 中文手册. chm" 和 "w3school.chm", 首选 "CSS2.0 中文手册. chm", 因为它更简单, 适合初学者.
所在请阅读 "CSS2.0 中文手册. chm" 的 "目录" 中的所有内容, 要达到遇到不懂的代码, 能马上准确找到你要的代码的位置, 真正熟悉这个手册, 熟悉程度要像一本你非常熟悉的书一样, 这样你才能真正成为 CSS 高手.
所以要养成, 写代码就打开 "CSS2.0 中文手册. chm" 手册, 没事就翻翻 "CSS2.0 中文手册. chm" 手册, 在不知不觉中提升.
==============================================
来源: http://www.qdfuns.com/note/15703/ca637d2a27e28a29e6a1e0cc26b637f6.html