JavaScript+html入门学习笔记_第1页
JavaScript+html入门学习笔记_第2页
JavaScript+html入门学习笔记_第3页
JavaScript+html入门学习笔记_第4页
JavaScript+html入门学习笔记_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、1.名词解释：WWW：Word Wide Web，万维网W3C：World Wide Web Consortium，万维网联盟/W3C理事会。HTML：Hyper Text Markup Language， 超文本标记语言。CSS：Cascading Style Sheet，级联样式表。XHTML：eXtensible HyperText Markup Language，可扩展超文本标记语言。2.参考网页的源代码。右击，查看源文件。3.HTML不是编程语言，而是一种描述性的标记语言。标记：就是用来描述网页内容的一些特定符号。4.html标记的语法：标记分为两种，单标记、双标记<标记符&g

2、t;没有结束的标记单标记<开始标记符></结束标记符>双标记5.需要注意的：在xhtml中规定，所有html标记，都要小写所有的标记，都是要有关闭符号的。如下：html-xhtml<br>-<br /><标记名称 属性 = " 属性值 "></标记名称>所有html都有一个基本结构。网页的head信息，标识网页文件的头部信息，如标题、搜索引擎关键字等。6.meta 标记：meta标记用于定义文件信息，是对网页文件进行说明，便于搜索引擎查找。放置于<head></head>之间。用

3、meta设置关键字：<meta name = "keywords" content = "关键字">多个关键字用“,”分隔。设置描述：<meta name = "description" content = "对关键字的扩展说明">设置作者：<meta name = "author" content = "作者名">设置字符集：<meta http-equiv = "content-type" content =

4、"text/html;charset = gb2312">编码格式：GB2312编码占用2个字节，UTF-8占用3个字节，如果网页文字较多，选择GB2312编码。设置页面定时跳转：<meta http-equiv = "refresh" content = "2;URL = "/>里面的2，代表2秒上面的几个地方需要特别注意：1.http-equiv之间不能加空格，否则没用，也就是不能写成“http - equiv”！2.content-type也是一个整体，不能以空格分隔。7.<body>标记的详解：【

5、1】<body>是网页的主体标记。【2】注释的写法：<!-这里面填写注释内容->。【3】<body>的属性：<body bgcolor = "背景颜色" backgroud = "背景图片的路径" text = "文本颜色" link = "链接文本颜色" vlink = "访问过的链接颜色" alink = "激活的链接颜色" leftmargin = "左边界" rightmargin = "右边界&

6、quot; topmargin = "上边界" bottommargint = "下边界">。上面的边界的单位都是像素。【4】html元素、html标签、html标记都是一样的。【5】有些html元素，有默认的值，比如margin，它不是直接靠在页面的边缘或顶端的，而是空了一点距离，如果想取消这个可以把leftmargin或者topmargin都设置为0。8.标记语义的应用：【1】font标记没有语义上的作用。【2】普通加粗标记：<b>文字内容</b> 普通倾斜标记：<i>文字内容</i>，二者都没有

7、在语义上突出是重点的意思。【3】语义加强加粗标记：<strong>文本内容</strong> 语义加强的倾斜标记：<em>文本内容</em>，二者都告诉了浏览器，加粗或倾斜的是重点。【4】各个标记之间的权限不同，当控制比较重要的内容时，可以用<strong>，标题部分，一般都用<h1>标记。【5】下划线<u>文本</u>；删除线<s>文本</s>；上标<sup>文本<sup>；下标<sub>文本<sub>，<br />

8、;换行标记。【6】段落(paragraph)标记<p></p>：格式：<p align = "对齐方式(left、center、right)"></p> 【7】用适合的html标记，去描述网页内容，这才是网页优化的核心。9.标题：【1】<hn align = “对齐方式”>标题内容<hn> ，标题标记，n的取值范围是1 - 6。标题标记内的文本会以加粗方式显示，hn针对的是段落，font标记针对的是任意对象的文字。【2】align属性。10.<br />换行标记：【1】<br />

