文档章节

CSS初学者到高手成长之路

liuyuantao
 liuyuantao
发布于 2016/04/09 09:55
字数 1800
阅读 11
收藏 0


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”手册,在不知不觉中提升。

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

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

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

学习最忌讳:

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

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

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

1,掌握不一个懂的属性的方法:

    1)查手册,或者查百度,google (一般查手册就足够了)

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

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

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

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

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

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

本文转载自:http://blog.csdn.net/u013510614/article/details/40652721

liuyuantao
粉丝 5
博文 134
码字总数 27666
作品 0
武汉
高级程序员
私信 提问
java初学者,应该怎么去学习?

首先,我个人比较推崇的学习方法是:先学java前端,也就是HTML,css,js,因为学习java以后肯定是往java ee方向发展的,学习完前端,在学习后端很多东西比计较容易理解! 大神的成长之路 但凡...

JAVA群450936584
2017/12/21
0
0
Linux初学者成为高手的学习步骤和建议【新手必看】

Linux初学者成为高手的学习步骤和建议 很多Linux初学者不知从何处开始学起,怎么学,感觉很茫然。Linux菜鸟要成为Linux高手,要有一个好的学习计划和规划,要不然时间花了很多,却没有效果。这里介...

不想留名
2014/06/16
899
2
【分享】大量软件编程笔记

我们团队是在做java的,有很多教学和学习经验,整理了了一些比较适用于初学者的,高手们也可以提提意见 在开始这个计划前,我想还是想和大家分享一下我对未来Java之路的憧憬,虽然Java的母公...

5566jhms
2015/12/22
140
2
WEB前端工程师编程能力提升成长之路

【背景】 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧; 如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧; 如果你是四五年的前端开发高手,没...

web前端03
2018/05/10
0
0
推荐Web技术开发 MicroSoft技术开发 电子书

Web技术开发更新日期:2009-12-515:06:12 总数:28 订阅RSS [Ajax]AjaxControlToolkit(英文).rar [Ajax]Ajax中文手册(快速上手).rar [Apache]Apache HTTP Server Version 2.2文档.rar [ASP.N......

jfyes
2009/12/05
154
0

没有更多内容

加载失败,请刷新页面

加载更多

ERC-777以太坊新代币标准解读

ERC777是一个新的高级代币标准,可以视为ERC20的升级版本,因此它解决了ERC20以及ERC223存在的一些问题,开发者可以根据自己的具体需求进行选型。 1、使用ERC820进行合约注册 有别于ERC20的自...

汇智网教程
24分钟前
2
0
代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部