20个初学者实用的CSS技巧
过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护。得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式。
不论你是对用CSS建站感兴趣还是仅仅拿它让你的博客更有feel,打好基础才能盖高楼。下面让我们来看看一些对于初学者实用的CSS常识:
1、使用reset.css
火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同。这种情况下,使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。
这儿有一些常用的reset.css框架——Yahoo Reset CSS、Eric Meyer’s CSS Reset和Tripoli。
扩展阅读
2. Drupal主题的基础样式—reset、base、layout、print
9. CSS Frameworks + CSS Reset: Design From Scratch
10. Quick Tip: Create Your Own Simple Reset.css File
11. NO CSS RESET
12. http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/
13. CSS-reset
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 } |
扩展阅读
1. Introduction to CSS Shorthand
2. Useful CSS shorthand properties
4. Efficient CSS with shorthand properties
6. Understanding CSS Shorthand
8. 5 CSS shorthand tips and how to optimize CSS
3、理解class和id
这两个选择器总是让初学者感到迷惑。在CSS中,Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式,而class是可以重复使用的。
扩展阅读
1. Class vs. ID
3. Applying Class and ID together
4. The Difference Between ID and Class
4、实用的<li>
<li>也叫链接列表,在与<ol>或<ul>正确搭配的时候非常好用,尤其是用在导航菜单样式上。
扩展阅读
1. Taming Lists
2. Amazing LI
5、少用<table>多用<div>
CSS最大的优势之一是使用<div>达到样式上的灵活多变。不同于<table>,<div>里的内容不会被锁在单元格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然,有大量表格内容时,还是用 <table>吧。
扩展阅读
6、CSS调试工具
在设计CSS时,能够得到页面布局的预览对于优化CSS样式和纠错是很有帮助的。这里有一些免费的CSS调试工具推荐给你,你可以把它装在浏览器上:FireFox Web Developer、DOM Inspector、Internet Explorer Developer Toolbar、Firebug
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 ; } |
比如上面的例子,因为background-color:blue 被标记为!important ,即使后来有把背景改成红色的语句,也只采用被标记的那条。!important 用来强制使一个样式避免在之后的编码中被修改,遗憾的是IE不支持。
扩展阅读
1. !important CSS Declarations: How and When to Use Them
2. When Using !important is The Right Choice
3. Everything You Need to Know About !important CSS Declarations
9、图像替代文本
这招经常被用来把一个基于文本的<h1>title</h1>标题换成图片。按照如下所示:
1
2
3
4
5
6
|
h 1 { text-indent : -9999px ; background : url ( "title.jpg" ) no-repeat ; width : 100px ; height : 50px ; } |
解释说明: text-indent:-9999px; 利用缩进把文本撤掉,然后用指定了背景和长宽的图片代替。
扩展阅读
3. Nine Techniques for CSS Image Replacement
10、理解CSS的定位position
下列文章阐述了CSS定位position: {…}的理解和用法。
扩展阅读
3. Using Absolute Positioning in CSS
5. An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning
6. Absolute, Relative, Fixed Positioning: How Do They Differ?
11、@import vs <link>
有两种方法可以外部引用CSS文件:@import和<link>
. 如果你不确定用哪种,Difference Between @import and link一文可以帮你选择。
扩展阅读
1. 诡异的@import
12、CSS表单设计
在CSS中,设计和制定网页表格变得非常容易。以下几篇文章可以教你怎么做:Table-less form、Form Garden、Styling even more form controls、formee。
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代码散乱,编完了你会发现它们乱七八糟。回顾的时候,肯定也是困难重重。对于初学者来说,最好排版规范,注释恰当。
扩展阅读
16、排版度量: Px Vs Em
排版的时候,如何选择度量单位px或em?如果你感到有疑惑?下面几篇文章或许能够让你更好的理解度量单位。Units of Measurement in CSS、CSS Font size explained、Using Points, Pixels, Ems, or Percentages for CSS Fonts。
扩展阅读
1. CSS中强大的EM
2. CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT
17、CSS浏览器兼容表
我们都知道不同的浏览器对于CSS渲染方式也不相同。有个参考,图表或者清单来说明各种浏览器对CSS的兼容状况是很有用的:
18、CSS中多列布局
是不是在设计中遇到左,中,右的多列问题?接下来几篇文章或许对你有帮助:
1. In Search of the Holy Grail
2. Faux Columns
3. Top reasons your CSS columns are messed up
5. Multi-Column Layouts Climb Out of the Box
19、使用免费编辑器
专用的编辑器总比记事本强吧。这儿有几个不错的推荐:Simple CSS、Notepad ++、A Style CSS Editor
20、理解媒体类型
当你用<link>的时候可能会遇到媒体类型。print, projection和screen是有时会用到的类型。理解和适当的使用它们可以让用户易于访问。
扩展阅读
译者手语:初次翻译前端技术博文,整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!
20个初学者实用的CSS技巧的更多相关文章
- 100个实用的CSS技巧,以及遇见的问题和解决方案。
前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个. 本案例都是经本人实测 ...
- 20个很有用的CSS技巧
导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的 ...
- Css学习总结(1)——20个很有用的CSS技巧
1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: graysca ...
- 一个很实用的css技巧简析
我是小雨小雨,专注于更新有趣.实用内容的小伙,如果内容对大家有一点帮助,那么就请动动手指,给个关注.点赞支持一下吧. ^ - ^ 序言 前两天接到一个需求,其中包括一个有序的列表,我们今天就来看看这个 ...
- 分享几个很实用的CSS技巧对前端技术很有帮助
创建剪切动画 对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低. .animate { width: 200px; height: 200px; backg ...
- 学无止境的CSS(xHTML+CSS技巧教程资源大全)
本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...
- 应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...
- 你应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单. 说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与 ...
- 20个最新的照片 PS 技巧,提升摄影水平
相信很多人都知道 Photoshop 在照片编辑方面的强大,所以几乎每张照片经过 PS 处理后都可以变成一个真正的杰作.这里分享的这组 Photoshop 教程可以帮助你学习到新的照片处理技术.你会发 ...
随机推荐
- STL容器 -- Set
核心: set 是一个数学含义上的集合-----保证了每个数的确定性, 互异性, 不仅如此, set 中的元素还是有序的. 头文件: #include <set> 拓展:由于 set 内的 ...
- 洛谷P2731 骑马修栅栏 [欧拉回路]
题目传送门 骑马修栅栏 题目背景 Farmer John每年有很多栅栏要修理.他总是骑着马穿过每一个栅栏并修复它破损的地方. 题目描述 John是一个与其他农民一样懒的人.他讨厌骑马,因此从来不两次经 ...
- 如何制作RTS游戏的寻路系统?
Q1:我们在做一个RTS游戏,开始用的是Unity自带的NavMesh的寻路,但发现这个并不适合RTS多人寻路,因为总会出现阻挡和闪跳的问题.看Asset Store上的A* path插件评论说在碰撞 ...
- Java常用工具类之时间转换(注释乱码,全)
package com.wazn.learn.util; import java.text.ParseException; import java.text.SimpleDateFormat; imp ...
- SSMdemo:租房管理系统
使用ssm框架整合,oracle数据库 框架: Spring SpringMVC MyBatis 导包: 1, spring 2, MyBatis 3, mybatis-spring 4, fastj ...
- Prime Number CodeForces - 359C (属于是数论)
Simon has a prime number x and an array of non-negative integers a1, a2, ..., an. Simon loves fracti ...
- bzoj 1670: [Usaco2006 Oct]Building the Moat护城河的挖掘 -- 凸包
1670: [Usaco2006 Oct]Building the Moat护城河的挖掘 Time Limit: 3 Sec Memory Limit: 64 MB Description 为了防止 ...
- 【原】【Git】EGit强制覆盖本地文件
今天带来的是EGit使用中有时会用到的一个技巧,强制覆盖本地.EGit强制覆盖远端(其实没有这个说法),在另一篇文章中写了http://www.cnblogs.com/guodongdidi/p/48 ...
- Git与SVN
http://www.nowamagic.net/academy/detail/48160207 前面提到,Linus一直痛恨CVS及SVN这些集中式的版本控制系统,为什么呢?Git是分布式版本控制系 ...
- 安卓之service简单介绍
一 什么是Service 二 如何使用Service 三 Service的生命周期 一 什么是Service Service,看名字就知道跟正常理解的“服务”差不多,后台运行,可交互这样的一个东西 ...