Html 样式表(Css) Javascript Web从入门到精通


寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 1 Web 开发基础教程 --Html 样式表(Css) Javascript 课程名称:Web 开发基础教程 Jerry Email:xiuzhong.li#gmail.com 2005-8-3 于兰州 课程目标:了解 Web 基础知识,熟练应用 Html 常用标签,利用 css 美化页面,学会使用 JavaScript 脚本语言 第一部分 Html 基础知识 第一讲 了解 Html,web 和 internet 了解 internet 的起源,浏览器介绍,Html 的简单介绍 第二讲 建立你的第一个 Html 页面 了解 Html 文件的构成,标签元素的基本概念,常用的标签,建立你自己的 Html 页面 第三讲 设计漂亮的 Html 文档 学会使用字符实体,定制页面背景,文字的颜色,字体,文字大小,设置链接的颜色等 第四讲 用好头标签让浏览器识别你的文档 学会使用标签,了解<meta>标签设置搜索关键字,字符集等信息 第五讲 格式化页面的正文 怎样设置标题,段落,如何预格式化你的文本,学会使用列表,使用标签修饰你的正文文本. 第六讲 在网页中使用链接 为链接添加辅助信息,利于链接在页面间跳转,指定窗口打开链接,为链接指定快捷键 第七讲 创建有声有色的网页 设置图片尺寸,边框,位置,如何设置图文混排,在网页中插入多媒体,在网页中使用背景音乐 第八讲 用表格展示你的信息 表格的结构介绍,表格中数据的布局,单元格的合并,为表格设置背景,使用嵌套的表格 第九讲 使用框架划分窗口 框架的用途,创建简单的框架,利用框架分割窗口,框架的嵌套,修改框架的显示属性,在框架中 使用链接,使用预定义的框架名,浏览器不支持框架的处理 第十讲 利用表单和用户交互 如何建立你自己的表单,学会使用 Input 标签建立各种表单控件,使用下拉列表和多行文 本框,定制你的按钮 第二部分 用 css 美化你的页面 第十一讲 如何引用样式表 了解样式表的优势,认识样式表,学习如何在页面中引用样式表,如何在样式表中使用注释 第十二讲 字体控制 字体系列,字号,字体风格,文字修饰 第十三讲 文字的定位 字间距,行高,文字对齐,缩进,控制边距,边框和空白填充 第十四讲 控制颜色和背景 颜色,背景色,背景图片的添加和控制 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 2 第十五讲 要素的定位 绝对定位和相对定位,宽度,高度,可视性控制 第三部分 使用 JavaScript 和用户交互 第十六讲 JavaScript 语言概况 什么是 JavaScript,JavaScript 的特点以及与其他语言的区别,JavaScript 的运行环境,建立一个 简单的 JavaScript 第十七讲 JavaScript 基本数据结构 如何嵌入 JavaScript 代码,基本的数据类型,变量和表达式 第十八讲 JavaScript 程序构成 流程控制语句,函数,事件驱动和事件处理 第十九讲 基于对象的 JavaScript 语言 JavaScript 对象的定义和引用,JavaScript 的常用对象(字符串,数组,日期等) 第二十讲 系统函数,常用的内部对象 系统函数,常用的内部对象 第二十一讲 使用框架和 Cookies 在 JavaScript 中使用框架,设定 cookies,删除 cookies 第二十二讲用 JavaScript 建立日历控件 综合应用 JavaScript 建立日历控件 第四部分 综合应用:建立你自己的网站 第二十三讲 建立你自己的网站 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 3 目录 第一部分 Html 基础知识 ................................................................................................................... 15 第一讲:了解 Html,web 和 internet ............................................................................................. 15 1.1 互联网的起源 ............................................................................................................... 15 1.2 什么是 www .................................................................................................................. 16 1.3 web 浏览器介绍 ............................................................................................................ 16 1.4 超链接 ........................................................................................................................... 17 1.5 Url 介绍 .......................................................................................................................... 18 1.6 Html 介绍 ....................................................................................................................... 19 第二讲 建立你的第一个 Html 页面 ......................................................................................... 21 2.1 Html 概述 ....................................................................................................................... 21 2.2 建立我们的第一 Html 页面 ........................................................................................ 21 2.3 了解 Html 元素............................................................................................................. 23 2.4 了解一下 Html 的标签 ................................................................................................ 25 2.5 标签的嵌套 ................................................................................................................... 29 2.6 综合例子:学会使用标题,段落,折行和水平线,背景 ................................................ 29 第三讲 设计漂亮的 Html 文档 ................................................................................................. 32 3.1 标签的缩进 ................................................................................................................... 33 3.2 Html 的空格规则 .......................................................................................................... 34 3.3 html 中使用注释 ........................................................................................................... 35 3.4 在 Html 中使用字符实体 ............................................................................................ 36 3.5 使用 body 属性定制丰富多彩的页面 ....................................................................... 38 3.5.2 用 bgcolor 控制页面的背景颜色 .................................................................... 39 3.5.3 使用背景图........................................................................................................ 41 3.5.4 使用文字颜色 ................................................................................................... 43 3.5.5 改变链接的颜色 ............................................................................................... 45 3.6 使用 Font 标签定制字体 ............................................................................................. 46 3.7 建立一个综合的页面 .................................................................................................. 48 第四讲 用好头标签让浏览器识别你的文档........................................................................... 52 4.1 DOCTYPE 的使用 ........................................................................................................ 52 4.2 理解<head>元素........................................................................................................... 53 4.2.1 使用<title>标签 .................................................................................... 53 4.2.2 标签 ........................................................................................................ 54 4.2.3 全部代码如下: 建立第一张样式表

