《If you love CSS》由会员分享，可在线阅读，更多相关《If you love CSS（32页珍藏版）》请在金锄头文库上搜索。
1、If you love CSSDesigned by Jorux:http:/我想把本篇作为CSS基础教程的序曲，从今天开始翻译和整理我从设计网页以来所学到的CSS基础知识。本教程会分成N个部分，单独发表，其间可能会插入几篇与教程无关的文章。没有具体的教程发表进度,推荐关注本教程的朋友订阅本站Feed。教程内容的30%-50%为Jorux原创，其余翻译部分均为意译,可能来源于多个国外站点，并在教程结束时公布参考原文地址。曾翻译过一篇CSS教程:十步学会用CSS建站，文章声称能在十步学会建站，虽说夸张点，但确实能学到一些东西，就像现代社会流行速成一样，它只是一个CSS快餐，要达到自由运用CSS，
2、没个百八十步恐怕有点悬。需要什么软件学习CSS?一个文本编辑器和Firefox1.文本编辑器：这里所指的是诸如windows自带的记事本以及Editplus等改进版记事本软件。不推荐Dreamweaver, Frontpage等具有图形化可视操作，不直接编辑CSS源代码的软件。这类软件确实能在学习CSS的初期帮助你迅速达成你的愿望，但是不久你就会发现这些被Dreamweaver所自动生成的CSS代码冗长繁琐，CSS文件体积增大。一旦离开这些软件你的头脑就会像一张白纸，基本的CSS语法都想不起来。本人曾走过弯路，望初学CSS的朋友借鉴。本人使用Editplus编写网页代码，其属于加强版的记事本，
3、具有多步撤销，语法加亮，全部替换等功能，安装后无需设置，推荐把屏幕字体改为14号Verdana，方便阅读编写。2.Firefox：本人绝非Firefox的Fan，它也不是盏省油的灯(占用内存多)。但作为一个免费软件，再配上适当的插件，是网页设计者的必备工具，如何使用和选择插件体现设计者专业素质的水平。推荐安装以下插件：必装插件: IE Tab：调试网页在IE内核浏览器表现的优秀插件，不管你喜不喜欢，请安装！ 强烈推荐安装的插件：Web Developer：其功能之强大，以至于我还没用全它的功能，但是其直接查看网页CSS代码功能，页面信息的显示，以及验证CSS和Html的功能非常实用。Color
4、Zilla：方便提取网页中任何元素的颜色。Html Validator：安装这个插件后会在浏览器右下角生成一个图标，绿色对号表示当前网页的Html通过验证，红色叉号表示Html有错误，黄色叹号表示Html存在无法通过验证的警告语句。双击图标就会高亮显示该网页存在的不能通过验证的语句数目、位置以及修改建议。作为设计者，最好养成随时观察这个图标的习惯，你就会发现网上声称能通过验证的网页，几乎都是错误或是警告。本网站除极个别网页外均通过验证。FireBug：安装这个插件后也会在浏览器右下角生成一个图标，绿色对号表示当前网页的Javascript通过验证，并能对错误的Javascript代码debug
5、。我们暂时并不需要这个功能。需要用到的功能是其Inspector，你需要通过定制工具栏，把Inspector的眼镜图标拖入工具栏。点击Inspector图标后，将鼠标移到网页任意位置，你就能在靠下的窗口看到网页Html文件的相应源代码，在网页调试时非常有用。装这么多插件是不是有点累，我光写都有点吃不消，所以休息一下，在下一篇文章进入CSS教程的正文部分。支持本教程或是有任何疑问，请留言。感谢您对本教程的支持！属性篇(1)If you love CSS 注:由于这段时间被一些琐碎的事搅得不得安宁,直到今天才发布If you love CSS的第一篇正文,再次向关注本站的朋友以及访客表示歉意,如在
6、阅读过程中发现错误,请留言, Jorux会及时更正.版权声明:由于在编辑和整理本教程中发现自己原创的东西更能激发我的写作兴趣,在此声明本教程不再是译文,而是主要以J为素材的原创文章,所使用图片也均为Jorux原创,如有意转载,请留言(正确填写您的Email地址)或者直接电邮J.本教程主要介绍CSS的基础知识,将逐个讲解CSS的各个属性,过程可能比较枯燥,但会尽力多举例说明.CSS语法:例:用Web Developer的CSS查看功能查看J首页的CSS文件,可以看到以下代码:body font: normal 12px/1.5 Georgia, sans-serif;text-align:lef
7、t;background:#444 url(images/bodybg.jpg) repeat-y;是不是有点复杂,现在我们没有必要细究以上代码,先简化以上代码为:body text-align:left;这便是基本CSS语法结构:引用CSS:CSS文件的作用就在于控制Html文件的表现,而从Html文件中引用CSS文件的方法大致有三种:外联(external),嵌入(in-line)和内联(internal),这里限于篇幅以及应用频度,只介绍外联方法.例:同样打开J的主页,点击Firefox工具栏查看页面源代码,在可以看到以下代码:herf后的地址即为本网站CSS的地址,这里应用的地址为绝对
8、地址,而在本地调试时一般用相对地址,将在后文说明.建立本地调试的文件结构:如下图所示建立名为local的文件夹,以及其子文件夹style和image,分别用于存放CSS文件和图片文件,在local文件夹的根目录下创建Html文件index.htm,在style文件夹的根目录下创建CSS文件style.CSS:用文本编辑器打开index.htm,写入以下代码:My first homepageMy first homepage然后打开style.CSS,输入以下代码:body background-color: #333;h1 color: #F00;background-color: #FFF
9、; 用Firefox打开index.htm,如果你看到Example1的效果,那么恭喜你,一个基本的本地调试环境建立了.下面开始逐个介绍CSS属性:颜色(color):CSS能够控制的颜色主要包括文本颜色,边框颜色等,对于背景颜色和边框颜色会在以后说明,在这主要解释文本颜色的表现.在如上所示style.CSS的选择器h1中,文本颜色的属性是用color表示的,h1的颜色的属性值为#FF0000(一个#加上十六进制值),简写为#F00. 我们甚至可以用英文单词red表示属性值: color: red; 效果是一样的. 颜色的其他属性值还有RGB值,在CSS中不太常用,这里就不再叙述.例:查看J首
10、页的CSS文件,可以看到以下代码:a color: #545454;text-decoration:none;a:hover color: #919191; 在选择器a中,文本颜色的属性值为#545454, 即存在超级链接的文本颜色为#545454; 而a:hover为伪类选择器(表现依赖于浏览器的状态), 它的属性值为#919191, 即鼠标在超级链接上悬停时文本的颜色. 你可以用ColorZilla验证本站首页的标题文字颜色.文本(text):CSS控制的文本属性主要包括以下四个: text-indent,text-align, text-decoration, text-transfor
11、m;1. text-align:属性text-align指文本的对齐方式,其有向左,向右,居中对齐以及自动适应四种对齐方式:text-align: left;text-align: right;text-align: center;text-align: justify;例:查看J首页的CSS文件,可以看到以下代码:body font: normal 12px/1.5 Georgia, sans-serif;text-align:left;background:#444 url(images/bodybg.jpg) repeat-y;在选择器body中声明属性text-align为left,可
12、以避免在其他需要文本左对齐的选择器中重复声明. 2. text-indent:属性text-indent指段落首行的缩进, 既然是段落的属性,一般用于选择器p(段落)中,代码如下:p text-indent: 26px; 本站的段落缩进为0, 所以在CSS文件中能找到text-indent: 0;,不声明即此属性,即默认为0.3. text-decoration:属性text-decoration为文本修饰, 其包括下划线, 上划线, 中划线和无四种修饰方式, 代码如下:text-decoration: none;text-decoration: underline;text-decorati
13、on: overline;text-decoration: line-through;在这就不例举具体的下划线, 上划线, 中划线的例子, 相信大家很容易想像的到它的效果. 需要强调的是属性值none, 如果你查看本站CSS的话, 可以看到所有属性text-decoration的值均为none. 这是因为目前的浏览器对于选择器a(即超级链接), 默认text-decoration属性值为underline. 这就会使很多你不希望出现的下划线大量涌现, 而且由于无法约束下划线的粗细, 以及浏览器之间的差异, 甚至会出现各种粗细, 不同浏览器显示不同的下划线.例:你可以看到本站文章内的超级链接的文
14、本修饰是点划线, 这个效果不是属性text-decoration所能实现的, 其需要下边框属性的支持, 将会在边框属性时说明. 实现方法如下(请查看本站CSS代码):1.在全局声明中将选择器a的text-decoration属性值设为none, 代码如下:a color: #545454;text-decoration:none; 2.为使文章正文部分的超级链接显示蓝色点划线的效果,代码如下(读者目前只需了解,目前暂不说明):.post_body acolor:#0061CA;padding:0;border-bottom:1px dotted #0061CA; 4. text-transform: 这个属性可能大家不太熟悉, 因为这个属性是只为英文服务的, 用于转换字母大小写之用. 其包括首字母大写, 大写,
