给初读书人的二十一个CSS实用建议,媒体类型
分类:前端技术

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

2013/02/04 · CSS · 3 评论 · 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

CSS

.header { background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; }

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

CSS

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

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 Developer、DOM Inspector、Internet Explorer Developer Toolbar、Firebug

图片 1

7、避免多余的选择器

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

CSS

ul li { ... }

1
ul li { ... }

CSS

ol li { ... }

1
ol li { ... }

CSS

table tr td { ... }

1
table tr td { ... }

它们可以简化为:

CSS

li { ... }

1
li { ... }

CSS

td { ... }

1
td { ... }

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

8、!Important

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

CSS

.page { background-color:blue !important; background-color:red; }

1
2
3
4
.page {
  background-color:blue !important;
  background-color:red;
}

比如上面的例子,因为background-color:blue 被标记为!important ,即使后来有把背景改成红色的语句,也只采用被标记的那条。!important 用来强制使一个样式避免在之后的编码中被修改,遗憾的是IE不支持。

9、图像替代文本

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

CSS

h1 { text-indent:-9999px; background:url("title.jpg") no-repeat; width:100px; height:50px; }

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 controls、formee。

图片 2

13、设计灵感来源

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

  1. CSS Remix

  2. CSS Reboot

  3. CSS Beauty

  4. CSS Elite

  5. CSS Mania

  6. CSS Leak

图片 3

不够?来个合集74 CSS Galleries

14、CSS圆角

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

图片 4

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.

图片 5

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

图片 6

19、使用免费编辑器

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

图片 7

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

 

译者手语:初次翻译前端技术博文,整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

 

赞 3 收藏 3 评论

图片 8

Media Queries

Media Queries是CSS3新增加的一个模块功能,其最大的特色就是通过CSS3来查询媒体,然后调用对应的样式。其实这个功能在CSS2.1中就有出现过,只不过那个时候此功能并不强大,我们最常见的就是给打印设备添加打印样式。随着时代的变化,这个模块功能越来越强大。

在彻底地了解Media Queries之前,我们需要了解其中的两个重要部分,第一个是媒体类型,第二个是媒体特性。

一、媒体类型

媒体类型(Media Type)在CSS2中是一个常见的属性,也是一个非常有用的属性,可以通过媒体类型对不同的设备指定不同的样式。

图片 9

在实际中媒体类型有近十种之多,实际之中常用的也就那么几种,不过媒体类型的引用方法也有多种,常见的有:link标签、@import和CSS3新增的@media几种:

link方法

link方法引入媒体类型其实就是在<link>标签引用样式的时候,通过link标签中的media属性来指定不同的媒体类型。如下所示:

<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

@import方法

@import可以引用样式文件,同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式,一种是在样式中通过@import调用另一个样式文件;另一种方法是在<head></head>标签中的<style></style>中引入,但这种使用方法在IE6~7都不支持,如样式文件中调用另一个样式文件时,就可以指定对应的媒体类型。

@importurl(reset.css) screen;

在<head>中的<style>标签中引入媒体类型方法。

<head>

<style type="text/css">

         @importurl(style.css) all;

</style>

</head>

@media方法

@media是CSS3中新引进的一个特性,被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。

(1)在样式文件中引用媒体类型:

@media screen{

          选择器{/*你的样式代码写在这里...*/}

}

(2)使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。

<head>

<style type="text/css">

    @media screen{

     选择器{/*你的样式代码写在这里...*/}

}

</style>

</head>

Media Queries能在不同的条件下使用不同的样式,使页面在不同的终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中,但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。

@media 媒体类型 and (媒体特性){你的样式}

注意:使用Media Queries必须要使用"@media"开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体特性(也可以称之为设备特性)。媒体特性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一部分指的是媒体特性,第二部分分为媒体特性所指定的值,而且这两个部分之间使用冒号分隔。例如:

(max-width:480px)

与CSS属性不同的是,媒体特性是通过min/max来表示大于等于或小于做为逻辑判断,而不是使用小于(<)和大于(>)这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

1.最大宽度max-width

"max-width"是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效。如:

@media screen and (max-width:480px){

 .ads{

  display:none;

 }

}

上面表示的是:当屏幕小于或等于480px时,页面中的广告区块(.ads)都将被隐藏。

2.最小宽度min-width

"min-width"与"max-width"相反,指的是媒体类型大于或等于指定宽度时,样式生效

@media screen and (min-width:900px){

 .wrapper{width:980px;}

}

上面表示的是:当屏幕大于或等于900px时,容器".wrapper"的宽度为980px.

3.多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说,一个Media Query中可以包含0到多个表达式,表达式可以包含0到多个关键字,以及一种媒体类型。

当屏幕在600px~900px之间时,body的背景色渲染为"#f5f5f5",如下所示。

@media screen and (min-width:600px) and (max-width:900px){

      body{background-color:#f5f5f5;}
}

4.设备屏幕的输出宽度Device Width

device-width,device-height——屏幕宽高

width,height——渲染窗口宽高(可视区域)

orientation——设备方向

resolution——设备分辨率

在智能设备上,例如iPhone,iPad等,还可以根据屏幕设备的尺寸来设置相应的样式(或者调用相应的样式文件)。同样的,对于屏幕设备同样可以使用"min/max"对于参数,如"min-device-width"或者"max-device-width"。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css"/>

上面的代码指的是"iphone.css"样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的"max-device-width"所指的是设备的实际分辨率,也就是可视面积分辨率。

5.not关键词

使用关键词"not"是用来排除某种制定的媒体类型,也就是用来排除符合表达式的设备。换句话说,not关键词表示对后面的表达式执行取反操作,如:

@media not print and (max-width:1200px){样式代码}

上面代码表示的是:样式代码将使用在除打印设备和设备宽度小于1200px下所有设备中。

6.only关键词

only用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持Media Type的设备,正常调用样式,此时就当only不存在;表示不支持媒体特性(例如max-width)但又支持Media Type的设备,这样就会不读样式,因为其先会读取only而不是screen;另外不支持Media Queries的浏览器,不论是否支持only,样式都不会被采用。

在Media Query中如果没有明确指定Media Type,那么其默认为all,如:

<linkrel="stylesheet " media="(min-width:701px) and (max-width:900px)" href="mediu.css"/>

另外在样式中,还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中,指定方式如下所示。

<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px),screen and (min-width:960px)"/>

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。

到目前为止,CSS3 Media Queries得到了众多浏览器支持,除了IE6-8浏览器不支持之外,在所有现代浏览器中都可以完美支持。还有一个与众不同的时,Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。

本文由pc28.am发布于前端技术,转载请注明出处:给初读书人的二十一个CSS实用建议,媒体类型

上一篇:单页应用的体会,营造单页Web应用 下一篇:没有了
猜你喜欢
热门排行
精彩图文