《xg网页设计2-1.ppt》由会员分享，可在线阅读，更多相关《xg网页设计2-1.ppt（49页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第二章第二章 CSS基础基础CSS基础基础传统HTML 的缺陷HTML语言自语言自HTML4.01以来，不再发布新版本。以来，不再发布新版本。W3C组织组织发布了发布了XML(Extensible Markup Language，可扩展的标记语言。比，可扩展的标记语言。比HTML更加严更加严格格)。原因是：原因是：HTML变得越来越复杂化、专用化。有碍于变得越来越复杂化、专用化。有碍于HTML网页的兼容性。网页的兼容性。不能适应现在越多的网络设备和应用的需要，比如不能适应现在越多的网络设备和应用的需要，比如手机、手机、PDA、家、家电都不能直接显示电都不能直接显示HTML;由于由于HTML代码
2、不规范、臃肿，浏览器需要足够智代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示能和庞大才能够正确显示HTML;数据与表现混杂。数据与表现混杂。XHTML的来由但是XML过于复杂，且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场。可以帮助解决严重制约HTML发展的问题。大部分常见的浏览器都可以正确地解析XHTML，即使老一点的浏览器，XHTML作为HTML的一个子集，许多也可以解析。也就是说，几乎所有的网页浏览器在正确解析HTML的同时，可兼容XHTML。XHTML的诞生2000年底，国际组织公布发行了XHTML 1.0版本。XHTML是一个基于XML的置标语言
3、，看起来与HTML有些相象，只有一些小的但重要的区别。XHTML就是一个扮演着类似HTML的角色的XML。所以，本质上说，XHTML是一个过渡技术，结合了XML的部分强大功能及HTML(大多数)的简单特性。什么是XHTMLXHTML 指可扩展超文本标签语言（指可扩展超文本标签语言（EXtensible HyperText Markup Language）。XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的。XHTML 是更严格更纯净的 HTML 版本。XHTML 是作为一种 XML 应用被重新定义的 HTML。XHTML的优势非常严密。早期的浏览器接受私有的H
4、TML标签，所以人们在页面设计完毕后必须使用各种浏览器来检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器。其中所有的东西都要被正确的标记，以产生形式良好的文档。CSS(CASCADING STYLE SHEET)级联样式表级联样式表/层叠样式表层叠样式表在网页制作时采用在网页制作时采用CSS技术，可以有效地对全站页面有共同技术，可以有效地对全站页面有共同性质属性的布局、字体、颜色、背景和其它效果属性实现更性质属性的布局、字体、颜色、背景和其它效果属性实现更加精确的控制。加精确的控制。遵守标记的语义在开始CSS的设计前，要先学会设计遵守语义规范的HTML文
5、档。例：如下效果可以用什么标记实现？Our Family As usual,Matt is making a funny face.We dont have many photos where he isnt.能实现样式效果的一种表达方式 Our Family As usual,Matt is making a funny face.We dont have many photos where he isnt.具有正确语义的HTML Our Family As usual,Matt is making a funny face.We dont have many photos where he
6、 isnt.良好遵守语义规范的文档与CSS的配合 h2 text-align:center;CSS的作用可以达到效果及特点：（1）在几乎所有的浏览器上都可以使用）在几乎所有的浏览器上都可以使用（2）使页面的字体变得更漂亮，更容易编排，使页面真正赏）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。心悦目。（3）可以轻松地控制页面的布局）可以轻松地控制页面的布局 。（4）可以将许多网页的风格格式同时更新）可以将许多网页的风格格式同时更新 用CSS解决传统HTML的缺点例：在网页中描述一个二级标题 内容：“CSS标记”，字体：黑体字；字体颜色：蓝色。CSS标记 如果要对很多这样的标题进行修改
7、,工作量非常大，给后期维护带来很多不便。传统HTML的缺点维护困难。后期修改和维护的成本很高。标记不足。关于样式的标记较少。页面体积往往过大，占用带宽。CSS的构造：元素名、属性、属性值如何描述一个人？张三 身高：185cm;体重：200kg；性别：男；性格：外向、暴躁；民族：汉族；如何描述一个元素？例：描述例：描述2级标题级标题加上特加上特定样式要定样式要求：求：字体：黑体；字体：黑体；字号：字号：15px；颜颜色：蓝色色：蓝色；背景色：背景色：powderblue；装饰：下划线；装饰：下划线；CSS文本属性color 设置文本的颜色。1 direction 规定文本的方向/书写方向。2 l
8、etter-spline-heightacing 设置字符间距。1 设置行高。1 text-align 规定文本的水平对齐方式。1 text-decoration 规定添加到文本的装饰效果。1 text-indent 规定文本块首行的缩进。1 text-shadow 规定添加到文本的阴影效果。2 text-transform 控制文本的大小写。1 white-space 规定如何处理元素中的空白。1 word-spacing 设置单词间距。TEXT-DECORATION属性h1 text-decoration:overlineh2 text-decoration:line-throughh3
9、text-decoration:underlineh4 text-decoration:blinknone 默认。定义标准的文本。underline 定义文本下的一条线。overline 定义文本上的一条线。line-through 定义穿过文本下的一条线。blink 定义闪烁的文本。(IE、Chrome 或 Safari 不支持 blink 属性值。)CSS字体属性font 在一个声明中设置所有字体属性。font-family 规定文本的字体系列。font-size 规定文本的字体尺寸。font-style 规定文本的字体样式。font-variant 规定文本的字体样式。font-weig
10、ht 规定字体的粗细。font-size-adjust 为元素规定 aspect 值。2 font-stretch 收缩或拉伸当前的字体系列。2 FONT-FAMILY 规定元素的字体系列。font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是字体族名称的一个优先表。浏览器会使用它可识别的第一个值。例如：font-family:Times New Roman,黑体黑体,Serif;FONT-SIZE有两种方式定义字体大小：有两种方式定义字体大小：1.绝对定义：绝对定义：Font-size：2
11、4px；2.相对定义：相对定义：（1）Font-size：200%；（2）font-size:1.5em;FONT-STYLE属性normal 默认值。浏览器显示一个标准的字体样式。italic 浏览器会显示一个斜体的字体样式。oblique 浏览器会显示一个倾斜的字体样式。FONT-WEIGHT属性（字体粗细）normal 默认值。定义标准的字符。bold 定义粗体字符。bolder 定义更粗的字符。lighter 定义更细的字符。100 200 300 400 500 600 700 800 900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。FONT是
12、个简写属性，在一个声明中设置所有字体属性。说明：说明：如果没有使用这些关键词，至少要指定字体大小和字体系列。至少要指定字体大小和字体系列。可以按顺序设置如下属性：font-style font-variant font-weight font-size/line-height font-family 例：例：font:italic bold 12px/20px arial,sans-serif;CSS应用 h2 font-family:黑体黑体;color:blue;/此处添加其它样式此处添加其它样式 STYLE 元素 Starbuzz Coffee 添加样式表内容添加样式表内容 body b
13、ackground-color:pink;margin-left:10%;margin-right:10%;border:2px dotted gray;padding:10px 10px 10px 10px;font-family:times new roman;MARGIN语法：语法：margin:auto|length 参数：参数：length:由浮点数字和单位标识符组成的长度值由浮点数字和单位标识符组成的长度值|百分数。百分数是基于父对象的高度。百分数。百分数是基于父对象的高度。说明：说明：检索或设置对象四边的外延边距。检索或设置对象四边的外延边距。如果提供四个参数值，将按上右下左的顺
14、序如果提供四个参数值，将按上右下左的顺序作用于四边。作用于四边。只提供一个，用于全部的四边。只提供一个，用于全部的四边。提供两个，第一个用于上提供两个，第一个用于上-下，第二个用于右下，第二个用于右-左。左。提供三个，第一个用于上，第二个用于右提供三个，第一个用于上，第二个用于右-左，第三左，第三个用于下。个用于下。MARGIN的属性设置的属性设置margin:10px 5px 15px 20px;margin:10px 5px 15px;margin:10px 5px;margin:10px;BORDER语法：border:border-width|border-style|border-c
15、olor 参数：参数：该属性是复合属性。该属性是复合属性。说明：说明：如使用该复合属性定义其单个参数，则其他参数的默认值将覆如使用该复合属性定义其单个参数，则其他参数的默认值将覆盖各自对应的单个属性设置。盖各自对应的单个属性设置。要使用该属性，必须先设定对象的要使用该属性，必须先设定对象的height或或width属性。属性。BORDER-COLOR 语法：语法：border-color:color 说明：说明：如果提供全部四个参数值，将按上右下左的如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果只提供一个，将用于全部的四条
16、边。如果提供两个，第一个用于上下，第二个用于左如果提供两个，第一个用于上下，第二个用于左右。右。如果提供三个，第一个用于上，第二个用于左右，如果提供三个，第一个用于上，第二个用于左右，第三个用于下。第三个用于下。要使用该属性，必须先设定对象的要使用该属性，必须先设定对象的height或或width属性。属性。如果如果border-width等于等于0或或border-style设置为设置为none，本属性将失去作用。，本属性将失去作用。BORDER-STYLE语法：border-style:none|outset 参数：参数：none:无边框。与任何指定的无边框。与任何指定的border-wi
17、dth值无值无关关hidden:隐藏边框。IE不支持dotted:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线dashed:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线solid:实线边框实线边框double:双线边框。两条单线与其间隔的和等于指定的border-width值groove:根据根据border-color的值画的值画3D凹槽凹槽ridge:根据根据border-color的值画菱形边框的值画菱形边框inset:根据根据border-color的值画的值画3D凹边凹边outset:根据根据border
18、-color的值画的值画3D凸边凸边BORDER-WIDTH语法：border-width:medium|thin|thick|length参数：参数：medium:默认宽度默认宽度thin:小于默认宽度小于默认宽度thick:大于默认宽度大于默认宽度length:由浮点数字和单位标识符组成的长度值。不可为由浮点数字和单位标识符组成的长度值。不可为负值。负值。某侧边框的属性border-top border-top-colorborder-top-style border-top-width PADDING语法：padding:length 说明：检索或设置对象四边的补丁边距。如果提供全部四个
19、参数值，将按上右下左的顺序作用于四边。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。padding-toppadding-bottompadding-leftpadding-rightBACKGROUND-IMAGE语法：background-image:none|url(url)参数：none:无背景图url:使用绝对或相对地址指定背景图像说明：设置或检索对象的背景图像。body background-image:url(bgheart.gif);BACKGROUND-ATTACHMENT语法：ba
20、ckground-attachment:scroll|fixed 参数：scroll:背景图像是随对象内容滚动fixed:背景图像固定说明：设置或检索背景图像是随对象内容滚动还是固定的 BACKGROUND-REPEAT语法：background-repeat:repeat|no-repeat|repeat-x|repeat-y 参数：repeat:背景图像在纵向和横向上平铺no-repeat:背景图像不平铺repeat-x:背景图像在横向上平铺repeat-y:背景图像在纵向平铺说明：设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。body background-image
21、:url(bgheart.gif);background-repeat:no-repeat;BACKGROUND-POSITION语法：background-position:length|lengthbackground-position:position|position 参数：参数：length:百分数百分数|由浮点数字和单位标由浮点数字和单位标识符组成的长度值。识符组成的长度值。position:top|center|bottom|left|center|rightBACKGROUND-POSITION说明：说明：设置或检索对象的背景图像位置。设置或检索对象的背景图像位置。必须先指定必
22、须先指定background-image属属性。默认值为：性。默认值为：(0%0%)。如果只指定了一个值，该值将用于如果只指定了一个值，该值将用于横坐标。纵坐标将默认为横坐标。纵坐标将默认为50%。第。第二个值将用于纵坐标。二个值将用于纵坐标。background-position:30%80%;background-position:top;background-position:top right;小结：小结：CSS 语法语法CSS 语法由三部分构成：语法由三部分构成：选择器、属性和值。选择器、属性和值。selector property:value 选择器选择器 (selector)通常
23、是希望定义的通常是希望定义的 HTML 元素或标签，元素或标签，属性属性 (property)是希望改变的属性。属性和值被冒号分开，是希望改变的属性。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明并由花括号包围，这样就组成了一个完整的样式声明（declaration）CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的
24、特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下4个显著优势：1：表现和内容相分离：表现和内容相分离设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。2：提高搜索引擎对网页的索引效率：提高搜索引擎对网页的索引效率用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。3：提高页面浏览速度：提高页面浏览速度对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。
25、4：易于维护和改版：易于维护和改版你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。练习写出一个完整的HTML文档。在头部定义的样式表。要求如下：字号(font-size)：35px;字体(font-family):Times New Roman；颜色(font-color):蓝色；文本位置（text-align）:居中（center）；在body部分使用定义好的元素。练习用用CCS设置设置body元素的属性。要求如下：元素的属性。要求如下：（1）左右分别缩进页面的）左右分别缩进页面的10%。（2）边框的宽度是）边框
26、的宽度是1px，线条样式为虚线，线条样式为虚线（dashed），颜色为粉色。），颜色为粉色。（3）背景图像不平铺，位于页面的中心。）背景图像不平铺，位于页面的中心。（4）内容距离边框距离为）内容距离边框距离为20px。W3C组织万维网联盟万维网联盟（World Wide Web ConsortiumWorld Wide Web Consortium，简称W3CW3C），又称W3C理事会理事会。1994年10月在麻省理工学院计算机科学实验室成立。为解决web应用中不同平台、技术和开发者带来的不兼容问题，保障Web信息的顺利和完整流通，万维网联盟制定了一系列标准并督促Web应用开发者和内容提供者内容提供者遵循这些标准。