css入门经典--CSS属性篇(1)—If you love css 是我们从网络上整理出来的一篇文章并归在CSS/Xhtml教程栏目,如果侵犯了您的版权请第一时间联系我们。
本教程主要介绍css的基础知识,将逐个讲解css的各个属性,过程可能比较枯燥,但会尽力多举例说明.
字串8
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; } |
字串6
是不是有点复杂,现在我们没有必要细究以上代码,先简化以上代码为:
字串5
body {text-align:left;} 字串4
这便是基本css语法结构: 字串4
字串9
引用css:css文件的作用就在于控制Html文件的表现,而从Html文件中引用css文件的方法大致有三种:外联(external),嵌入(in-line)和内联(internal),这里限于篇幅以及应用频度,只介绍外联方法.
例:同样打开Jorux.com的主页,点击Firefox工具栏–>查看–>页面源代码,在<head></head>可以看到以下代码:
字串1
| 以下是代码片段: <link rel="stylesheet" href="http://jorux.com/wp-content/themes/j_notebook/style.css" type="text/css" media="screen" /> |
herf后的地址即为本网站css的地址,这里应用的地址为绝对地址,而在本地调试时一般用相对地址,将在后文说明.字串6
建立本地调试的文件结构:如下图所示建立名为local的文件夹,以及其子文件夹style和image,分别用于存放css文件和图片文件,在local文件夹的根目录下创建Html文件index.htm,在style文件夹的根目录下创建css文件style.css:
字串2
用文本编辑器打开index.htm,写入以下代码: 字串2
| 以下是代码片段: <!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> |


RSS订阅
雅虎
百度
