快速提升CSS编码能力的五个必备知识点
2013-11-20 22:01
183 查看
作为web开发人员,无论你是前端开发或者是后端开发,也无论你是新手还是大神,对于CSS的知识了解都是需要,在这篇文章中,我们将从五个不同的角度帮助大家快速的提升自己的CSS水平,如果你能够在以下五点有所突破的话,CSS的编码能力肯定会有一定的提升。
1. 了解CSS中的定位(position)
如果你需要深度的了解CSS如何移动HTML元素,或者控制元素的位置和显示的话,定位是一个不可获取的基本知识,而且除了了解简单和具有普遍性的定位外,你需要了解他们具体的不同。
其实这里包含了5个基本的定位方式,如果你不能直接说出名字来的话,那么你需要好好的了解一下这方便的知识了,包含:
static
relative
absolute
inherit
fixed
以上五种定位你都需要了解,但是实际最常用的是relative和absolue。
2. 熟练的掌握float
当你初次学习CSS的时候,float肯定是最让你头疼的地方,但是一旦你了解了基本的知识,你就慢慢会了解如何处理clear
fix和overflow相关的操作。
你需要的就是比较有深度的介绍float相关的技巧及其行为的文章。
3. 了解选择器
为了写出清爽并且简洁的CSS,你需要对于选择有一定的了解,听起来可能比较简单,但是在实际的运用场景中,会比较复杂。
对于这个主题,需要学习的内容很多,虽然你可能觉得不需要了解那么多炫酷的选择器,但是对于每天都需要接触到CSS的我们来说,还是应该能力了解相关的含义。
4. 学习DRY Coding概念
“不要重复自己”,这个简单的俗语拥有非常深层次的含义。但你真正的开始使用DRY coding的时候,你将得到非常干净整齐的代码。
和前端我们介绍的主题不太一样,这个主题内容比较狭窄,主要就是使用CSS预编译。
当然很多人号称使用预编译导致了更差的代码编写,但实际相反。CSS预编辑器帮助避免了重复的工作和内容。看看类似LESS和SASS的输出代码,可以看到它们让我写出了更加优美的代码。一旦你喜欢上了这样方式,你肯定会爱不释手的。
5. 了解浏览器的支持
最后一条就是你应该知道你的CSS在哪里可以正常工作。 CSS3可能无法忽视,但是可悲的现实是有些浏览器它并不支持(例如IE老版本)
对于一些新的开发工程师来说,可能并不是去记住那个CSS特性在浏览器中被支持或者不被支持,而是应该去哪里去查找。
对于上面我们介绍的5学习CSS的重点提高的方便,如果你能够真正的了解和学习,相信在非常短的时间内,你的CSS编码水平会有一个非常高的提升,还想什么,开始学习吧!
1. 了解CSS中的定位(position)
如果你需要深度的了解CSS如何移动HTML元素,或者控制元素的位置和显示的话,定位是一个不可获取的基本知识,而且除了了解简单和具有普遍性的定位外,你需要了解他们具体的不同。
其实这里包含了5个基本的定位方式,如果你不能直接说出名字来的话,那么你需要好好的了解一下这方便的知识了,包含:
static
relative
absolute
inherit
fixed
以上五种定位你都需要了解,但是实际最常用的是relative和absolue。
2. 熟练的掌握float
当你初次学习CSS的时候,float肯定是最让你头疼的地方,但是一旦你了解了基本的知识,你就慢慢会了解如何处理clear
fix和overflow相关的操作。
你需要的就是比较有深度的介绍float相关的技巧及其行为的文章。
3. 了解选择器
为了写出清爽并且简洁的CSS,你需要对于选择有一定的了解,听起来可能比较简单,但是在实际的运用场景中,会比较复杂。
对于这个主题,需要学习的内容很多,虽然你可能觉得不需要了解那么多炫酷的选择器,但是对于每天都需要接触到CSS的我们来说,还是应该能力了解相关的含义。
4. 学习DRY Coding概念
“不要重复自己”,这个简单的俗语拥有非常深层次的含义。但你真正的开始使用DRY coding的时候,你将得到非常干净整齐的代码。
和前端我们介绍的主题不太一样,这个主题内容比较狭窄,主要就是使用CSS预编译。
当然很多人号称使用预编译导致了更差的代码编写,但实际相反。CSS预编辑器帮助避免了重复的工作和内容。看看类似LESS和SASS的输出代码,可以看到它们让我写出了更加优美的代码。一旦你喜欢上了这样方式,你肯定会爱不释手的。
5. 了解浏览器的支持
最后一条就是你应该知道你的CSS在哪里可以正常工作。 CSS3可能无法忽视,但是可悲的现实是有些浏览器它并不支持(例如IE老版本)
对于一些新的开发工程师来说,可能并不是去记住那个CSS特性在浏览器中被支持或者不被支持,而是应该去哪里去查找。
对于上面我们介绍的5学习CSS的重点提高的方便,如果你能够真正的了解和学习,相信在非常短的时间内,你的CSS编码水平会有一个非常高的提升,还想什么,开始学习吧!
相关文章推荐
- 快速提升代码能力(1)
- 新型语音协处理器提升快速精确语言识别及处理能力
- CSS 快速提升设计可读性和维护性
- 12月课程表|线下实战演练,快速提升你的运营能力
- 快速提升代码能力(6)
- 刚踏入职场的程序员(2年以内初级程序员)如何快速踏实地提升自己的能力
- 1月课程表|线下实战演练,快速提升你的运营能力
- 【OC加强】OC编程语言强化知识点简单归纳——理解OC提升能力之用
- Atitit 招人之道 招不到人怎么办 attilax著 1. 适当降低要求 水至清则无鱼 太严格了就没有人了 2 1.1. 学历可以提升 可以开个企业内部学院快速提升学历 2 1.2. ,能力可以
- 7个知识点快速入门,Web前端初学者必备
- 提升效率必备,9 篇论文帮你积累知识点 | PaperDaily #06
- HTML&CSS 知识点快速入门(一)
- 网页编程基础第二章知识点总结——HTML&CSS快速入门
- 快速提升代码能力(4)
- 基础都掌握了却还是敲不出代码?编程新手如何快速提升coding能力?
- 如何能够快速提升自己的工作能力?
- 想快速玩转Axure,同时提升交互能力和产品思维?试试这个1000+人推荐的秘密武器
- 五个必备能力告诉你如何做垂直自明星?