xg网页设计2-1.ppt

1、第二章 CSS基础,CSS基础,传统HTML 的缺陷,HTML语言自HTML4.01以来，不再发布新版本。W3C组织发布了XML(Extensible Markup Language，可扩展的标记语言。比HTML更加严格)。 原因是： HTML变得越来越复杂化、专用化。有碍于HTML网页的兼容性。 不能适应现在越多的网络设备和应用的需要，比如手机、PDA、家电都不能直接显示HTML; 由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML; 数据与表现混杂。,XHTML的来由,但是XML过于复杂，且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场。

2、可以帮助解决严重制约HTML发展的问题。 大部分常见的浏览器都可以正确地解析XHTML，即使老一点的浏览器，XHTML作为HTML的一个子集，许多也可以解析。也就是说，几乎所有的网页浏览器在正确解析HTML的同时，可兼容XHTML。,XHTML的诞生,2000年底，国际组织公布发行了XHTML 1.0版本。 XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别。 XHTML就是一个扮演着类似HTML的角色的XML。所以，本质上说，XHTML是一个过渡技术，结合了XML的部分强大功能及HTML(大多数)的简单特性。,什么是XHTML,XHTML 指可扩展超文本

3、标签语言（EXtensible HyperText Markup Language）。 XHTML 的目标是取代 HTML。 XHTML 与 HTML 4.01 几乎是相同的。 XHTML 是更严格更纯净的 HTML 版本。 XHTML 是作为一种 XML 应用被重新定义的 HTML。,XHTML的优势,非常严密。早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后必须使用各种浏览器来检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器。 其中所有的东西都要被正确的标记，以产生形式良好的文档。,CSS(Cascading Style Sheet),级

4、联样式表/层叠样式表 在网页制作时采用CSS技术，可以有效地对全站页面有共同性质属性的布局、字体、颜色、背景和其它效果属性实现更加精确的控制。,遵守标记的语义,在开始CSS的设计前，要先学会设计遵守语义规范的HTML文档。 例：如下效果可以用什么标记实现？ 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 ma

5、ny photos where he isnt.,具有正确语义的HTML, Our Family As usual, Matt is making a funny face. We dont have many photos where he isnt. ,良好遵守语义规范的文档与CSS的配合, h2 text-align:center; ,CSS的作用可以达到效果及特点：,（1）在几乎所有的浏览器上都可以使用 （2）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 （3）可以轻松地控制页面的布局 。 （4）可以将许多网页的风格格式同时更新,用CSS解决传统HTML的缺点,例：在网页中

6、描述一个二级标题 内容：“CSS标记”， 字体：黑体字； 字体颜色：蓝色。 CSS标记 如果要对很多这样的标题进行修改,工作量非常大，给后期维护带来很多不便。,传统HTML的缺点,维护困难。后期修改和维护的成本很高。 标记不足。关于样式的标记较少。 页面体积往往过大，占用带宽。,CSS的构造：元素名、属性、属性值,如何描述一个人？ 张三 身高：185cm; 体重：200kg； 性别：男； 性格：外向、暴躁； 民族：汉族； ,如何描述一个元素？,例：描述2级标题加上特定样式要求： 字体：黑体； 字号：15px； 颜色：蓝色； 背景色：powderblue； 装饰：下划线；,CSS文本属性,col

7、or 设置文本的颜色。 1 direction 规定文本的方向 / 书写方向。 2 letter-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-

8、decoration:overline h2 text-decoration:line-through h3 text-decoration:underline h4 text-decoration:blink none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。( IE、Chrome 或 Safari 不支持 blink 属性值。),CSS字体属性,font 在一个声明中设置所有字体属性。 font-family 规定文本的字体系列。 font-si