建立第一张样式表

知识创造财富,学习改变人生!

我想看一下:htmlCode\建立第一张样式表.HTML 打开浏览器我们会发现我们刚刚建立的普通的 Html 文档,在加入样式表后,对字体大小,风格, 颜色,背景进行了精确的控制. 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 8 8 我们对上面的样式表代码进行简单的理解: 层叠样式表的核心是规则。最简单的规则就象这样: H4{ color: green } 它告诉浏览器将所有

包围的文字以绿色显示,每一条规则包含一个选择及说明。 在上述例子中,H4 就是选择,它是一个附带样式功能的 HTML 标签。说明用于定义实际的 样式,包括两部分:属性(本例中即 color)和参数(green)。 任何 HTML 标签都可用作标签。所以你可以将样式表的信息附加到任何要素。从通常 的

内容。你甚至可以通过将样式表用于将层叠样式表的 属性用于图象。 从我们的第1 个样式表实例中可以发现,你可以归类样式表的规则。我们将 3种不同的说明 都用于

。 与之类似,你也可以归类选择: H1, P, BLOCKQUOTE { font-family: arial } 这项规则设定所以位于

的标签将用 Arial 字体显示。 继承性 样式表的规则可从母体延续到子体。下面是一个例子: B { color: blue } 这项规则告诉浏览器将所有之内的文字用蓝色显示。但是在下列情况下,浏览器该如 何处理呢? 我的邮箱是:lxz003@126.com 对于标签并没有设定样式,但因为位于之中,所以它将继承母体设定的样 式,也以蓝色显示. 11.3 把样式表加入到网页中 我们已经学了将样式表加到网页的一种方法。实际上你可以使用 4 种方法。每种方法 都有其不同的优点: 将样式表植入 HTML 文件中 将一个外部样式表链接到 HTML 文件上 将一个外部样式表输入到 HTML 文件中 将样式表加入到 HTML 文件行中 植入样式表: 这就是我们在上面用的方法,所有的样式表信息都列于 HTML 文件的顶部,同分 列.比如: 建立第一张样式表

建立第一张样式表

寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 8 9

知识创造财富,学习改变人生!

