网络应用程序设计Web应用程序设计

1、CSS网络应用程序设计Web应用程序设计CSS层叠样式表CSS样式表用于设置HTML和XML的显示样式，便于实现内容与样式的分离CSS样式有5种定义与引用方式 内联式：在HTML标记中用style属性定义 内嵌式：在head元素中用style元素定义 链接式：在head元素中用link标记链接CSS文件 导入式：在样式定义中用import指令导入CSS文件（必须在最前） 浏览器默认层叠 后定义的覆盖先定义的 作用范围小的优先 内层未定义的继承外层定义的语法格式： 选择符属性:属性值;属性:属性值; /*注释*/例：样式定义与引用 浏览器标题 /*导入外部样式表文件*/ import url(b

2、.css); p color:#FF0000; font-size:28px; style属性 样式表 选择器 标记选择器：标记名（所有标记：*） ID选择器：#ID属性值 类选择器：.class属性值 属性选择器：属性 关系选择器：选择器（连接符）选择器 伪类选择器：标记名:命令 伪对象选择器：标记名:命令，标记名:命令选择器选择器选择器名称名称说明说明*所有标记选择器所有标记或元素T标记选择器标记名为T的所有标记或元素#valID选择器ID属性值为val的所有标记或元素.valClass选择器Class属性值为val的所有标记或元素att属性选择器属性符合att描述的所有标记或元素EoF关

3、系选择器选择器E和F符合o描述的关系E:F伪类选择器选择器E的预定义功能FE:F伪对象选择器选择器E的预定义功能F关系选择器选择器选择器名称名称说明说明E,F并选择器E或FEF交选择器E且FE F 子孙选择器所有被E包含的FEF子选择器所有作为E直接包含的FE+F相邻选择器紧贴在E之后的FEF兄弟选择器E之后的所有兄弟F属性选择器选择器选择器说明说明att选择具有att属性的标记或元素att=val选择具有att属性且属性值等于val的标记或元素att=val选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的标记或元素att=val 选择具有att属性且属性值为以val开

4、头的字符串的标记或元素att$=val 选择具有att属性且属性值为以val结尾的字符串的标记或元素att*=val 选择具有att属性且属性值为包含val的字符串的标记或元素att|=val选择具有att属性且属性值为以val开头并用连接符-分隔的字符串的标记或元素伪类选择器（1/2）选择符说明E:link 设置超链接a在未被访问前的样式。E:visited设置超链接a在其链接地址已被访问过时的样式。E:hover设置元素在其鼠标悬停时的样式。E:active设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。E:focus设置元素在成为输入焦点（该元素的onfocus事件发生）

5、时的样式。E:lang()匹配使用特殊语言的E元素。E:not()匹配不含有s选择符的元素E。E:root匹配E元素在文档的根元素。E:first-child 匹配父元素的第一个子元素E。E:last-child匹配父元素的最后一个子元素E。E:only-child匹配父元素仅有的一个子元素E。E:nth-child(n)匹配父元素的第n个子元素E。E:nth-last-child(n)匹配父元素的倒数第n个子元素E。伪类选择器（2/2）选择符说明E:first-of-type匹配同类型中的第一个同级兄弟元素E。E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。E:only-

6、of-type匹配同类型中的唯一的一个同级兄弟元素E。E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E。E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。E:empty匹配没有任何子元素（包括text节点）的元素E。E:checked匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)E:enabled匹配用户界面上处于可用状态的元素E。E:disabled匹配用户界面上处于禁用状态的元素E。E:target匹配相关URL指向的E元素。page:first设置页面容器第一页使用的样式。仅用于page

7、规则page:left设置页面容器位于装订线左边的所有页面使用的样式。仅用于page规则page:right设置页面容器位于装订线右边的所有页面使用的样式。仅用于page规则伪对象选择器选择符简介E:first-letter/E:first-letter 设置对象内的第一个字符的样式。E:first-line/E:first-line设置对象内的第一行的样式。E:before/E:before设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用E:after/E:after设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用E:selec

8、tion设置对象被选择时的颜色。例：选择器 pcolor:#FF0000;/*标记*/ #acolor:#00FF00;/*id*/ .acolor:#0000FF;/*class*/ acolor:#000000;/*属性*/ pabcolor:#007777;/*多属性*/ p aacolor:#00FFFF;/*嵌套*/ paacolor:#ffff00;/*直接嵌套*/ p bb,cccolor:#888888;/*多项*/ 标记 id class 属性 多属性 直接嵌套嵌套 多项 多项 chromeIE9例：关系选择器 a,bcolor:#f00;/*并选择器,#f00等同于#ff0