9、;换行不分段，在一个段落里面换行。11.<hr /> 水平分割线：【1】主要属性：align属性，分割线的对齐方式；size属性，像素值和百分比，数值越大，线越粗；width属性，像素值和百分比，决定线的长度。其中，像素值是一个绝对的值，不会随着窗体大小的改变而改变。noshade属性，不带阴影，纯色的实体线。color属性，颜色。11.在xhtml中，所有的标签都必须有属性值，如果没有，就是用属性名，例如：<hr noshade = "noshade" />，在html中，可以直接写成<hr noshade>。12.特殊标记：【1】定义

10、一个块应用：文本缩进标记<blockquote>.</blockquote>属性：cite url被引用的地址。如：<blockquote cite = ""><!-这里的链接不会显示在网页中->引用的正文</blockquote>【2】<center></center> 居中(在xhtml中已被废弃的标记)。【3】预格式化：<pre></pre>13.特殊字符（转义符）的输入：【1】特殊字符转义码空格：&nbsp;版权号©：&copy;注册

11、商标®：&reg;引号"：&quot;and符号：&amp;小于符号（）：&lt;大于符号（）：&gt; 14.网页中信息的排序显示：【1】列表的标记：1、无序列表<ul>.</ul> Unordered List 无序列表语法：<ul type = "项目符号类型"><li type = "项目符号类型">列表内容1</li><li>列表内容2</li></ul>说明：<li>.<

12、/li>表示一个列表。项目符号类型有三种，disc是实心圆圈，circle是空心圆，square是正方形。2、有序列表<ol>.</ol> Order List（有序列表） ，li = list语法：<ol start = "列表起点" type = "项目符号类型"><li>列表内容1</li></ol>说明：start属性，表示列表从哪个数字开始，type属性的值有：1、a、A、i、I。也可用上面无序列表的符号。1 表示编号从阿拉伯数字1开始依次往后。a 表示小写英文字母开

13、始，a、b、c、dA 表示大写的英文字母。i 表示小写的罗马数字，i、ii、iii、ivI 表示大写的罗马数字，I、II、III、IV3、定义列表<dl>.</dl> define list 定义列表语法：<dl><dt>标题1</dt><dd>内容1</dd><dd>内容2</dd><dt>标题1</dt><dd>内容1</dd><dd>内容2</dd></dl>说明：<dl>.</d

14、l>定义一个列表；<dt>.</dt>表示一个项目（标题）；<dd>.</dd>表示一个项目（标题）下更详细的内容的解释。15.图片：【1】语法：<img src = "图片路径" />。注：src = source。【2】网页常用图片格式：GIF：最多只能保存256种颜色，支持透明色，支持动画；JPEG：不支持透明及动画，颜色可达1670万种。PNG：支持透明色，不支持动画，颜色从几种到1670万种。【3】路径：绝对路径：提供文档全部主机名、路径及文档名称。相对路径：当前文档开始的路径。一般都用相对路径，把

15、图片和网页放在同一个文件夹内。./向上一级目录。根相对路径：【4】标记属性：src：图片的路径，URL。alt：规定图片的替代文本（图片无法显示时），文本。title：鼠标悬停时显示的内容，文本。width：设置图片宽度，像素值和百分比，设置成百分比的时候，是相对于浏览器窗口的。height：设置图片高度，像素值和百分比。border：设置图像的边框，像素值。align：对齐方式。left：图片靠左，文字靠右right：图片靠右，文字靠左top：文字垂直居上，文字在右边。middle：文字垂直居中，文字在右边。bottom：文字垂直居下（默认值），文字在右边。vspace：定义图像顶部和底部的

16、空格（垂直边距），像素值。hspace：定义图像左侧和右侧的空白（水平边距），像素值。16.网页布局思想：【1】传统的table标记，发展到DIV+CSS。【2】从大到小排列。【3】从左到右，从上到下。17.网页布局之table标记：【1】基本结构：<table>.</table>定义表格<tr>.</tr>定义表行，是table row的缩写，row，“行”的意思。<td>.</td>定义单元格，是table data cell的缩写，cell，“单元格”。<th>.</th>定义标题栏（文字加粗

17、）。【2】属性：<table bgcolor = "">，设置表格的背景颜色。<table background = "">，设置表格的背景图片。<table border = "">，设置表格边框的宽度，不设置，默认为0。<table cellpadding = "">，单元格边框与内容之间距离的大小，默认为2（表格边距），内填充。<table cellspacing = "">，设置单元格之间空间的大小（单元格间距），外填充。<