植入样式表规则后,浏览器在整个 HTML 页面中都执行该规则。如果你想对网页一次 性加入样式表,就可采用该方法。 你可能注意到代码中有两处很奇怪: TYPE="text/css" 属 性 和 注 释 标 签 。 TYPE="text/css" 设定采用 MIME 类型(MIME, 全称为“Multipurpose Internet Mail Extensions”, 比较确切的中文名称为“多用途互联网邮件扩展”。它是当前广泛应用的一种电 子邮件技术规范),这样以来,不支持 CSS 的浏览器可以忽略样式表。 注释标签()更为重要。有些老的浏览器(如 MAC 机用的 IE 2.0)即使在设定了 TYPE="text/css" 属 性时也不能忽略样式表继续执行下面的命令,而且还会显示样式表的代码。而使用注释标 签则可以避免发生这种情况。 链接到样式表上 这里是样式表功能发挥得淋漓尽致的地方。你可以将多个 HTML 文件都链接到一个中 心样式表文件。这个外部的样式表文件将设定你所有网页的规则。如果你改变样式表文件 中的某一细节,所有页面都会随之改变。如果你维护的站点很大,则这项功能绝对会有其 用武之地. 它的使用方法:产生一个普通的网页,不是使用 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 9 0 我的样式表

我的样式表

定向培养软件人才,用心打造金领生活!

而其中输入的 company.css 文件内容如下: H1 { color: green; font-family: times } P { background: yellow; font-family: courier } 在本例中,浏览器首先输入 company.css 的规则 ( @import 必须打头), 然后加入移植 的规则从而为这个网页产生规则集合。 请注意,对于 H1 在外部样式表文件和植入的样式表中都设定了规则。在两者冲突的情况 下,植入的规则此时将占上风。会按照植入的样式表表现网页内容,输入样式表的灵活性可 以使你输入无数多个样式表,并可以按照自己的喜好用植入的样式表来覆盖输入的样式表. 在行内加入样式 你还可以在 HTML 行中加入样式规则,如下: 我的样式表

定向培养软件人才,用心打造金领生 活!Go

北软教育

在这个例子中,你无须在 HTML 顶部加入样表代码。加入行内的样式表属性将使浏器 同样执行样式表规则. 该方法不方便之处在于:你必须在每行指中都中加入样式规则,否则下一行时浏器将转回 到文件的缺省设置,加入行内的样式表相比不如植入、链接及输入的样式表那样功能强大, 但有时候你会发现它也很有用。 11.4 分类引用 我们先前已经讲过所有的 HTML 标签都可以用作选择,并附加样式表说明.但是还有更 复杂的情况,比如,你想让主体文字的 1 段用绿色显示,第 2 段用紫色显示,而第 3 段用灰色 显示,这种情况下分类将发挥作用。你可以将段落 P 分成 3 种不同的类别,每一类应用不同 的样式表说明。这些规则将以以下方式显示: P.first { color: green } P.second { color: purple } P.third { color: gray } 你的 HTML 代码可以这样使用样式表: 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 9 1

第一段

第二段

第三段

你还可以生成不加任何 HTML 标签的分类: .first { color: green } 这种方式更加灵活,因为现在我们可以将 CLASS=first 用于任何 HTML 标签,而设定的文 字将以绿色显示。 11.5 注释 即使是用样式表制作出的非常简练的代码也应该加上注释.例如: P.first { color: green } /* 这里是注释*/ H1 { text-indent: 10px; font-family: verdana } IMG { margin-top: 100px } /* 这里又是一段注释*/ 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 9 2 第十二讲 字体控制 这一讲我们主要学习字体,即如何控制字号,字模及加入特殊效果。 主要学习内容包括: 字体系列 字号 字体风格 文字修饰 12.1 按名称调用字体 字体系列就是 CSS 中要使用的一系列字体。其基本语法如下: H2 { font-family: helvetica,impact, sans-serif } 这时 Web 浏览器阐释样式表的规则:首先在列表中寻找字体的名称(helvetica),如果在该 计算机中安装了这种字体,就使用它。如果没有安装,则移向下一种字体(impact),如果 这种字体也没有安装,则移向第 3 种字体(sans-serif)。 sans-serif 字体参数是浏览器可以依 据的最后一种参数,它告诉浏览器使用任何一种缺省 sans-serif 字体(或许就是 Arial)。 将常用字体作为最后的选项列在字体列表中是一种很好的做法。你可以选择以下几 种: serif (也可能是 Times) sans-serif (也可能是 Arial 或者 Helvetica) cursive (也可能是 Comic Sans) fantasy (也可能是 Ransom) monospace (也可能是 Courier) 如果一种字体的名称不只一个单词,如 Gill Sans,在你的 CSS 代码中用引号包含该字 体的名称。 BODY { font-family: "gill sans", "new baskerville", serif } 行内加入的 CSS 规则,使用单引号:

这里是文本!

12.2 字号的控制 在 html 中对字号的控制是很有限的,你只能设定 7 种字号,但是用样式表你可以更自由的 设定字号. 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 9 3 使用 font-size 属性,你可以对文字的尺寸进行无限的控制. points: P { font-size: 16pt } 这条代码告诉浏览器以 16 points(点)的尺寸显示

。 Points 是确定文字尺寸非常好的单位,因为它在所有的浏览器和操作平台上都适用。 px: P { font-size: 20px } 从网页设计的角度来说,pixel(象素)是一个非常熟悉的单位,它最大的优点就在于所 有的操作平台都支持 pixel 单位 12.3 字体风格 利用 CSS 加入斜体字非常简单,而且我们对于加粗字体还有很多选择。 H3 { font-style: italic } 当浏览器接到应用斜体字的指令后,它将用户的机器中寻找安装的斜体字版本,果不 存在斜体字,浏览器将会把正常的字体倾斜显示。 加粗字体 P { font-weight: bold } 你还可以用数值 100,200,...900。正常的非加粗的字体值为 400,900 是加粗字体的最大 值。 12.4 文字修饰(text-decoration) 使用下划线: B { text-decoration: underline } 还有其他的修饰内容比如: overline 给文字上划线 line-through 给文字划出删除线, none 使得上述效果都不会发生。 none 参数非常有用,你可以使链接的文字不以下划线的形式显示。具体做法: A:link { text-decoration: none } A:active { text-decoration: none } A:visited { text-decoration: none } 12.5 应用举例 代码: cssStyle.css H3 { font-family: helvetica,impact, sans-serif } P.first { font-size: 8pt } P.second { font-size: 16pt } P.three { font-size: 32pt } 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 9 4 p.boldWord{font-weight:bold} p.boldWord800{font-weight:100} p.italicWord{font-style:italic} p.underlineWord{text-decoration: underline } p.overlineWord{text-decoration: overline } p.delWord{text-decoration: line-through } cssStyle 字体控制.html cssStyle 字体控制

css Style 控制字体

控制字号

控制字号

控制字号

这一行是粗体

这一行是 100 号粗体

这一行是斜体

使用下划线

使用上划线

使用删除线

我想看一下:htmlCode\cssStyle 字体控制.HTML 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 9 5 第十三讲 文字的定位 我们在上面的课程中学习了字体及控制文字的方法.今天我们将学习文字和每行的内容 之间是如何定位的。这一讲的学习内容如下: 字间距 行高 文字对齐,缩进 控制边距,边框和空白填充 13.1 字间距 利用字(词)间距属性,你可以在字之间加入更大的距离: H3 { word-spacing: 10px } 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 9 6 字母间距: H3 { letter-spacing: 10px } 13.2 行高 利用行高我们可以随心所欲地控制行与行之间的垂直距离。 B { line-height: 16pt } 当你用数字设定行高的时候,浏览器将利用字号来确定行距:它将字号乘以设定的参 数值。所以,在下面的例子中,行高将是 24 点。 B { font-size: 12pt; line-height: 2 } 用比例设定行距 B { font-size: 10pt; line-height: 140% } 在本例中,行距是长度 10points 的 140%,即 14points。 13.3 文字对齐 利用文字对齐属性,你可以控制段落的水平对齐: H4 { text-align: center } 这项属性只用于整块的内容,如

-

 
寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 1 8 4
网页效果: 23.7 制做美文欣赏栏目 代码: goodArt.htm 美文欣赏

别拿自己当回事

布 思.塔金顿是 20 世纪的美国著名小说家和剧作家,他的作品《伟大的安伯森斯》和《爱丽斯. 亚当斯》均获得普利策奖。在塔金顿声名最鼎盛的时期,他在多种场合讲述过这样一个故 事:那是在一个红十字会举办的艺术家作品展览会上,我作为特邀的贵宾参加了展览会。 期间,有两个可爱的十六七岁的小女孩来到我面前,虔诚的向我索要签名。


