互联网软件开发与应用chap5优质PPT.ppt

互联网软件开发与应用chap5优质PPT.ppt

《互联网软件开发与应用chap5优质PPT.ppt》由会员分享，可在线阅读，更多相关《互联网软件开发与应用chap5优质PPT.ppt（59页珍藏版）》请在冰豆网上搜索。

可以实现网页结构与格式分离；

对网页布局、字体、背景和其它图文效果实现更加精确的控制；

更好的易用性和扩展性，可以单独以一个文件的形式出现。

总之，CSS在当前的网页设计中已经成为不可缺少的技术，小至去除链接文字的下划线，大致实现复杂的视觉和动态效果，网络中有大量的CSS代码，初学者可多参考别人CSS实现网页样式的方法。

CSS样式定义,CSS样式语法规则：

Selectorproperty1:

value1Selectorproperty1:

value1;

property2:

value2;

其中“Selector（选择符）”表示要定义样式的类型，选择符可以包括HTML标签符、用户自主义类class或用户自定义ID。

“属性（property）”表示由CSS标准定义的样式属性，“属性值（value）”为样式属性的值。

关于样式表的语法，要注意以下几个问题。

属性必须要包含在号之中。

属性和属性值之间用“:

”分隔。

当有多个属性时，用“;

”进行区分。

在书写属性时属性之间使用空格换行等，并不影响属性的显示。

如果一个属性有几个值，则每个属性值之间用空格分隔开。

BODYmargin-left:

0px;

margin-top:

margin-right:

margin-bottom:

backgroundcolor:

#ff0000;

background-repeat:

repeat-x;

根据样式代码的位置，分为三种：

行内样式（内置样式单）：

标记的style属性，适用于单个元素的内容内嵌样式（嵌入式样式单）：

style样式块，适用于整个文档的主体外部样式（外部式样式单）：

独立样式文件，可以应用在多个文档的主体中,3.3HTML中使用CSS的方法,注意：

在使用时，内置样式表优先于文档样式表，而文档样式表又优先于外部样式表。

在出现冲突的情况下，低层次的样式表具有使用上的优先权。

3.3.1行内样式Style属性的使用,单价：

￥3999剩余时间：

成交结束新旧程度：

全新所在地：

北京宝贝数量：

5件浏览量：

220次另送价值50元的充电器套装！

（一个充电器，两节充电电池）,如果希望某段文字和其他段落的文字显示风格不一样，可采用“行内样式”。

行内样式使用标记的style属性定义。

行内样式格式,应用样式的内容,正文,标题1,属性以名:

值对的形式出现，名与值之间以冒号（:

）分隔，各对之间以分号（;

）分隔,内嵌样式divbackground-color:

#CCCCFF;

#0000FF;

spanfont-size:

16px;

#FF0000,3.3.3内嵌样式style样式块,ASP及其应用机械工业出版社未用样式XML及其应用机械工业出版社,行内样式局限于某个标签，若希望本网页内的所有同类标签都采用统一样式，应采用内嵌样式。

内嵌样式一般在标记内嵌入标记。

3.3.2外部样式-独立样式文件,样式文件P.,不管是行内样式还是内嵌样式都只能为一个Html页面服务，若要使样式控制多个HTML文件，则采用外部样式。

外部样式是将样式放在独立的文件中，即样式表文件，通常以css作为类型名。

在使用该样式的HTML中通过标记来链接外部样式表文件,链接外部样式表的步骤,使用LINK（链接）标签，语法：

第一步：

创建样式表文件newstyle.css,第二步：

把样式文件和网页关联,样式文件：

newstyle.cssP.,第三步：

浏览查看各网页,3.2CSS样式选择符（样式选择器）,CSS样式选择符浏览器在解析标记时，会根据标记名或标记中的class属性或id属性到样式表中选择样式，因此样式表中的这些标记或属性名又称为CSS的样式选择符。

样式选择符的种类标记选择符，如以前使用的div、span、p等组选择符CLASS类选择符ID选择符,组选择符,将样式规则同时应用于多个标记，则可以将多个选择符用逗号（,）隔开再定义样式规则。

如：

文件3-4.cssspan,p,h1color:

red;

font-size:

16px,文件3-3.html组选择器H1标题H2标题P段落span标记,.myinputborder:

1pxsolid;

border-color:

#D4BFFF;

#2A00FF用户名密码,应用类选择符：

class类名,类选择器的定义格式为：

类名样式规则;

类选择符,标记选择符为特定标记定义样式，而class选择符可以独立于某个具体标记定义，标记在选择样式时可以使用class属性。

在定义class选择符时，选择符名前要加圆点（）标识。

#titlecolor:

blue;

24px;

span#errcolor:

ID选择符测试P标记中err选择符不起作用SPAN标记中err选择符起作用,应用ID选择器：

idID名,ID选择符,与class选择符应用范围类似，在定义是ID选择符用井号（#）标识。

可通过联合定义来使用，即在ID选择符的前面附加标记符，如：

span#errcolor:

，表示有被span使用时选择符err才有效。

ID选择符一般定义,ID选择符联合定义,CSS样式定义,ID样式符与类样式符对照：

类选择符可以重复使用，且可以用在任意元素上，使用任意次。

HTML内id属性是唯一的，拥有id的元素才会应用该样式。

ID选择符的优先权高于类选择符。

伪类定义超链接样式A:

hover鼠标悬停时的样式属性A:

visited链接地址已被访问过时的样式属性A:

link对象在未被访问前的样式属性A:

active在鼠标点击与释放之间时的样式属性伪对象选择符:

first-letter,补充：

特殊的选择器伪类与伪对象,伪类示例,A/*设置超链接不带下划线*/color:

text-decoration:

none;

/*文本修饰：

无*/A:

hover/*鼠标在超链接上方停留时，带下划线*/color:

underline;

下划线*/HEAD俺是超链接，移过来我就显示下划线,特殊的伪类：

A代表超链接，hover代表鼠标悬停,CSS属性是控制网页样式的基本元素，CSS涉及的属性极其庞大，包括颜色、尺寸、位置等，可以使用Dreamweaver中的CSS规则定义创建CSS样式规则。

CSS属性具有继承、层叠等特性。

CSS属性,表41样式表可以设置的属性,CSS属性,1属性单位长度单位：

cm/mm/em（当前字体中m宽度）/ex（当前字体中x宽度）/In/Pt/px,CSS属性,1属性单位百分比单位：

一个百分比值中有可选的正号+或负号-，后跟一个数字，最后为百分号%，例如pline-height:

200%表示该段文字的调试为标准行高的2倍。

CSS属性,1属性单位颜色单位：

颜色名称：

十六进制#RRGGBB、十分制GRB（x,y,z）、百分比RGB（100%,0%,0%）Red/Yellow、#996633、RBG（255,0,0）、RGB（100%,0%,0%）,CSS属性,2字体属性font-family属性，设置html元素的字体列表，可设置多个值，浏览器由前向后低效选择字体。

h3font-family:

timespfont-family:

courierp.sansseriffont-family:

sans-serif,CSS属性,2字体属性font-style属性，用来设置指定元素的显示字形样式，属性值有normal（普通、默认值）/italic（斜体）/oblique（倾斜）。

h1font-style:

italich2font-style:

normalpfont-style:

oblique,CSS属性,2字体属性font-size属性，用来控制字体显示的大小。

h1font-size:

150%h2font-size:

130%pfont-size:

100%.size_afont-size:

30px.size_bfont-size:

30pt,CSS属性,2字体属性font-variant属性，字型异体，具有nomal与small-caps两种取值，在正常与小型大写字母之间切换。

p.normalfont-variant:

normalp.smallfont-variant:

small-caps,CSS属性,2字体属性font-weight属性，设置字体的粗细，属性取值可为normal、bold、bolder、light、lighter、100、200、900，100至900依次从最细渐变到最粗。

p.normalfont-weight:

normalp.thickfont-weight:

boldp.thickerfont-weight:

900,CSS属性,2字体属性font属性，字体设置的一种简略写法，设置时可以省略某些属性，应按以下顺序出现：

font-wight、font-variant、font-style、font-size、font-family。

pfont:

italicsmall-caps90022pxarial,CSS属性,3文本属性字间距letter-spacing属性，属性值可为具体长度，且可以为负值。

h1letter-spacing:

-3pxh4letter-spacing:

0.5cm,CSS属性,3文本属性词间距word-spacing属性，设置文本中单词（字）间的距离。

p.normalword-spacing:

normalp.lengthword-spacing:

1.5cm,CSS属性,3文本属性行间距line-height属性，控制标记符中文本行高。

其取值可以是数字、长度或百分比，normal为默认值。

如取值为数字，则表示行高为当前字体调试的倍数。

例如：

下例可表示20pt的行高,divfont-size:

10pt,line-height:

2,CSS属性,3文本属性文本修饰text-decoration，文本修饰属性，包括none、underline、overline、line-through、blink等值。

P171,h1text-decoration:

overlineh2text-decoration:

line-throughh3text-decoration:

underlineatext-decoration:

none,CSS属性,3文本属性text-align/vertical-align，水平对齐/垂直对齐。

text-align取值为left、right、center、justify，默认值为left，verticle-align的取值为baseline、sub、super、top、text-top、middle、bottom、text-bottom、，baseline为默认值。

CSS属性,3文本属性文字转换text-transform属性，用来