第一章:css介绍(CSS BASICS)Chapter 1 : Introduction to CSS

今天无意中看到http://www.cssbasics.com/上面介绍css的十八章内容,从今天开始将其翻译成中文,用意有三:1.学习css(本人一直很重视基硅,基硅掌握程度能很大意义上决定你能走多远,个人看法);2.提高下英文(计算机出自美国、先进技术也基本上来自美国,技术文档基本上是英文的,英文水平的重要性那是不用说了);3.一直都是从互联网获取东西,少有贡献,也希望能为大家做点贡献,本人英文水平一般,大家也凑合看看,也是小弟的一翻心意大笑

第一章:css介绍(CSS BASICS)Chapter 1 : Introduction to CSS

css允许你将网站的内容同样式分离,虽然还是将内容写在(x)html文件里,但是所有的样式(字体,颜色,背景,边框,文本格式,链接效果等等)可以使用css完成。
你可以在htm文件内部或外部使用css。

内部样式表(Internal Stylesheet)
我们先探讨下在htm文件内部使用css的方法。可以简单的将css代码放置在head标签里面。如下所示

<head> <title><title> <style type=”text/css”> CSS Content Goes Here </style> </head> <body>


这种css代码放置在htm文件内部的方式适合当你只需要设计一个页面或者你要设计的多个页面需要不同的风格。


外部样式表(External Stylesheet)

接下来我们将探讨下外部样式表的使用方法。外部css文件可以通过任何类似notepad或者dreamweaver文本或html编辑器来创建。css文件中不能包含htm代码,只能写css代码。将文件简单的存储为扩展.css扩展名即可。可以通过在htm文件head标签中使用link标签即可链接到css文件,如下所示:

<link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />


或者通过@import的方式,如下所示

<style type=”text/css”>@import url(Path To stylesheet.css)</style>


这两种方法都可以在head标签中导入css文件,如下所示

<head> <title><title> <link rel=”stylesheet” type=”text/css”href=”style.css” /> </head> <body> or <head> <title><title> <style type=”text/css”> @import url(Path To stylesheet.css) </style> </head> <body>


外部样式表允许你将所有页面链接到同一个css文件,以同一种风格呈现页面,这样,如果你需要修改所有的页面风格,只需要编辑这个css文件即可。

这是几个使用外部样式表更好的理由:

更容易维护
减少文件的大小
减少带宽
提高灵活性

层叠顺序(Cascading Order)
上文中我们已经解释了怎么使用内外或外部的方式链接css文件,如果你已经理解了,那真让人欣慰,如果没有,也不好着急,本书才刚刚开始。假设你已经理解,你也许会问我们可以同时使用这两种方式吗?答案是肯定的,另外我们还可以同时使用第三种方式
行内样式(inline styles)
到现在我才提及行内样式是因为在某种程度上行内样式与我们使用css的初衷并不一致,定义位置在你要定义样式的元素的开始标签里(Inline styles are defined right in the (X)HTML file along side the element you want to style. See example below.),如下所示:

<p style=”color: #ff0000;”>Some red text</p>


line styles will NOT allow the user to change styles of elements or text formatted this way(行内样式不充许用户改变元素的样式或者...这里还没想好怎么翻译)

So, which is better?(哪种方式更好呢?)

那么,这么多种定义css的方式,你也许会问哪种更好呢?如果我使用多种定义方式,会按什么顺序将这多种方式定义的css载入到浏览器呢?
所有的各种方法,将进入一个新的“伪”级联样式表(All the various methods will cascade into a new “pseudo” stylesheet):
1.行内样式表(定义在(x)html元素里)
2.内部样式表(定义在<head>标签里面)
3.外部样式表

至于哪种方法更好,这取决于你想要做什么。如果你只有一个文件那么使用内部样式表(放在head标签里)会更好。若有多个文件,外部样式表才是最佳选择。选择<link related=> 还是@import这取决于你。 友情提醒,相比link这种方式,在ie浏览器中,import方式在IE中使用@import 将会引起文件的下载顺序被改变。这更会引起样式文件花费更长的时间来下载,这会阻碍页面的渲染,让人感到页面比较慢。

残疾人用户

外部样式表可以使残疾人用户受益,用户可以关掉你的样式表或者使用他们自己增加文字大小,改变颜色等的样式表来替换。为了你网站上的更多信息能让所有用户访问请阅读Dive into accessibility

高级用户
交换样式表(Swapping stylesheets)不但有益于残疾人用户而且有益于对阅读web文档比较讲究(挑剔)的高级用户。
关于用户自定义样式表的权重及加载方式
可以参考http://blog.csdn.net/qq578933760/article/details/7540553

浏览器问题
当你深入进css的世界你会发现所有的浏览器都是不相同的,同一段css代码有可能在不同的浏览器呈现不同是很让人头疼的一件事。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值