18、;table bordercolor = "">，设置表格边框的颜色。<table bordercolorlight = "">，设置边框高亮部分的颜色（边框大于1时可用）。<table bordercolordark = "">，设置边框暗部分的颜色（边框大于1时可用）。<table align = "">表格的对齐方式（left、right、center）。<table width = "">，设置整个表格的宽度，像素值和百分比。【3】列

19、（单元格）<td>的属性：<td width = "">，设置单元格的宽度。<td height = "">，设置单元格的高度。<td bgcolor = >，设置单元格的背景颜色。<td background = "">，设置单元格的背景图片。<td align = "">，设置单元格的水平对齐方式。<td valign = "">，设置单元格的垂直对齐方式。<td rowspan = "&qu

20、ot;>，设置行合并的数目（垂直合并）。<td colspan = "">,设置列合并的数目（水平合并）。<td nowarp = "nowarp">，设置在单元格中不换行。【4】合并（延伸）单元格之后，就会有多处的单元格，就要删除。合并单元格，就是删除多余的td。【5】合并删除td的公式：删除的个数 = 合并的个数 - 1。【6】立体表格效果，就是将表格的亮边框颜色（bordercolorlight）和暗边框颜色（borderclolrdark）对比。【7】细线表格效果的公式：将表格自身的border = 0；给表格设置背

21、景颜色细线的颜色；给表格设置单元格之间的距离线条的粗细。【8】行（tr）的属性：<tr width = "">，设置行的宽度。<tr height = "">，设置行的高度。<tr bgcolor = "">，设置行的背景色。<tr align = "">，设置行的水平对齐方式。<tr valign = "">，设置行的垂直对齐方式（top、middle、bottom）。18.当<td></td>之间没有内容时，

22、默认是不显示边框的，如果想看到，可以加上&nbsp;19.<table>下的边框设置：【1】frame属性(外框)：void：不显示表格的边线。above：只显示表格的上边线。below：只显示表格的下边线。hsides：只显示表格的上下边线。vsides：只显示表格的左右边线。lhs：只显示表格的左边线。rhs：只显示表格的右边线。border/box：显示表格的所有边线。说明：都是在border不为零的前提下，才有效。【2】rules属性(表格内部的线)：rows：只显示出横行的格框线。cols：只显示出直行的格框线。all：显示全部格框线。groups：表示列组合水平

23、部分。none：不显示任何框线。20.表格的标题：【1】格式：<table><caption>.</caption></table>【2】属性值：aligntop：标题在表格上方bottom：标题在表格下方。21.网页的设计水平：代码精简。省略不必要的代码。22.表格的结构化：【1】结构化格式：<table><thead>.</thead>，表头区。<tbody>.</tbody>，表体区。<tfoot>.</tfoot>，表尾区。</table>【2

24、】直列化格式：<colgroup>.</colgroup>属性值：align：left，靠左；right，靠右；center，居中。valign：top，靠上；middle，居中；bottom，靠下。span：数字，直列数。bgcolor：颜色值，设置背景颜色。22.超链接：【1】语法：<a href = 链接到的地址 title = "注释内容" target = "打开链接窗口的形式">显示内容</a>_blank在新窗口中打开。_self在自身窗口中打开（默认值）。_parent在上一级窗口中打开，框

25、架会经常使用。_top在浏览器的整个窗口中打开，忽略任何框架。【2】超链接的分类：内部链接：当前文档与目标文档在同一站点内。<a href = "目标文档路径及文件名"></a>外部链接：当前文档与目标文档不再同一站点内。<a href = URL></a>E-mail链接：允许访问者向指定的邮箱发送邮件。<a href = mailto:电子邮件地址></a>局部链接（锚点）：跳转到同一网页或其他文档中的指定位置。用法：创建锚点：<a name = "锚点名称">显示内