9、ze 规定文本的字体尺寸。 font-style 规定文本的字体样式。 font-variant 规定文本的字体样式。 font-weight 规定字体的粗细。 font-size-adjust 为元素规定 aspect 值。 2 font-stretch 收缩或拉伸当前的字体系列。 2,font-family,规定元素的字体系列。 font-family 可以把多个字体名称作为一个“回退”系统来保存。 如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是字体族名称的一个优先表。浏览器会使用它可识别的第一个值。 例如： font-family:Times N

10、ew Roman,黑体,Serif;,Font-size,有两种方式定义字体大小： 1.绝对定义： Font-size：24px； 2.相对定义： （1）Font-size：200%； （2）font-size:1.5em;,Font-style属性,normal 默认值。浏览器显示一个标准的字体样式。 italic 浏览器会显示一个斜体的字体样式。 oblique 浏览器会显示一个倾斜的字体样式。,Font-weight属性（字体粗细）,normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。 100 200 300

11、400 500 600 700 800 900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。,font,是个简写属性，在一个声明中设置所有字体属性。 说明： 如果没有使用这些关键词，至少要指定字体大小和字体系列。 可以按顺序设置如下属性： 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; / 此处添

12、加其它样式 ,Style 元素, Starbuzz Coffee ,添加样式表内容, body background-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 : 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。 说明：检索或设置对象四边的外延边距。如果提供四个参数

13、值，将按上右下左的顺序作用于四边。只提供一个，用于全部的四边。提供两个，第一个用于上-下，第二个用于右-左。提供三个，第一个用于上，第二个用于右-左，第三个用于下。,Margin的属性设置,margin:10px 5px 15px 20px; margin:10px 5px 15px; margin:10px 5px; margin:10px;,border,语法：border : border-width | border-style | border-color 参数：该属性是复合属性。说明：如使用该复合属性定义其单个参数，则其他参数的默认值将覆盖各自对应的单个属性设置。要使用该属性，必须

14、先设定对象的height或width属性。,border-color,语法： border-color : color 说明：如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。要使用该属性，必须先设定对象的height或width属性。如果border-width等于0或border-style设置为none，本属性将失去作用。,Border-style,语法：border-style : none | | outset 参数：none : 无边框

15、。与任何指定的border-width值无关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 : 根据bord

16、er-color的值画3D凸边,Border-width,语法：border-width : medium | thin | thick | length参数：medium : 默认宽度thin : 小于默认宽度thick : 大于默认宽度length : 由浮点数字和单位标识符组成的长度值。不可为负值。,某侧边框的属性,border-top border-top-color border-top-style border-top-width,padding,语法：padding : length 说明：检索或设置对象四边的补丁边距。如果提供全部四个参数值，将按上右下左的顺序作用于四边。如果只

17、提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。,padding-top padding-bottom padding-left padding-right,background-image,语法：background-image : none | url (url)参数：none : 无背景图url : 使用绝对或相对地址指定背景图像说明：设置或检索对象的背景图像。,body background-image:url(bgheart.gif); ,background-attachment,语法：backg

18、round-attachment : scroll | fixed 参数：scroll : 背景图像是随对象内容滚动fixed : 背景图像固定说明：设置或检索背景图像是随对象内容滚动还是固定的,background-repeat,语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y 参数：repeat : 背景图像在纵向和横向上平铺no-repeat : 背景图像不平铺repeat-x : 背景图像在横向上平铺repeat-y : 背景图像在纵向平铺说明：设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像

19、。,body background-image:url(bgheart.gif); background-repeat:no-repeat; ,background-position,语法：background-position : length | lengthbackground-position : position | position 参数：length : 百分数 | 由浮点数字和单位标识符组成的长度值。 position : top | center | bottom | left | center | right,background-position,说明：设置或检索对象的背

20、景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。,background-position:30% 80%; background-position:top; background-position:top right ;,小结：CSS 语法,CSS 语法由三部分构成： 选择器、属性和值。 selector property: value 选择器 (selector) 通常是希望定义的 HTML 元素或标签，属性 (property) 是希望改变的属性。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）,CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。 DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。 采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下4个显著优势： 1