论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{CSS}CSS初级教程应用CSS

文章类别:div+css布局 | 发表日期:2008-9-26 11:32:55

就如 HTML初级教程,CSS初级教程假设你对CSS一无所知。这个教程的目的是教授CSS的骨干元素──已经可以足够让你来开始学习了。CSS中级教程和CSS高级教程将探讨CSS的更深层次。

CSS,或Cascading Styles Sheets,中译层叠样式表或级联样式表,是样式化HTML的一种方法。HTML是文档的内容,则样式表是文档的表现,或者说外观。

无论闻起来还是尝起来,样式表一点都不像HTML。它们有着这样的格式:“属性:值(property: value)”,而且大部分属性可以应用到HTML标签中去。

有三条途径可以把CSS应用到HTML中去。

内联

内联样式通过style属性直接套进HTML中去。

看起来像这样:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<p style=\"color: red\">text</p>

这将会是指定的段落变成红色。
我们的建议是,HTML应该是独立的、样式自由的文档,所以内联样式无论在什么情况下都应该尽量避免。

内部

内部样式服务于整个当前页面。在头标签head里面,样式标签style里包含当前页面的所有样式。
看起来像这样:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html>
<head>
<title>CSS Example</title>
<style type=\"text/css\">
p { color: red; }
a { color: blue; }
</style>
...

这将使这个页面的所有段落都是红色的,所有的连接都是蓝色的。
与内联样式类似,你应该是HTML文档和CSS文档分离开来,下面,我们的救世来了……

外部

外部样式为整个网站的多个页面服务。这是一个独立的CSS文档,简单的一个范例如下:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
p { color: red; } a { color: blue; }

假如这个文档存为“web.css”的话,它可以这样跟HTML文档连接起来:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html>
<head>
<title>CSS Example</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"web.css\" />
...

在CSS高级教程中,我们还将看到其他连接外部样式表的方法,但到目前,这已经足够了。
想从本指南中收获更多,尝试着在你的文本编辑器中新建一个文档,在HTML文档相同的目录中,把这些代码保存为“web.css”。
现在像下面一样改进你的HTML文档:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html>
<head>
<title>My first web page</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"web.css\" />
</head>
...

保存HTML文档。现在已经把HTML和CSS连接起来了,但还是空白一片,没有改变什么东西。随着进一步学习CSS初级教程,你可以增添或者改变CSS文档,通过刷新浏览器里的HTML文档,方便地看到效果,像我们以前做的一样。
  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058