26、容</a>链接锚点：<a href = "#锚点名称">显示内容</a>从当前文档跳转到另一个文档的指定位置：<a href = "文档路径#另一个文档的位置名称">显示内容</a>空链接：就是没有目标端点的链接。格式：<a href = "#">显示内容</a>作用：设置首页。例如：<a href = "#" OnClick = "this.style.behavior = 'url(#default#ho

27、mepage)'this.sethomepage('')">把百度设为首页</a>添加收藏。例如：<a href = "#" onclick = "javascript:window.external.addfavorite('','收藏名称')">添加到收藏夹</a>脚本链接：是一种特殊的链接，当单击设置脚本的文本或图像时，就会执行相应的javascript语句。常用到的脚本链接：<a href = javascript:window.op

28、en("")>新浪</a>关闭窗口：<a href = javascript:window.close()>关闭窗口</a>打开窗口：<a href = javascript:window.open('文件名')>打开窗口</a>23.HTML表单：【1】表单的作用是将用户的信息传递给服务器，是客户端与服务器端进行信息交流的途径。【2】form（表单）标记用于创建一个表单，定义表单的开始与结束。是一个容器。所有表单元素必须在<form></form>标记中才有作用。【3

29、】语法：<form action = URL(传送目标，处理表单信息的服务器端应用程序)method = 处理表单数据的方法(POST/GET)如果不写method则默认提交方式为GET,name = 表单名称>表单元素</form>【4】POST方法可以传递大量信息，GET方式将值附加到请求该页的URL中。适合传递少量信息（默认方式）。【5】表单元素标记：单行文本框：<input name = "文本框名称" type = "text" value = "初始值" size = "显示字符数&

30、quot; maxlength = "最多容纳字符数" readonly = "readonly"(设置为只读) disabled = "disabled"(设置为不可操作) />密码框：<input name = "文本框名称" type = "password" value = "初始值" size = "显示字符数" maxlength = "最多容纳字符数" readonly = "readonly&quo

31、t; disabled = "disabled"/>单选框：<input name = "单选框名称" type = "radio" value = "提交值" checked = "checked"(是否被选中) />注意：单选框的name属性要一样，否则无法单选。复选框：<input name = "复选框名称" type = "checkbox" value = "提交值" checked = "

32、checked" />提交按钮：<input type = "submit" value = "确认" />，定义提交按钮。提交按钮会把表单数据发送到服务器。重置按钮：<input type = "reset" value = "取消" />，定义重置按钮。重置按钮会清除表单中的所有数据。列表框：菜单式：<select name = "列表框名称"><option selected = "selected"(哪个为初始

33、选择，就添加selected语句只有一个 value = "提交值")>列表1</option><option value = "提交值">列表2</option></select>分组：<optgroup label = "分组名称"></optgroup>列表式：<select name = "列表框名称" size = "显示的行数" multiple(如果允许多选，则写上该命令。)><opti

34、on value = "提交值">列表1</option></select>具体案例请参见：D:html表单标记.htm浏览框：<input name = "名称" type = "file" size = "显示长度" />按钮：<input type = "按钮类型（reset重置表单、submit提交表单、button普通按钮、）" name = "按钮名称" value = "按钮显示内容">图

35、形按钮：<input name = "" type = "image" src = "图片路径及名称" />多行文本框：<textarea name = "文本框名称" cols = "每行中的字符数" rows = "显示的行数">初始内容</textarea>隐藏域：<input name = "名称" type = "hidden" value = "提交值" />

36、;表单外框：<fieldset>.</fieldset>定义围绕表单中元素的边框，<legend>.</legend>legend为fieldset定义标题。【7】所有表单元素，以input为例，必须包含type属性与name属性！【8】input标注<lable>.</lable>：<label>标注内容</lable>标签为input元素定义标注。lable元素的for属性应与相关元素的id属性相同。例如：<label for = "man">男</labe

37、l><input type = "radio" name = "sex" value = "男" id = "man">label标记，可以点击里面的“男”而达到选中单选框的效果。24.多媒体元素标记：【1】FLASH动画的插入：语法：<embed>.</embed>属性：src：URL，FLASH文件的路径。width：像素值/百分比，flash宽度。height：像素值/百分比，flash高度。wmode：transparent，使flash背景透明，<embed

