本教程主要介绍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语法结构:
引用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:
用文本编辑器打开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" _fcksavedurl=""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颜色和文本属性（二）