2 . CSS入门例子
你可以先通过这个链接学习一下HTML的入门例子.
CSS入门例子示例 -- 可以尝试编辑
- 定义文字的颜色
- 定义网页的背景颜色
- 定义网页的背景图片
- 定义文字的对齐方式
- 自定义列表样式
- 定于你的鼠标样式
- 定义一个带有颜色的边框
好通过上面的例子有点感觉了吧?现在开始从头学习入门啦:)
<1>打开记事本:点击"开始"--选择"程序"--选择"附件"--选择"记事本"(或者打开你的EditPlus编辑器)
<2>输入下面代码(直接拷贝过去就可以啦)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
欢迎来到梦之都 </title>
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"dreamdu.css"
/>
</head>
<body>
<h1>
欢迎来到梦之都<h1>
<p>
这是我的第一个网页,在这里
<a
href
=
"http://www.dreamdu.com/css/"
>
尽情学习CSS
</a>
吧!
</p>
</body>
</html>
点击"文件"--选择"保存"--选择文件类型为"所有文件"--文件名输入"dreamdu.html"并选择文件保存地址.(记住一定要把文件的后缀存为.html或.htm,否则网页无法显示)
<3>再新建一个文件,输入下面代码(直接拷贝过去就可以啦)
/*段落样式*/
p
{
color
:
purple
;
font-size
:
12px
;
}
/*标题样式*/
h1
{
color
:
olive
;
text-decoration
:
underline
;
}
/*链接样式*/
a:link
{
color
:
#006486
;
}
a:visited
{
color
:
#464646
;
}
a:hover
{
color
:
#fff
;
background
:
#3080CB
;
}
a:active
{
color
:
white
;
background
:
#3080CB
;
}
点击"文件"--选择"保存"--选择文件类型为"所有文件"--文件名输入"dreamdu.css"并选择文件保存地址.(记住一定要把文件的后缀存为.css,而且要和dreamdu.html在同一个目录下.)
<4>现在我们可以双击dreamdu.html这个文件.看看效果吧.
怎么样?五颜六色的吧:)
现在解释一下上面的例子
HTML文件就是一个文本文件,HTML文件要在head处加载css样式<link rel="stylesheet" type="text/css" href="dreamdu.css" />
.
CSS文件也是一个文本文件.
p
{
color
:
purple
;
font-size
:
12px
;
}
代表p标签所包含的内容都是以紫红色color: purple;
,12px大小font-size: 12px;
的字体显示.
h1
{
color
:
olive
;
text-decoration
:
underline
;
}
代表h1标签所包含的内容都是以橄榄色color: olive;
,带下划线text-decoration: underline;
的字体显示.
a:link
{
color
:
#006486
;
}
a:visited
{
color
:
#464646
;
}
a:hover
{
color
:
#fff
;
background
:
#3080CB
;
}
a:active
{
color
:
white
;
background
:
#3080CB
;
}
代表了HTML链接的样式,这个有点复杂了,大家可以先看看效果,高级教程中我再分析此链接样式(梦之都就是使用的这个链接样式:)[大家可以下载梦之都的链接样式参考一下http://www.dreamdu.com/style.css]).
几个问题
比如使用什么编辑器呀? 怎么显示扩展名等.大家可以参看HTML,XHTML入门例子
来自:http://www.dreamdu.com/css/declaration/