9、000*/ abcolor:#ff0;/*交选择器*/ p Ecolor:#0f0;/*子孙选择器*/ pEcolor:#0ff;/*子选择器*/ F+pcolor:#00f;/*相邻选择器*/ Gpcolor:#f0f;/*兄弟选择器*/ 并选择 并选择 交选择 子选择子孙选择 相邻选择非相邻 兄弟选择兄弟选择 chromeIE9例：属性选择器 acolor:#000000;/*属性*/ abcolor:#007777;/*多属性*/ pa=acolor:#aa0000;/*属性值，注意无空格，否则变嵌套*/ pa=bccolor:#770000;/*属性值包含单词*/ pa|=abcolo

10、r:#00aa00;/*属性值包含前缀*/ pa=abccolor:#0000aa;/*属性值开头*/ pa$=cdcolor:#000077;/*属性值结尾*/ pa*=bdcolor:#777700;/*属性值包含*/ 属性 多属性 属性值 属性值包含单词 属性值包含单词 属性值包含前缀(后无字符) 属性值包含前缀(后接减号) 属性值开头 属性值结尾 属性值包含 样式属性定位 布局 弹性盒模型 尺寸 外补白内补白边框 背景颜色 字体文本列表表格内容用户界面 多列 转换 过渡 动画 打印媒体查询样式属性-定位定位属性简介position 对象的定位方式（只读）z-index对象的层叠顺序to

11、p对象与其父对象顶部距离right对象与其父对象右边距离bottom对象与其父对象底边距离left对象与其父对象左边距离样式属性-布局布局属性简介display对象是否及如何显示float该属性的值指出了对象是否及如何浮动。请参阅clear属性clear该属性的值指出了不允许有浮动对象的边。请参阅float属性visibility是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间clip对象的可视区域。区域外的部分是透明的overflow 当对象的内容超过其指定高度及宽度时如何管理内容overflow-x 当对象的内容超过其指定宽度时如何管理内容overflow-y

12、 当对象的内容超过其指定高度时如何管理内容样式属性-弹性盒模型弹性盒模型属性简介box-orient弹性盒模型对象的子元素的排列方式。box-pack弹性盒模型对象的子元素的对齐方式。请参阅box-align兄弟属性box-align弹性盒模型对象的子元素的对齐方式。请参阅box-pack兄弟属性box-flex弹性盒模型对象的子元素如何分配其剩余空间。box-flex-group弹性盒模型对象的子元素的所属组。box-ordinal-group 弹性盒模型对象的子元素的显示顺序。box-direction弹性盒模型对象的子元素的排列顺序是否反转。box-lines弹性盒模型对象的子元素是否可

13、以换行显示。样式属性-尺寸尺寸属性简介width对象的宽度min-width对象的最小宽度max-width对象的最大宽度height对象的高度min-height对象的最小高度max-height 对象的最大高度样式属性-外补白外补白属性简介margin 对象四边的外延边距margin-top对象顶边的外延边距margin-right对象右边的外延边距margin-bottom 对象底边的外延边距margin-left对象左边的外延边距样式属性-内补白内补白属性简介padding 对象四边的内部边距padding-top对象顶边的内部边距padding-right对象右边的内部边距paddi

14、ng-bottom对象底边的内部边距padding-left对象左边的内部边距样式属性-边框边框属性简介border 复合属性。设置对象边框的特性border-width对象边框宽度border-style对象边框样式border-color对象边框颜色border-top复合属性。设置对象顶边的特性border-top-width对象顶边宽度border-top-style对象顶边样式border-top-color对象顶边颜色border-right复合属性。设置对象右边的特性border-right-width对象右边宽度border-right-style对象右边样式border-ri

15、ght-color对象右边颜色border-bottom复合属性。设置对象底边的特性border-bottom-width 对象底边宽度属性简介border-bottom-style对象底边样式border-bottom-color对象底边颜色border-left复合属性。置对象左边的特性border-left-width对象左边宽度border-left-style对象左边样式border-left-color对象左边颜色border-image对象的边框使用图像来填充border-radius对象使用圆角边框border-top-left-radius对象左上角圆角边框border-to

