网络编程
位置：首页>> 网络编程>> 网页设计>> css基础教程属性篇

css基础教程属性篇

作者：Jorux　来源：Jorux.com　发布时间：2008-07-23 12:44:00　

标签：教程,css,属性

本教程主要介绍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的效果,那么恭喜你,一个基本的本地调试环境建立了.

1
2 3 4 5 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com