css基础教程属性篇
作者:Jorux 来源:Jorux.com 时间:2008-07-23 12:44:00
本教程主要介绍css的基础知识,将逐个讲解css的各个属性,过程可能比较枯燥,但会尽力多举例说明.
作者的网站:http://jorux.com/
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" 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,属性
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
通向MySQL神秘王国的图形化之路
2008-12-08 13:43:00
![](https://img.aspxhome.com/file/UploadPic/200812/200812917612229.jpg)
如何防范利用刷新来“作弊”的计数器?
2009-11-22 17:18:00
文字适度阅读的宽度或者字数
2007-10-26 07:31:00
利用索引提高SQL Server数据处理的效率
2009-01-08 15:32:00
傲游对开发人员的影响越来越大了
2009-10-14 13:16:00
MySQL Group By用法
2012-01-05 19:05:14
CSS3创建惊艳多重边框色
2010-07-23 10:13:00
ASP+Access系统的安全隐患及对策
2007-08-23 14:53:00
利用xmlhttp和adodb.stream加缓存技术下载远程Web文
2009-04-23 18:33:00
asp如何读取服务器上的驱动器?
2009-11-18 20:50:00
JavaScript 关于引用那点事
2009-11-28 18:44:00
ASP技巧 挂QQ的网页源代码ASP/PHP
2009-01-05 12:36:00
Smush it - 一款图片压缩的Firefox插件,很好,很强大!
2009-04-12 20:09:00
![](https://img.aspxhome.com/file/UploadPic/20094/12/smush-it-92s.gif)
用户体验设计何去何从,交互设计师又何去何从?
2009-12-28 13:07:00
![](https://img.aspxhome.com/file/UploadPic/20101/11/2009-09-17_01-34s.png)
关于Ajax在浏览器中产生前进后退的实现方法
2010-01-29 13:01:00
仿淘宝星级评分效果
2010-09-03 18:37:00
css去掉checkbox边框的方法
2011-06-06 10:32:00
获取星期几的名称
2012-01-29 18:16:31
Ext2.0.2经典的一个JS组件(带EXT中文手册)
2009-04-13 12:24:00
MySQL 基本概念
2011-09-10 16:22:34