给初学者的20个CSS实用建议

英文原文:20-useful-css-tips-for-beginners,编译:杨礼鑫

过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护。得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式。

不论你是对用CSS建站感兴趣还是仅仅拿它让你的博客更有feel,打好基础才能盖高楼。下面让我们来看看一些对于初学者实用的CSS常识:

1、使用reset.css

火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同。这种情况下,使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。

这儿有一些常用的reset.css框架——Yahoo Reset CSSEric Meyer’s CSS ResetTripoli

2、CSS缩写

CSS缩写简化了你的CSS代码,更重要的是,它让你的代码更加整洁易懂。

不是像这样创建CSS


1

2

3

4

5

6

7

.header {

  background-color: #fff;

  background-image: url(image.gif);

  background-repeat: no-repeat;

  background-position: top left;

}

而是像这样创建CSS


1

2

3

.header {

  background: #fff url(image.gif) no-repeat top left

}

3、理解class和id

这两个选择器总是让初学者感到迷惑。在CSS中,Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式,而class是可以重复使用的。

4、实用的<li>

<li>也叫链接列表,在与<ol>或<ul>正确搭配的时候非常好用,尤其是用在导航菜单样式上。

5、少用<table>多用<div>

CSS最大的优势之一是使用<div>达到样式上的灵活多变。不同于<table>,<div>里的内容不会被锁在单元格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然,有大量表格内容时,还是用 <table>吧。

6、CSS调试工具

在设计CSS时,能够得到页面布局的预览对于优化CSS样式和纠错是很有帮助的。这里有一些免费的CSS调试工具推荐给你,你可以把它装在浏览器上:FireFox Web DeveloperDOM InspectorInternet Explorer Developer ToolbarFirebug

7、避免多余的选择器

有时你的CSS声明可以更简单,特别是你发现你的代码和下面的类似:


1

ul li { ... }


1

ol li { ... }


1

table tr td { ... }

它们可以简化为:


1

li { ... }


1

td { ... }

如上是因为<li>会且只会与<ul>或<ol>连用,就像<td>只能存在于<tr>和<table>中一样,这儿真没有把它们重复一次的必要。

8、!Important

所有被!important 标记的样式,即使它后来被重写,浏览器也只会采用被标记的那条。


1

2

3

4

.page {

  background-color:blue !important;

  background-color:red;

}

比如上面的例子,因为 margin: 0px 0px 20px; padding: 0px; font-family: ‘Microsoft YaHei‘, 宋体, ‘Myriad Pro‘, Lato, ‘Helvetica Neue‘, Helvetica, Arial, sans-serif;">9、图像替代文本

这招经常被用来把一个基于文本的<h1>title</h1>标题换成图片。按照如下所示:


1

2

3

4

5

6

h1 {

  text-indent:-9999px;

  background:url("title.jpg") no-repeat;

  width:100px;

  height:50px;

}

解释说明: text-indent:-9999px; 利用缩进把文本撤掉,然后用指定了背景和长宽的图片代替。

10、理解CSS的定位position

下列文章阐述了CSS定位position: {…}的理解和用法。

11、@import vs <link>

有两种方法可以外部引用CSS文件:@import和<link>

. 如果你不确定用哪种,Difference Between @import and link一文可以帮你选择。

12、CSS表单设计

在CSS中,设计和制定网页表格变得非常容易。以下几篇文章可以教你怎么做:Table-less formForm GardenStyling even more form controlsformee

13、设计灵感来源

如果你是想寻找一些杰出的基于CSS的网站来激发灵感,或者只是找一些好的UI,这里推荐几个网站:

3. CSS Remix

4. CSS Reboot

5. CSS Beauty

6. CSS Elite

7. CSS Mania

8. CSS Leak

不够?来个合集74 CSS Galleries

14、CSS圆角

这篇文章教你怎么用CSS制作跨浏览器的圆角边框。

15、操持代码整洁

要是你的CSS代码散乱,编完了你会发现它们乱七八糟。回顾的时候,肯定也是困难重重。对于初学者来说,最好排版规范,注释恰当。

扩展阅读

1. 12 Principles For Keeping Your Code Clean

2. Format CSS Codes Online

16、排版度量: Px Vs Em

排版的时候,如何选择度量单位px或em?如果你感到有疑惑?下面几篇文章或许能够让你更好的理解度量单位。Units of Measurement in CSSCSS Font size explainedUsing Points, Pixels, Ems, or Percentages for CSS Fonts

扩展阅读

1. CSS中强大的EM

2. CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT

3. Which font sizing is best? EM vs PX vs %

4. px – em – % – pt – keyword

5. Understanding em Units in CSS

17、CSS浏览器兼容表

我们都知道不同的浏览器对于CSS渲染方式也不相同。有个参考,图表或者清单来说明各种浏览器对CSS的兼容状况是很有用的:

CSS 支持表格: #1#2#3#4.

18、CSS中多列布局

是不是在设计中遇到左,中,右的多列问题?接下来几篇文章或许对你有帮助:

1. In Search of the Holy Grail

2. Faux Columns

3. Top reasons your CSS columns are messed up

4. Litte Boxes (examples)

5. Multi-Column Layouts Climb Out of the Box

6. Absolute Columns

19、使用免费编辑器

专用的编辑器总比记事本强吧。这儿有几个不错的推荐:Simple CSSNotepad ++A Style CSS Editor