16、p-right-radius 对象右上角圆角边框border-bottom-right-radius对象右下角圆角边框border-bottom-left-radius对象左下角圆角边框box-shadow对象阴影box-reflect对象的倒影样式属性-色彩色彩属性简介color对象的颜色。请参阅颜色值opacity对象的不透明度。样式属性值-色彩值色彩值属性简介Color Name 用颜色名称来指定颜色。包括基本颜色关键字、系统颜色、SVG颜色关键字等HEX十六进制记法。语法如：#rrggbb或#rgbRGBrgb记法。语法如：rgb(255,0,0)RGBArgba记法HSLhsl记法H

17、SLAhsla记法transparent全透明16个基本颜色关键字个基本颜色关键字ColorColor NameHEXRGBblack#0000000,0,0silver#C0C0C0192,192,192gray#808080128,128,128white#FFFFFF255,255,255maroon#800000128,0,0red#FF0000255,0,0purple#800080128,0,128fuchsia#FF00FF255,0,255green#0080000,128,0lime#00FF000,255,0olive#808000128,128,0yellow#FFFF0

18、0255,255,0navy#0000800,0,128blue#0000FF0,0,255teal#0080800,128,128aqua#00FFFF0,255,255样式属性-字体字体属性简介font 复合属性。对象中的文本特性font-style对象中的字体样式font-variant 对象中的文本是否为小型的大写字母font-weight 对象中的文本字体的粗细font-size对象中的字体尺寸font-family 用于对象中文本的字体名称序列font-stretch 对象中的文字是否横向拉伸变形样式属性-文本文本属性简介text-indent对象中的文本的缩进text-overf

19、low是否使用一个省略标记（.）标示对象内文本的溢出text-align对象中文本的对齐方式text-transform对象中的文本的大小写text-decoration复合属性。对象中的文本的装饰，如下划线、闪烁等text-decoration-line对象中的文本装饰线条的位置。text-decoration-color对象中的文本装饰线条的颜色。text-decoration-style对象中的文本装饰线条的形状。text-shadow对象中文本的文字是否有阴影及模糊效果text-fill-color对象中的文字填充颜色text-stroke复合属性。对象中的文字的描边属性简介text-

20、stroke-width 对象中的文字的描边厚度text-stroke-color 对象中的文字的描边颜色letter-spacing对象中的文字之间的间隔word-spacing对象中的单词之间插入的空格数。vertical-align对象内容的垂直对其方式word-wrap当当前行超过指定容器的边界时是否断开转行white-space对象内空格的处理方式direction文本流的方向unicode-bidi用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用line-height对象的行高。即字体最底端与字体内部顶端之间的距离tab-size对象中的制表符的长度样

21、式属性-列表列表属性简介list-style 复合属性。设置列表项目相关内容list-style-image作为对象的列表项标记的图像list-style-position作为对象的列表项标记如何根据文本排列list-style-type对象的列表项所使用的预设标记样式属性-表格表格属性简介table-layout 表格的布局算法border-collapse表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开border-spacing当表格边框独立时，行和单元格的边框在横向和纵向上的间距caption-side表格的caption对象是在表格的那一边empty-cells当表格的

22、单元格无内容时，是否显示该单元格的边框样式属性-内容内容属性简介content 用来和:after及:before伪元素一起使用，在对象前或后显示内容counter-increment设定当一个selector发生时计数器增加的值counter-reset将指定selector的计数器复位quotes对象内使用的嵌套标记样式属性-多列多列属性简介outline 复合属性。对象外的线条轮廓outline-width对象外的线条轮廓的宽度outline-style对象外的线条轮廓的样式outline-color对象外的线条轮廓的颜色outline-offset对象外的线条轮廓偏移位置的数值nav-

23、index对象的导航顺序。nav-up对象的导航方向。nav-right对象的导航方向。属性简介nav-down 对象的导航方向。nav-left对象的导航方向。cursor在对象上移动的鼠标指针采用何种系统预定义的光标形状。zoom对象的缩放比例。box-sizing 对象的盒模型组成模式。resize对象的区域是否允许用户缩放，调节元素尺寸大小。ime-mode是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。样式属性-用户界面用户界面属性简介columns 对象的列数和每列的宽度。复合属性column-width 对象每列的宽度column-count 对象的列数column

24、-gap 对象的列与列之间的间隙column-rule 对象的列与列之间的边框。复合属性column-rule-width 对象的列与列之间的边框厚度属性简介column-rule-style 对象的列与列之间的边框样式column-rule-color 对象的列与列之间的边框颜色column-span 对象元素是否横跨所有列column-fill 对象所有列的高度是否统一column-break-before 对象之前是否断行column-break-after 对象之前是否断行column-break-inside 对象内部是否断行样式属性-2D变换变换属性简介transform 对象的变