38、 wmode = "transparent">。wmode，即窗口模式。title：文本，flash的标题，把鼠标移至上面时显示的提示内容。【2】滚动字幕：语法：<marquee>滚动的文本</marquee>属性：direction = "滚动方向"left，左；right，右；up，上；down，下。behavior = "滚动方式"scroll，一圈一圈绕着走；slide，只走一圈；alternate，来回地走。loop = "滚动的循环次数"，若未指定则一直循环（loop =

39、"infinite"）。infinite，无限、无穷。bgcolor = "背景颜色" width = "宽度" height = "高度"onMouseOver = "this.stop()" onMouseOut = "this.start()"scrollamount = "速度值"，数值越大速度越快。scrolldelay = "延时"，走一步，停一下。【3】背景音乐的插入：<bgsound src = "音乐的

40、路径及文件名" loop = "循环次数">autostart=true/false，在载入音乐之后，是否自动播放。loop = "-1"表示无限循环。这种标记好像只有IE能支持，并且无任何播放界面显示。【4】用<embed></embed>来插入音乐：语法：<embed src = "音乐文件" ></embed>属性：autostart = true/false，在载入完成后是否自动播放。loop = "循环播放的次数"，-1表示无限循环。hidd

41、en = "true/no"，是否隐藏播放界面。volume = "0-100"，设置音量的大小。width/height，设置播放器的宽和高。align，对齐方式。设定控制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom。25.HTML框架：【1】概述：框架是将浏览器窗口划分为不同的区域，每个区域，可以包含不同的网页，以实现多个网页在同一浏览器窗口中显示。【2】用框架时不需要写body标记。【3】语法：<frame

42、set rows = "控制行数及行高" cols = "控制列数及列宽" framespacing = "框架间距" frameborder = "是否显示框架边框，yes或no" border = "边框宽度" bordercolor = "边框颜色"><frame src = "被包含的文件路径及名称" name = "框架名称" noresize = "是否允许改变框架尺寸，true或false"

43、 scrolling = "滚动条显示，yes或no或auto"></frameset>【4】cols，是控制列数及列宽的，有多少列，每列宽度怎样。比如：<cols = "100,300,100，*">，这样，就分成了四列，每列的具体数值可以是百分比和像素值，这里定义了几个值，下面就应该有几个frame与之对应。【5】如果链接指向的是框架中的某个区域，必须给这个框架命名。然后利用<a>标记的target属性，指向框架中的某个区域。【6】内嵌框架iframe标记：在网页之中嵌入网页。<iframe src =

44、 "被嵌入的网页文件名" widht = "宽度" height = "高度" scrolling = "滚动条的方式（同frameset）" frameborder = "是否显示边框" name = "框架名称"></frame>26.DOCTYPE：【1】document type（文档类型）的简写，主要用来说明你用的html或者xhtml是哪个版本。浏览器根据你DOCTYPE定义的DTD（文档类型定义）来解释页面代码，并展现出来。所以，要建立符合标准

45、的网页，DOCTYPE声明是必不可少的关键组成部分。【2】XHTML 1.0提供了三种DTD声明：过渡的（Transitional）：要求非常宽松的DTD，它允许继续使用HTML4.01的标识（但是要符合xhtml的写法）。完整代码如下:<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">严格的（Strict）：要求严格的DTD，你不能使用任何表现层的标识和属性，

46、例如<br>。完整代码如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict/EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd">框架的（Frameset）：专门针对框架页面设计使用的DTD，如果页面含有框架，需要采用这种DTD。完整代码如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 frameset/EN" "/

47、TR/xhtml1/DTD/xhtml1-frameset.dtd">27.html与xhtml 1.0的区别：【1】xhtml标签必须被正确的嵌套。【2】xhtml 标签必须被正确的关闭。【3】标签名必须用小写字母。【4】属性名必须小写，必须有值，值必须加引号。二、CSS1.DIV+CSS实际应该叫做XHTML+CSS。2.Web标准：【1】什么是web标准？web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。包括HTML、XHTML、JavaScript、CSS等。【2】web标准的目的：在于创建一个统一的用于web表现层的技术标准，以便于通过不同

