Jorux Notebook

Just a web designer's blog

属性篇(1)—If you love css …

注:由于这段时间被一些琐碎的事搅得不得安宁,直到今天才发布《If you love css…》的第一篇正文,再次向关注本站的朋友以及访客表示歉意,如在阅读过程中发现错误,请留言, Jorux会及时更正.

版权声明:由于在编辑和整理本教程中发现自己原创的东西更能激发我的写作兴趣,在此声明本教程不再是译文,而是主要以Jorux.com为素材的原创文章,所使用图片也均为Jorux原创,如有意转载,请留言(正确填写您的Email地址)或者直接电邮Joe7419@gmail.com.

本教程主要介绍css的基础知识,将逐个讲解css的各个属性,过程可能比较枯燥,但会尽力多举例说明.

css语法:例:用Web Developer的css查看功能查看Jorux.com首页的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;}

这便是基本css语法结构:

j's image

引用css:css文件的作用就在于控制Html文件的表现,而从Html文件中引用css文件的方法大致有三种:外联(external),嵌入(in-line)和内联(internal),这里限于篇幅以及应用频度,只介绍外联方法.

例:同样打开Jorux.com的主页,点击Firefox工具栏–>查看–>页面源代码,在<head></head>可以看到以下代码:

<link rel="stylesheet" href="http://jorux.com/wp-content/themes/j_notebook/style.css" type="text/css" media="screen" />

herf后的地址即为本网站css的地址,这里应用的地址为绝对地址,而在本地调试时一般用相对地址,将在后文说明.

建立本地调试的文件结构:如下图所示建立名为local的文件夹,以及其子文件夹style和image,分别用于存放css文件和图片文件,在local文件夹的根目录下创建Html文件index.htm,在style文件夹的根目录下创建css文件style.css:

j's image

用文本编辑器打开index.htm,写入以下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My first homepage</title>
<link rel="stylesheet" href="style/style.css" media="screen" /></head>
<body>
<h1>My first homepage</h1>
</body>
</html>

然后打开style.css,输入以下代码:

body {
  background-color: #333;
}
h1 {
  color: #F00;
  background-color: #FFF;
}

用Firefox打开index.htm,如果你看到Example1的效果,那么恭喜你,一个基本的本地调试环境建立了.

下面开始逐个介绍css属性:

颜色(color):css能够控制的颜色主要包括文本颜色,边框颜色等,对于背景颜色和边框颜色会在以后说明,在这主要解释文本颜色的表现.

在如上所示style.css的选择器h1中,文本颜色的属性是用color表示的,h1的颜色的属性值为#FF0000(一个#加上十六进制值),简写为#F00. 我们甚至可以用英文单词red表示属性值: color: red; 效果是一样的. 颜色的其他属性值还有RGB值,在css中不太常用,这里就不再叙述.

例:查看Jorux.com首页的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-transform;

1. text-align:属性text-align指文本的对齐方式,其有向左,向右,居中对齐以及自动适应四种对齐方式:

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

例:查看Jorux.com首页的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,可以避免在其他需要文本左对齐的选择器中重复声明.

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-decoration: overline;
text-decoration: line-through;

在这就不例举具体的下划线, 上划线, 中划线的例子, 相信大家很容易想像的到它的效果. 需要强调的是属性值none, 如果你查看本站css的话, 可以看到所有属性text-decoration的值均为none. 这是因为目前的浏览器对于选择器a(即超级链接), 默认text-decoration属性值为underline. 这就会使很多你不希望出现的下划线大量涌现, 而且由于无法约束下划线的粗细, 以及浏览器之间的差异, 甚至会出现各种粗细, 不同浏览器显示不同的下划线.

例:你可以看到本站文章内的超级链接的文本修饰是点划线, 这个效果不是属性text-decoration所能实现的, 其需要下边框属性的支持, 将会在边框属性时说明. 实现方法如下(请查看本站css代码):

1.在全局声明中将选择器a的text-decoration属性值设为none, 代码如下:

a {    
    color: #545454;
    text-decoration:none;
}

2.为使文章正文部分的超级链接显示蓝色点划线的效果,代码如下(读者目前只需了解,目前暂不说明):

.post_body a{
    color:#0061CA;
    padding:0;
    border-bottom:1px dotted #0061CA;
}

4. text-transform: 这个属性可能大家不太熟悉, 因为这个属性是只为英文服务的, 用于转换字母大小写之用. 其包括首字母大写, 大写, 小写和无变化四种属性值, 代码如下:

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;

例:如果你再本站留过言, 而且用的是英文名的话, 你就会发现无论你输入的姓名是有没有将首字母大写, 显示评论者姓名时首字母均被转化为大写, 查看本站css代码如下:

.comment_author {
    text-transform:capitalize;
}

本篇正文完

p.s. 如果您考虑到以下四种情况, 请留言:

1. 让我知道您的想法, 有什么需要改进的, 或者是错误的, Jorux会及时修正并在下一篇文章中改进;

2. 哪怕是你想测试以下那个评论者姓名的首字母大写的效果, 请尽管将你的英文名用小写输入;

3. 本教程的更新速度应该是一到两个星期, 但文章长短不一, 如果有了您的支持, 本人认为会明显延长单篇文章的篇幅, 明显减少全教程的时间.

4. …

51 Responses So Far

  1. 红鼻子 Says:
    Gravatar

    娃哈哈哈哈，不错，第一时间支持

  2. leavic Says:
    Gravatar

    是不是该先讲一下布局的问题？不过我想你总有你的写作顺序。

    这篇的内容还算比较容易理解，等下一篇。

    如果在基本的内容都叙述完之后，能配合一个blog系统的模板讲解一个实例的话，也许会很受欢迎。也可以作为学习深层次内容的一个比较实用的方法，读者也可以很快地有针对性发现具体有什么没搞懂的地方。

  3. Jorux/Bluecssr Says:
    Gravatar

    多谢Leavic的建议.
    本教程其实是正对那篇《十步…》而写的,所以多注重了点基础. 把属性放在了第一重要的位置, 确实讲起来比较枯燥, 但基础的东西还是要好好掌握.
    本教程可能会分为属性篇, 布局篇以及实例篇三个部分, 属性篇至少有三到四篇文章, 会尽量举例说明, 还请大家坚持!

  4. shiany Says:
    Gravatar

    我想如果能＋个实例制作，等教程完了，那个实例也完成了，会不会好点？

    不管怎么样，严重支持博主。。。哈哈

  5. Jorux/Bluecssr Says:
    Gravatar

    曾想过, 但几乎没有涵盖所有属性的实例,这里我就只是举了本站的一些例子. 本教程最后会有专讲实例的.
    谢谢Shiany的支持!

  6. gaoshier Says:
    Gravatar

    终于看到教程了，感谢 Jorux！

    好好学习，天天上 JORUX.com！

  7. wb Says:
    Gravatar

    你小子最近忙什么呢，还是该网页？
    都9月了，有什么消息嘛

  8. leizi Says:
    Gravatar

    過來溜個彎……..

    教程很好

  9. POO Says:
    Gravatar

    seen
    欢迎回访我的个人BLOG，
    阅读了你的这篇文章，
    My Live Spaces:(酱油小子)
    http://xiangtool.googlepages.com/post.htm

  10. fyl Says:
    Gravatar

    哈哈！好久没来了，改变了许多哦！不错不错！原来的表情怎么不见了？继续加油哦！

  11. irini Says:
    Gravatar

    我来吹毛求下疵~~

    Example1里文字的背景颜色和文中给出的代码不一样哦~~

  12. Jorux/Bluecssr Says:
    Gravatar

    Irini说得对, 应该是#FFF才对. 已经更正, 多谢指正!!

  13. 小明 Says:
    Gravatar

    看到链接下划线，有个问题想请教一下。就是用border-bottom给链接定义了虚线下划线，怎么能方便的去掉图片链接的下划线呢？用a img {border:0}好像没用！如果有好方法，请指教！谢谢

  14. Jorux/Bluecssr Says:
    Gravatar

    请尝试以下代码:
    a img{
    display:block;
    border:none;
    }
    如还不能奏效, 请留言.

  15. 小明 Says:
    Gravatar

    解决了，真神奇！非常感谢！

  16. 小明 Says:
    Gravatar

    但是在IE中好像无效

  17. Jorux/Bluecssr Says:
    Gravatar

    这个问题确实比较棘手. IE6.0对于选择器”a img”视而不见. 要实现border:0的效果比较麻烦. 需要在html文件中加入一个class, 比如说在html文件中有如下代码:
    <a class="no_border"> <img /> </a>
    注意在有链接的图片所处的a中加入class=”no_border”
    然后在css文件中加入如下代码:
    a.no_border {
    text-decoration: none;
    border: none;
    }
    如有问题, 请再留言!

  18. zid Says:
    Gravatar

    很好，没有感到枯燥

  19. oyoy Says:
    Gravatar

    刚开始学习css
    不知道这是什么时候的教程，强烈支持继续。
    谢谢！！

  20. Steve Says:
    Gravatar

    公司要进行一个CSS培训,找到您的教程,借之一用.行吗？

  21. Jorux/Bluecssr Says:
    Gravatar

    可以的， 有什么可以帮忙的尽管说。只是这篇教程尚未完成。
    Later

  22. Steve Says:
    Gravatar

    .post_body a{
    color:#0061CA;
    padding:0;
    border-bottom:1px dotted #0061CA;
    }
    试过为什么不行,

  23. Jorux/Bluecssr Says:
    Gravatar

    那个代码是针对本站html的，不知你是指什么不行。

  24. Steve Says:
    Gravatar

    我在自己的机子上试试,因为看到您定义的比较特别,
    a{
    color:#0061CA;
    padding:0;
    border-bottom:1px dotted #0061CA;
    }
    能告诉我吗？
    感谢

  25. Jorux/Bluecssr Says:
    Gravatar

    光这个代码不够， 看不出问题。需要和你的html文件比较。
    还有你的css代码中a选择器不要重复声明。

  26. Steve Says:
    Gravatar

    . a{
    color:#0061CA;
    padding:0;
    text-decoration:none;
    border-bottom:1px dotted #000；
    } （可定义，字的颜色为蓝色，下线为黑色的link样式出来，不过文本要位于Div中（td不行，呵）

    看到你的文章,不错, 感谢,呵,

  27. speeds86 Says:
    Gravatar

    强烈支持啊，再次感谢jorux!!!

  28. yurller Says:
    Gravatar

    真的非常的感谢!!!!!!

    网上的教程看过,但能从读者角度考虑的真的是不多,非常感谢你的分享!!!!!!

    文如其人,能感觉到你的真诚,踏实!!!!!!以及一般的帅气!!!!!!

  29. luluzhu Says:
    Gravatar

    刚学css，非常喜欢你的文章，会继续支持！

  30. luluzhu Says:
    Gravatar

    by the way…上下文能做个链接就好了^_^

  31. bansi Says:
    Gravatar

    已经转载了你的教程，嘿嘿！非常棒的说，这个是转载的地址http://hi.baidu.com/w3web/blog/item/eb45448230a444a20cf4d2e1.html
    看看符合要求不？不符合要求再改。。希望能够有更多人能够看到这个好教程，可怜我以前学CSS的时候怎么就没找到这样的好教程。

    001over

  32. Jorux/Bluecssr Says:
    Gravatar

    To bansi:

    既然你是加了反向链接，并声明了原作者，没什么意见。

    你的博客也很清爽。

  33. Goodbigbaby Says:
    Gravatar

    现在才刚刚看“属性（1）”，得加快速度了。后面还有好几篇，呵呵。你也要加快速度赶紧出新篇啊。加油加油加油！！！

  34. 海绵宝宝 Says:
    Gravatar

    看完了，支持一下
    我有个问题，就是上面都没有时间显示

  35. a_mood Says:
    Gravatar

    收益匪淺

  36. clasicalia Says:
    Gravatar

    I thnk that there is no necessity to make heavy weather of describing how nice your site is! Everyone can find here all he or she need!
    __________>____________
    http://clasificalia.com/images/_vti_cnf/mother.html

  37. sdwart Says:
    Gravatar

    写的真不错支持一下

  38. bluekevin Says:
    Gravatar

    文章写的很好，提个建议，右边的导航的字的颜色能否＋深一点，感觉有点暗，留言这块的text框 也觉得有点。webSite这个后面是否需要有提示。。。需要http://开头吗？

  39. Jorux/Bluecssr Says:
    Gravatar

    To bluekevin:
    谢谢你的建议，只是目前没有时间改进网站。
    http有无都可以的。

  40. key Says:
    Gravatar

    老大 ，多写点布局实例，谢谢

  41. Evan Says:
    Gravatar

    拜一拜
    另外，你的发表留言时的确认字母图片是怎么弄的？写篇文章吧

  42. xiaoming Says:
    Gravatar

    希望写更好的东西给大家分享

  43. 木可木可 Says:
    Gravatar

    感谢jorux.com~~
    收获很多~~
    会一直关注您的教程的~~
    感谢~
    辛苦了~

  44. luzi Says:
    Gravatar

    你好，我是中国设计秀的副站长，
    转载了贵站的教程。出处均为：jorux.com 作者为：JORUX

    有什么不妥请联系我们（或在此回复留言）。谢谢。。。。

  45. Jorux/Bluecssr Says:
    Gravatar

    To luzi:

    首先感谢你的留言，不过你的出处链接并没有指向本站，希望及时更正！

  46. luzi Says:
    Gravatar

    文章的下方有出处，
    出处的链接地址，是程序中的一个问题。
    还在解决中。
    不好意思，

  47. zdj Says:
    Gravatar

    很好!

  48. zylwyn Says:
    Gravatar

    看了教材，受益匪浅，我是新手，且不说能否学会，凭Jorux对大家负责任的态度和文风，我很欣赏，今后一定努力学习。
    学习十步，第九步做不下去了，不知道怎么回事，我再试试，实在不行，还要请教你，谢谢！！！

  49. davidd Says:
    Gravatar

    非常感谢~~~浅显易懂~~~

  50. tom Says:
    Gravatar

    just for a test of the name

  51. sina Says:
    Gravatar

    谢谢,受教了

Leave a Reply

Anti-Spam Image

Designed by Jorux. Proudly powered by WordPress 2.0.    Except where otherwise noted, this site is licensed under a Creative Commons License.