20、理解媒体类型

当你用<link>的时候可能会遇到媒体类型。print, projection和screen是有时会用到的类型。理解和适当的使用它们可以让用户易于访问。

扩展阅读

1. CSS3 Media Queries

2. CSS and Media Types

3. W3 Media Types

4. CSS Media Types

5. CSS2 Media Types

6. CSS3 Media Queries模板

7. 使用em单位创建CSS3的Media Queries

8. iPads和iPones的Media Queries

时间: 2024-10-12 16:52:53

给初学者的20个CSS实用建议的相关文章

css写作建议和性能优化小结

1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,css只要能用来布局,把效果图排出来就可以了,其它的细节或者优化,不需要怎么考虑.但是我觉得css可不只是把页面的布局完成就是完事的,还需要考虑很多细节有优化,更不会像大家想得那么简单,在学习当中,如果发现什么技巧或者优化的点,我也会学以致用!那么今天,就分享下我总结的css写作建议和性能优化的一些问题

IOS-程序员和设计师必备的20个CSS工具

程序员和设计师必备的20个CSS工具 CSS工具是现今网站开发人员和设计人员使用的最必要和最重要的工具之一.这是因为这些CSS工具,可以为开发人员和设计人员简化手头的工作,大大减少web开发和设计工作所需的时间.而专业人员还可以在很短的时间跨度内,用一种更高效的执行方式,完成更多的工作.可惜的是,并非所有这些工具都是众所周知的.现在市场上有很多CSS工具.每一种工具都有着自己特定的功能. 其中最知名的CSS布局工具是Templatr.这工具可以帮助你创建网站,即使你对CSS和HTML所知甚少.有

适合初学者的PHP学习路线及建议

为了让各位PHP初学者可以更好地学习PHP,今天就给大家分享一些PHP的学习路线,很适合PHP初学者的学习线路和建议.文章具体如下: 我们要有一个循序渐进的学习过程,这里先把学习PHP的过程做一下概括,这和很多学习PHP的爱好者是不谋而合的: (1) 熟悉HTML/CSS/JS..网页基本元素,完成阶段可自行制作简单的网页,对元素属性相对熟悉 (2) 理解动态语言的概念和运做机制,熟悉基本的PHP语法 (3) 学习如何将PHP与HTML结合起来,完成简单的动态页面 (4) 接触学习MySQL,开

给JavaScript新手的24条实用建议

本文列出了24条能让你的代码编写过程更为轻松高效的建议.也许您还是JavaScript初学者,刚刚写完自己的Hello World,那这里有很多对您的工作将十分有用的小贴士:也许有些技巧您已经知道,那就试试快速浏览一下,看能不能发现一点新东西吧! 1. 用 === 代替 ==JavaScript里有两种不同的相等运算符:===|!== 和==|!=.相比之下,前者更值得推荐.请尽量使用前者. “如果两个比较对象有着同样的类型和值,===返回true,!==返回false.” – JavaScri

CSS3笔记和CSS实用技巧

CSS/CSS3在线手册:http://www.css119.com/book/css/   50个CSS代码片段必备:http://blog.csdn.net/holandstone/article/details/17613089   CSS规范和常用模块代码段:http://nec.netease.com/   必须熟记的30类CSS选择器:http://bbs.html5cn.org/thread-85312-1-1.html   CSS制作水平垂直居中对齐所有办法:http://www

2016.4.20(css)

padding值的区别:1.四个值:上 右 下 左2.三个值:上 左右 下3.两个值:上下 左右4.一个值:上下左右 响应式布局:一般用em为单位 postion定位 三种定位机制:1.普通流(标准流)2.浮动 3.绝对定位(脱离文档流) static:静态定位(无定位)relative:相对定位 相对原位置(偏移)注意:在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间,因此,移动元素会导致他覆盖其他框absolute:绝对定位 相对最初包含块最近定位元素脱离文档流fixed:固定定位

一些比较高效的CSS写法建议

当浏览器解析html的时候,它构造了一个文档树来展现所有被显示的元素. 它在特定的样式表中去匹配元素,根据标准的css的层叠,继承和顺序规则, 在mozilla的实现中(可能其他的也是这样),对于每一个元素,css引擎通过规则去寻找匹配,css引擎评估每一个规则是从右到左的,从最右的selector开始, 也称之为key selector,直到找到匹配为止. 根据这个规则,越少的规则使用,css引擎将评估的越好.因此,移除没有用的css是改善页面性能的重要一步.之后,对于页面包含很多的元素的cs

20 个 CSS 高级技巧汇总

使用技巧会让人变的越来越懒,没错,我就是想让你变懒.下面是我收集的CSS高级技巧,希望你懒出境界. 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } 2

CSS写作建议和性能优化总结(未完待续)

这里是我从网上的一篇文章看过来的,这里先做一点小结,之后再补充. 1.CSS渲染规则 今天在微博的一篇文章上看到的,之前我都以为渲染是从左往右渲染.发现我的想法是错的.之所以采用从右往左的渲染规则,是因为这样渲染的性能会比较好一点. 2.嵌套层级不要超过3级 一般情况下,元素的嵌套层级不能超过3级,过度的嵌套会导致代码变得臃肿,复杂,导致css文件体积变大,造成性能浪费,影响渲染的速度 3.图片最好要设置width和height 如果页面有使用img标签,那么img很建议设置width和heig