48、浏览器和终端设备向用户展示信息内容。【3】CSS是内容与样式分离。【4】web标准的构成：web标准主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。结构标准对应的主要语言是XHTML。表现标准对应的主要语言是CSS。行为标准对应的主要语言是JavaScript。制作成一个静态页面，主要用到的就是XHTML与CSS，所以制作标准页面的技术就是XHTML+CSS。3.理解表现和结构分离：【1】名词解释：内容：就是制作者放在页面内真正想要让访问者浏览的信息。结构：使内容更加具有逻辑性和易用性。表现：用于修饰内容的外观的样式的东西称为表现。行为

49、：对内容的交互及操作效果，如通过javascript判断表单提交等。4.xmlns属性：xmlns属性在xhtml是必需的，而在html中则不是。它的固定值是：xmlns="/1999/xhtml"。写法是：<html xmlns="/1999/xhtml">。5.CSS简介：【1】概述：CSS是cascading style sheets（层叠样式表）的简称。CSS可以作为html、xhtml、xml的样式控制语言。【2】CSS语法结构：选择符 属性：值。例如：bodyfont

50、 size = 12px;参数说明：1、选择符（selector）：指明这组样式所要针对的对象。可以是一个xhtml标签，如body、h1；也可以是定义了特定的id或class的标签，如#main选择符表示选择<div id = "main">，即一个被指定了main为id的对象。2、属性（property）：选择符的样式属性，如颜色、大小、定位、浮动方式等。3、值（value）：是指属性的值。4、同时可以为一个选择符定义多个属性，每个属性之间用分号分隔。6.CSS语法结构：【1】定义CSS要写在<style></style>标记中。位于

51、<head>之间。【2】bodyfont-size:15px;，选择器属性：属性值；。可以定义多个属性值。【3】所有的属性值后面都要加上分号。【4】CSS控制字体的语法：设置字号：font-size:12px;设置字体颜色：color:#16进制颜色代码或颜色名称;设置字体：font-family:"Arial","宋体"（字体设置分中英文，如果要设置成不同的字体，要将英文字体设置在前，中文在后。）设置行高：line-height:150%;/line-height:1.5em;例如：pline-height:2em;设置字体的粗细：font

52、-weight:normal(正常);bold(加粗);设置背景颜色：background:green;【5】某些html标记有其默认的CSS属性值，例如<h1>。那么，为了更好的兼容浏览器，建议将所有的CSS元素，重置为标准的。【6】CSS注释标记：/*注释内容*/。【7】CSS长度单位：1、相对长度单位：em：相对于当前对象内文本的字体尺寸。定义为1em就是其1倍，2em就是2倍。px：像素。2、绝对长度单位：in：英寸。cm：厘米。mm：毫米。pt：点（point）。【8】控制文档中的some text的span标记：1、<span>.</span>标

53、记可以单独定义文档中的某些文字或某个文字。再利用CSS来进行添加样式。【9】CSS颜色单位：十六进制：color:#ff0000颜色名称：color:redRGB三原色单位：rgb(255,255,0);7.如果要文字在垂直方向上居中，可以将行高设置为元素的高度，行高 = 元素高度。如：设置行高为50px，那么它的line-height:50px;这样，文字就会以垂直居中的方式显示了。这样做需要注意：文字的内容不能超过元素的宽度，也就是不能换行。如果真要换行，那么可以用width属性，把宽度适当的增加。8.CSS可以重新设置xhtml标签的默认样式。比如hn标签默认加粗，可以用CSS取消其加粗

54、显示，即：font-weight:normal;9.网页中加入CSS的四种方式：【1】内联式样式表：直接写在现有的标记中。如：<p style = "color:red">红色字体</p>【2】嵌入式样式表：使用<style></style>标签嵌入到HTML文件的头部中<head>标记内。如：<style type = "text/css"><!-body background:green;color:red;-></style>注：<!- ->

55、用于当浏览器不支持样式表时，不会将样式表内容显示出来。【3】外部链接式样式表：将样式表写在一个独立的.CSS文件中（即结构与样式分离），然后在网页<head>标记中用link标签调用它。如：<link href = "CSS文件路径及文件名" rel = "stylesheet" type = "text/css" />【4】导入式样式表：导入式样式表与链接式样式表的功能基本相同，只是语法和动作上略有不同，同样也将导入样式代码写在<head>标记内。语法：<style type = "