25、换transform-origin 对象中的变换所参照的原点样式属性-过渡过渡属性简介transition 复合属性。对象变换时的过渡效果transition-property对象中的参与过渡的属性transition-duration对象过渡的持续时间transition-timing-function对象中过渡的类型transition-delay对象延迟过渡的时间样式属性-动画动画属性简介animation 复合属性。置对象所应用的动画特效animation-name对象所应用的动画名称animation-duration对象动画的持续时间animation-timing-functio

26、n对象动画的过渡类型animation-delay对象动画延迟的时间animation-iteration-count对象动画的循环次数animation-direction对象动画在循环中是否反向运动animation-play-state对象动画的状态animation-fill-mode对象动画时间之外的状态样式属性-打印打印属性简介page 显示对象容器时使用的页面类型page-break-before 对象之前出现的页分割符page-break-after对象之后出现的页分割符page-break-inside对象容器内部出现的页分割符样式属性-媒体特性媒体特性属性简介width定义

27、输出设备中的页面可见区域宽度height定义输出设备中的页面可见区域高度device-width定义输出设备的屏幕可见宽度device-height定义输出设备的屏幕可见高度orientation定义height是否大于或等于width。值portrait代表是，landscape代表否aspect-ratio定义width与height的比率device-aspect-ratio定义device-width与device-height的比率。如常见的显示器比率：4/3, 16/9, 16/10属性简介color定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0color-inde

28、x定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0monochrome定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0resolution定义设备的分辨率。如：96dpi, 300dpi, 118dpcmscan定义电视类设备的扫描工序grid用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否CSS应用实例（需Chrome）h1font-size:16px;poverflow:hidden;height:1px;margin:302px 0 0;background:#ddd;divwidth:100px;hei

29、ght:100px;padding:10px;border-radius:61px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);

30、background:linear-gradient(top,#fff,#F6D66E);-moz-transform:translate(280px,300px);-webkit-transform:translate(280px,300px);-o-transform:translate(280px,300px);-ms-transform:translate(280px,300px);transform:translate(280px,300px);-moz-animation:animations 6s linear;-webkit-animation:animations 6s li

31、near;-o-animation:animations 1.5s linear-ms-animation:animations 1.5s linear;animation:animations 1.5s linear;div:hover-moz-animation-play-state:paused;-webkit-animation-play-state:paused;-o-animation-play-state:paused;-ms-animation-play-state:paused;animation-play-state:paused;-webkit-keyframes ani

32、mations0%-webkit-transform:translate(0,0);10%-webkit-transform:translate(0,300px);20%-webkit-transform:translate(60px,60px);30%-webkit-transform:translate(60px,300px);40%-webkit-transform:translate(120px,120px);50%-webkit-transform:translate(120px,300px);60%-webkit-transform:translate(180px,180px);7

33、0%-webkit-transform:translate(180px,300px);80%-webkit-transform:translate(240px,240px);90%-webkit-transform:translate(240px,300px);100%-webkit-transform:translate(280px,300px);-moz-keyframes animations0%-moz-transform:translate(0,0);10%-moz-transform:translate(0,300px);20%-moz-transform:translate(60

34、px,60px);30%-moz-transform:translate(60px,300px);40%-moz-transform:translate(120px,120px);50%-moz-transform:translate(120px,300px);60%-moz-transform:translate(180px,180px);70%-moz-transform:translate(180px,300px);80%-moz-transform:translate(240px,240px);90%-moz-transform:translate(240px,300px);100%-

35、moz-transform:translate(280px,300px);-o-keyframes animations0%-o-transform:translate(0,0);10%-o-transform:translate(0,300px);20%-o-transform:translate(60px,60px);30%-o-transform:translate(60px,300px);40%-o-transform:translate(120px,120px);50%-o-transform:translate(120px,300px);60%-o-transform:transl

36、ate(180px,180px);70%-o-transform:translate(180px,300px);80%-o-transform:translate(240px,240px);90%-o-transform:translate(240px,300px);100%-o-transform:translate(280px,300px);-ms-keyframes animations0%-ms-transform:translate(0,0);10%-ms-transform:translate(0,300px);20%-ms-transform:translate(60px,60px);30%-ms-transform:translate(60px,300px);40%-ms-transform:translate(120px,120px);50%-ms-transform:translate(120px,300px);60%-ms-transform:translate(180px,180px);70%-ms-transform:t