“我没有带自来水笔,用铅笔可以吗?”我其实知道她们不会拒绝的,我只是想表现一下 一个著名作家的谦和对待普通读者的大家风范。““当然可以。”小女孩们果然爽快的答应 了,我看得出她们很兴奋,当然她们的兴奋也使我倍感欣慰。


一个女孩将她的非常精制的笔记本递给我,我取出铅笔,潇洒自如的写上了几句鼓励的 话语,并签上我的名字。女孩看过我的签名后,眉头皱了起来,她仔细看了看我,问道: “你不是罗伯特.查波斯啊?”
“不是,”我非常自负的告诉她,“我是布思.塔金顿,《爱丽丝.亚当斯》的作者,两次普利 策奖获得者。”
小女孩将头转向另外一个女孩,耸耸肩说道:“ 玛丽,把你的橡皮借我用 用。”

那一刻,我所有的自负和骄傲瞬间化为泡影。从此以后,我都时时刻刻告诫自己:无论 自己多么出色,都别太把自己当回事。

--摘自<读者>

 
寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 1 8 6
网页效果: 23.8 制做顶部的 LOGO 菜单 代码: Top.htm 听雨轩--晨舞朝霞,夜听风雨!
寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 1 8 7
 听雨轩
 
. 首页 . 相识雨轩 . 轻松一刻. 雁过留声 . 美文欣赏
网页效果: 23.9 左侧菜单 代码: 无标题文档
  相识雨轩
  轻松一刻
  雁过留声
  美文欣赏
寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 1 8 9 网页效果: 23.10 首页内容 代码: Content.htm 听雨轩--晨舞朝霞,夜听风雨! 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 1 9 0

 

沉闷的舞者

-- 节选自抬首低眉的" 沉 闷 的 舞 者 "

我 是这个陌生城市一个孤独的舞者,沉闷的舞者。

华灯初上的夜晚,看着万家窗里橙红色的灯火,心里总会有暖暖的感 觉,只可惜没有一盏为我而燃,没有一盏是属于我的。

在这个陌生的城市,在这个不属于我的地方,我如一阵风,流 浪的风,匆匆而过,不留痕迹,不露声色,不着边际,透明如同虚无。我走过了,或许会 有人仓促而茫然的问道,你来过这里?真的吗?

网页效果: 23.11 友情连接 代码: friendLink: 无标题文档 网页效果: 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 1 9 2 23.12 版权信息 代码: Bottom.htm 听雨轩--晨舞朝霞,夜听风雨! 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 1 9 3
 
听雨轩--晨舞朝霞,夜听 风雨!
图片及文章均来自互联 网,谢谢网络上耕耘的作者.
Jerry 2005 年 8 月 于兰 州
 
网页效果: 23.13 制做样式表 代码: myStyle.css /* CSS Document */ A.topMenu{ text-decoration:none; font-size: 12px; color: #000000; } A.sideMenu{ text-decoration: none; font-size: 12px; color: #000000; } A.friendLink{ text-decoration: none; font-size: 12px; color: #0099CC; } .button{ FONT-SIZE: 12px; LINE-HEIGHT: 15px; } .inputBgcolor{ BACKGROUND-COLOR: #FFCCFF} .bottomText{ 寒雪谷(http://hi.baidu.com/snowyvalley) 座拥寒雪谷,笑迎风雨来! 1 9 4 font-size: 12px; } .bodyText{ font-size: 14px; } 23.14 网站的上传 我们接下来在网上查找免费的自由空间上传我们网页的内容,我们就可以拥有自己的的主页 了,而且我们的主页可以和大家以前分享. 23.15 课程总结 通过学习 Html 建立我们的网页文档,使用 css 美化我们的网页,使用 JavaScript 和用户进 行交互,最终我们建立了一个自己的网站”听雨轩”.我们的课程就到此结束了,对于如何建立 网站的内容我们可以参照教材上的源代码,自己动手建立自己的网站,分享自己的成果. Jerry 2005-8-26 于兰州
还剩193页未读

继续阅读

pdf贡献者

txdi2011bb

贡献于2013-04-03

下载需要 8 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!