第二讲附标签和属性参考手册.docVIP

第二讲：充满创意的网页设计 ———————————— 复习下上一讲所讲授的标签内样式设定方法 例： a style = color:red;红色字/a span style = color:blue;蓝色字/span img style = width:50px;height:30%; src = img/photo.jpg/ (插入一个宽为50像素和高占容器高的30%的指向网页所在文件夹下的img文件夹的photo.jpg图片，容器可以是table表格或是div层) ————————————例二，控制表格大小和表格内文字的效果以及插入图片到表格内 table style = width:500px; height:400px; 【创建500像素宽、400像素高的表格，但表格真实大小以内容大小为主】 tr td style = font-family:微软雅黑; color:red; font-size:50px;50像素大小的红色微软雅黑字体/td td img src = img/photo.jpg/ /td /tr /table ————————————— 更多的就不再赘述了，表格对于存放数据、文本、图像来说是非常方便的工具，虽然使用看不见的表格进行网页布局是一种很有用的方法，但因为排版僵化，无法将图像、文字像PS图层一样层叠，缺乏动态效果，所以提倡的方法是使用样式表而不是表格来进行网页布局。样式表的功能非常强大，应将其用于设计复杂的网页。 —————————————小总结 标签/属性 功能 table.../table 创建表格，可以包含任意数量的行(tr标签) tr..../tr 定义表格的一行，可以包含一个或多个单元格(td标签) td.../td 定义表格中的一个数据单元格 属性 border = 宽度 指定表格边框的宽度，单位为像素，如果border = 0或忽略该属性，边框将不显示 cellspacing = 间距 表格单元格之间的间距，单位为像素 cellpadding = 填充距离 表格单元格边框同其内容的间距，单位为像素 style = width : 宽度 表格在网页中的宽度，可以是像素数或网页宽度的百分比 style = height:高度 表格在网页中的高度，可以是像素数或网页高度的百分比 style = background-color:颜色 表格与没有背景颜色的单元格的背景颜色 style = backgroundimage:url(图像地址) 表格与没有背景图像的单元格的背景图像 style = text-align:对齐方式 单元格内容的水平对齐方式，可能的值为left\right\center style = vertical-align:对齐方式 单元格内容的垂直对齐方式，可能的值为top\middle\bottom 二，使用CSS样式表格式化网页 表格作为网页布局工具曾被大量用于Web，但随着样式表的出现，表格用途则仅限于将信息排列成行和列，除去表格作为网页布局机制外，样式表也是指定字体、控制边距、指定边框和调整网页外观的首选方法。 样式表背后的概念很简单：创建一个独立的样式表文档，以指定字体、颜色、背景和网页外观的特征。决定修改字体或颜色主题时，只需要修改一两个样式表，就可以一次性修改所有网页。因此，样式表是一组格式化指令，能够同时控制众多HTML页面的外观。而不需要逐一改变每个标签的属性。 CSS——级联样式表，是一种定义样式的语言，用于描述如何格式化和显示网页中的信息。CSS样式可直接存储在HTML网页中的style标签或属性内，也可以存储为独立的样式表文件，文件拓展名为.css 级联——CSS样式表中的样式形成一个层次结构，更具体的样式覆盖通用样式，即样式优先级由CSS的层次结构决定，可将CSS看做一种继承关系，父母的特征传给子女，但子女有更特殊的特征——父母样式可以被子女更具体的样式覆盖 ————————————例三:请说出文本的颜色 div style = color:green This text is green. p style = color:blue This text is blue. /p p This text is still green. /p /div —————————— 在这个例子中，颜色green通过样式属性color应用于div标签，因此div标签中的文字是绿色的。由于p标签是div标签的子标签，因此绿色的文本样式传递给p中的文本。然而，第一个p覆盖了color样式，将它改为蓝色。最后的结果是第二段文本是蓝色，第二段文本仍为传递而来的绿色。 ———————