56、;text/css">import url("CSS文件名");</style>说明：导入式与嵌入式是相类似的，不同的是，导入式会占用html空间；有的浏览器解析会有问题，会最后再读取import的内容。10.用导入式样式表，新建一个CSS样式文件，再把多个样式文件放入一个样式文件中main.css中。然后在网页中用link标记来链接mian.css这个样式表文件。11.标签的ID属性：【1】ID属性可以为当前标签添加一个唯一值，ID具有唯一性，所以一个ID只能在网页中出现一次。语法如下：<p id = "id名称"&g

57、t;</p>。例如：<p id = "one"></p>【2】当CSS定义选择器的时候，就要用#+id名称的方法。如：#id名称属性：值;。例如：#onefont-size:15px;【3】ID名不要用数字或以数字开头12.选择符的分类：【1】标签选择符：针对html标签。【2】ID选择符：针对某一个ID。【3】类选择符：针对某一类，或某一些元素，他们的样式是相同的。13.类选择符：【1】针对某一类元素，设置相同的样式。【2】定义类选择符的方法：.类名称属性：值；。如：.noticecolor:red，定义完了类之后，还要通过class

58、= "类名称"来应用于元素。如：<p class = "notice">.</p>【3】同时给某个元素应用多个类，类名与类名之间用空格分隔：<p class = "类名1 类名2."></p>【4】可以同时给某个元素定义多个类和ID。如：<p class = "类名1 类名2" id = "id名">14.CSS的特性：【1】继承：网页中的子元素，将继承父元素的样式。例如，要控制段落p中的文字大小，可以直接给body加样式。继承父元素的

59、某些样式，因为有些子元素本身就有默认值，所以就不会继承父元素。【2】层叠：网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式。后面定义的样式，会覆盖前面定义的样式。15.CSS样式的优先权：内联式（行内样式）内嵌式（内部样式）链接式（外部样式）import导入式。原则：就近原则。作用范围越小，优先权越高。距离被修饰目标越近的样式优先权就越高。选择符优先权：行内idclass标签选择符。我们可以采用!important语法来提升重要性（优先权）。例如：p background-color:#FFCCCC!important;IE6不支持该语句。background-colo

60、r:#66CCCC;16.CSS控制文本：【1】设置对象中文本缩进：text-indent:2em，这里可以是负值。【2】文本的水平对齐方式：text-align:left,center,right。【3】对象中空白处理：white-space:normal(自动换行)、pre(换行和空白受保护，就是保留原来的格式)、nowrap(强制在同一行显示)。【4】文本大小写控制：text-transform:none（正常大小）、capitalize（每个单词的第一个字母转换成大写）、uppercase（转换成大写）、lowercase（转换成小写）。【5】元素的垂直对齐方式：vertical-al

61、ign:sub（设置文字为下标）、super（设置文字为上标）、top（把元素的顶端与行中最高元素的顶端对齐）、middle（居中对齐）、text-bottom（把元素的底端与父元素字体的底端对齐）。【6】设置字体样式：font-style:normal（正常）、italic（斜体）。【7】修饰文字：text-decoration:none（正常）、underline（下划线）、overline（上划线）、line-through（删除线）、blink（闪烁，谷歌、IE都不支持，好像火狐能支持）【8】字符间距：letter-spacing:normal（默认）、length（长度单位，可以是e

62、m、cm、px等，例如letter-spancing:5cm;）。【9】单词间距：word-spacing:normal（默认）、length（长度单位，可以是em、cm、px等）。在默认情况下，只能支持英文单词，但是，如果在中文文字当中加入空格，那么也是同样的效果。参见实例：CSS控制文本。17.CSS控制超链接CSS伪类：【1】未访问的链接：a:link color:#ff0000【2】已访问过的链接：a:visited color:#00ff00【3】鼠标移动到链接上的颜色：a:hover color:#FF00FF【4】鼠标按下链接：a:active color:#0000ff【5】CSS控制元素的某种状态，叫做伪类。语法为：元素名称：伪类名称属性：值。例如：超链接的鼠标经过状态，a：hovertex

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论