PHP学习总结.doc

第14 章CSS 文字与文本1.CSS 中长度与颜色2.CSS 中的文字属性3.CSS 中的文本属性14.1 CSS 中长度与颜色长度单位说明in 英寸cm 公分mm 公里cm 以目前字体高度为单位ex 以小写字母高度为单位（大部分不支持）pt 1pt/72英寸pc 1pc/12ptpx 像素（推荐使用）颜色单位： 说明十六进制如：color:#ff0000颜色名称如：color:red三原色单位如：rgb(255,0,0)一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝(b)】混合而成。每个值域在0255之间14.2 CSS 中的文字属性属性名称属性值说明font-style normal 正常显示italic 斜体font-variant normal 正常显示small-caps 将英文大小写字母写调为同宽font-weight normal 正常显示bold 粗体font-size 像素字体大小百分比字体大小font-family 字体名称设置字体名称font属性简化的使用方法：font:是否斜体是否同宽是否粗体大小字体名称例如:font:italic bold 200 隶书；14.3 CSS中的文本属性属性名称属性值说明color 十六进制颜色英文名称颜色三原色单位颜色letter-spacing normal 正常显示长度文本间隔word-spacing normal 正常显示数字单词间距white-space normal 文本自动处理换行pre 换行和空白受保护nowrap 强制在同一行显示text-align left 文字靠左right 文字靠右center 文字靠中text-decoration none 正常显示underline 加上下划线overline 加顶线line-through 加删除线text-indent 长度首行缩进百分比同上line-height 像素行高数字/百分比行高主讲：李炎恢第3页共3页PHP100 视频教程text-transform none 正常显示可以包含大，小字符capitalize 字符串第一个字符大写uppercase 设置大写字符lowercase 设置小写字符vertical-align sub 设置文字为下标。super 设置文字为上标。top 元件往上端靠齐。middle 设置文字是在中线位置。bottom 元件往下端靠齐。第15 章CSS 背景与列表1.CSS 中背景的使用2.CSS 中列表的使用15.1 CSS 中背景的使用属性名称属性值说明background-attachment scroll 设置背景图像会随视窗滚动条的移动而移动。fixed 设置背景图像不会随视窗滚动条的移动而移动。background-color 十六进制background-color:#ff0000;英文名称background-color:red;三原色background-color:rgb(255,0,0)transparent background-color:transparent;透明background-image URL background-image:url(bg.jpg)背景图片none 不设置背景图片background-position top left 设置背景图案出现在上左方。top center 设置背景图案出现在上方中间。top right 设置背景图案出现在上右方。center left 设置背景图案出现在中间左方。center center 设置背景图案出现在IE中间。center right 设置背景图案出现中间右方。bottom left 设置背景图案出现在下左方。bottom 设置背景图案出现在正下方。bottom right 设置背景图案出现在下右方。background-repeat repeat 将背景图案填满整个背景。repeat-x 将背景图案在水平方向添满。repeat-y 将背景图案在垂直方向添满。no-repeat 图案只出现一次。背景图案简化方案：background:颜色背景图片repeat attachment position15.2 CSS中列表的使用属性名称属性值说明list-style-type none 无符号disc 实体的小圆点。circle 空心的小圆点。square 实心的小方块。decimal 1,2,3.lower-roman i,ii,iii.upper-roman I,II,III.lower-alpha a,b,c,d,e.upper-alpha A,B,C,D,E.list-style-position inside 清单项目较往右移。outside 清单项目正常显示。list-style-image URL list-style-image:url(lmk.gif)none 不会显示任何图象清单的简化设置：list-style:circle inside url(bullet.gif)第16 章CSS 边框与边界1.CSS 中边框的使用2.CSS 中边界的使用16.1 CSS 中边框的使用属性名称属性值说明border-color 十六进制可依序设置上，右，下，左线颜色英文名称border-color:red(四边均为红色)三原色border-color:red green(上下为红色，左右为绿色)border-color:red green blue(上为红色、左右为绿色、下为蓝色)border-color:red green blue yellow(上右下左分别为红绿蓝黄)border-style none 不显示边线dotted 点线dashed 虚线solid 实线double 双线border-width 长度border-width:0.2cm 0.3cm 0.4cm 0.5cm;border-width:1 2 3 4;简化方案：border:形态长度颜色例如border:1px solid black;16.2 CSS 中边界的使用padding 属性介绍属性名称属性值说明padding-bottom 长度/百分比元件下端边线的空隙padding-left 长度/百分比元件左端边线的空隙主讲：李炎恢第2页共3页PHP100 视频教程padding-right 长度/百分比元件右端边线的空隙padding-top 长度/百分比元件上端边线的空隙简易写法：padding:10pxpadding:2px 4pxpadding:2px 6px 10pxpadding:1px 2px 3px 4pxmargin 系列属性介绍属性名称属性值说明margin-bottom auto 自动调整空隙长度/百分比设置下端空隙margin-left auto 自动调整空隙长度/百分比设置左端空隙margin-right auto 自动调整空隙长度/百分比设置右端空隙margin-top auto 自动调整空隙长度/百分比设置上端空隙简化方案：margin:2px 4pxmargin:2px 6px 10pxmargin:1px 2px 3px 4px常用网页顶格设置：margin:0;第17 章CSS 区块、浮动、定位、溢出、滚动条1.CSS 中区块的使用2.CSS 中浮动的使用3.CSS 中定位的使用4.CSS 中溢出的使用5.CSS 中滚动条的使用17.1 CSS 中区块的使用属性名称属性值说明width 像素/百分比区块的宽度autoheight 像素/百分比区块的高度automin-height 像素像素/百分比区块最小高度automax-height 像素像素/百分比区块最大高度automin-width 像素像素/百分比区块最小宽度automax-width 像素像素/百分比区块最大宽度auto17.2 CSS 中浮动的使用属性名称属性值说明float none 正常显示left 左浮动right 右浮动clear none 允许两边浮动left 不允许左边浮动主讲：李炎恢第2页共3页PHP100 视频教程right 不允许右边浮动both 不允许两边浮动17.3 CSS 中定位的使用属性名称属性值说明position relative 设置区块基准点为左上角absolute 设置网页的为基准点左上角static 无设置left auto 以基准点定位在左边像素/百分比定位在左边top auto 以基准点定位在上边像素/百分比定位在上边right auto 以基准点定位在右边像素/百分比定位在右边bottom auto 以基准点定位在下边像素/百分比定位在下边z-index auto 自动调整高度数字数字越大越往上层17.4 CSS 中溢出的使用属性名称属性值说明overflow visible 不剪切内容也不添加滚动条auto 在必需时对象内容才会被裁切或显示滚动条hidden 不显示超过对象尺寸的内容scroll 总是显示滚动条overflow-x (同上)overflow-y (同上)17.5 CSS 中滚动条的使用属性名称属性值说明scrollbar-3dlight-color 颜色/十六进制滚动条亮边框scrollbar-highlight-color 颜色/十六进制滚动条3D 界面亮边scrollbar-face-color 颜色/十六进制滚动条3D 表面scrollbar-arrow-color 颜色/十六进制滚动条方向箭头scrollbar-shadow-color 颜色/十六进制滚动条3D 暗边scrollbar-darkshadow-color 颜色/十六进制滚动条暗边框scrollbar-base-color 颜色/十六进制滚动条基准颜色scrollbar-track-color 颜色/十六进制滚动条的拖动区域主讲：李炎恢第3页共3页PHP100 视频教程第18 章CSS 链接、光标、DHTML、缩放1.CSS 中链接的使用2.CSS 中光标的使用3.CSS 中DHTML 的使用4.CSS 中缩放的使用18.1 CSS 中链接的使用超链接伪类属性a:link 表示该超链接文字尚未被点选a:visited 表示该超链接文字已被点选过a:active 表示该超链接文字正被点选,但未被放开a:hover 表示当鼠标停留在文字上18.2 CSS 中光标的使用属性名称属性值说明cursor auto 光标是手指crosshair 光标是十子形default 光标是箭头hand/pointer 光标是手形move 光标是移动的符号text 输入文字的符号wait 漏斗help 帮助18.2 CSS 中DHTML 的使用属性名称属性值说明behavior url DHTML 文件主讲：李炎恢第2页共2页PHP100 视频教程18.3 CSS 中缩放的使用属性名称属性值说明zoom normal 使用对象的实际尺寸百分数/浮点实数放大缩小主讲：李炎恢第1页共3页PHP100 视频教程第19 章CSS 滤镜1.Filter 属性介绍2.Alpha 滤镜的使用3.Blur 滤镜的使用4.Filph、Filpv 滤镜5.DropShadow 滤镜6.Glow 滤镜7.Gray ,Invert,Xray 滤镜8.Shadow 滤镜19.1 Filter 属性介绍设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象，如块对象。内联要素要使用该属性，必须先设定对象的height 或width 属性，或者设定position 属性为absolute，或者设定display 属性为block。请参阅对象的hasLayout 属性。若要在img 对象上应用shadow 滤镜，可以在该对象img 对象的父容器上应用。滤镜的机制是可扩展的。通过利用MicrosoftDirectXMedia SDK，你可以使用C+开发和使用第三方滤镜。该属性在MAC 平台上不可用。对应的脚本特性为filter。19.2 Alpha 滤镜的使用属性值说明opacity 0-100 对象的亮度style 1,2,3 滤镜的样式19.2 Blur 滤镜的使用属性值说明add true/false 是否印象派direction 0-360 角度strength 数字模糊度19.3 Fliph、Flipv 滤镜属性值说明主讲：李炎恢第2页共3页PHP100 视频教程无19.4 DropShadow 滤镜属性值说明color 颜色阴影颜色offx 数字x 坐标偏移offy 数字y 坐标偏移positive true/false 是否建立透明19.5 Glow 滤镜属性值说明color 颜色发光颜色strength 数字发光厚度19.6 Gray ,Invert,Xray 滤镜属性值说明无19.7 Shadow 滤镜属性值说明color 颜色阴影颜色direction 0-360 阴影方向主讲：李炎恢第1页共7页PHP100 视频教程第20 章CSS 定义选择器1. ID 与类2. 层叠3. 分组4. 继承5. 上下文选择器6. 子类选择器7. 其他选择器8. 结构与注释20.1 ID与类选择器是用于控制页面设计的样式.即ID 选择器何类选择器.一直以来,许多开发人员经常将ID 与类混淆,或者不能正确的使用这两种选择器,或者简单的认为是一个代替另一个.这种认知是及其错误的.(1).应用ID每个ID 在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID 只用于页面的唯一元素,如页眉,主导航条,布局区块等.示例:This paragraph has red text.相应的CSS 代码:#hightlightcolor:#FFFFFF;(2).将ID与选择器结合/*适合所有h2 标题*/h2color:# 333;font-size:16px;/*只适合title 的h2 标题*/h2#title color:# eee;相应的XHTML 代码:Title Of My ArticleTitle Of My Article(3).ID的使用场合对于每个ID,每个页面只能有一个元素使用该样式,因此ID 应该为每个页面唯一存在并仅使用一次的元素不保留,(4).避免使用ID的场合当一个以上的地方需要使用同一CSS 规则时,不应该使用ID.(5).应用类类可以无限次的使用,因此它是应用CSS 的非常灵活的方法.his paragraph has red text.相关CSS 代码:.hightlight color:FFFFFF;(6).结合多个类和ID范例:BeerSpirtisColaLemonade相应的CSS 代码:ul#drinks color:FF6600;.mix Color:# 999999;.hot Color:# 333333;(7).利用类改写基本样式:pColor:#ff6600;.bleached Color:#ccc;主讲：李炎恢第3页共7页PHP100 视频教程相应的XHTML 代码:This paragraph has red text.This paragraph has red text.(8).直接将类链接到元素上p.bleached color:red;相应的XHTML 代码:This paragraph has red text.(9).避免,适合对于class,如果多次重复使用或者使用子类选择器，那么就选择class，如果是定义唯一性的标记，比如布局，那么用id。20.2 层叠(1).外部链接实现层叠(2).导入样式实现层叠import url(“one.css”)import url(“two.css”)import url(“three.css”)注意点:必须牢记一个规则,越晚给的规则越重要.20.3 分组h1Font-family:隶书,宋体,楷体;Line-height: 140%;Color:# 333;h2Font-family:隶书,宋体,楷体;Line-height: 140%;Color:# 333;h3Font-family:隶书,宋体,楷体;Line-height: 140%;Color:# 333;主讲：李炎恢第4页共7页PHP100 视频教程/*分组后*/h1,h2.h3Font-family:隶书,宋体,楷体;Line-height: 140%;Color:# 333;/*分组例外*/h1Font-style:italic;20.4 继承h1 Color:# 333;This is the greatest heading in the world从BODY 继承Body Margin:10px;Font-family:隶书;Background:#000;Color:#fff;20.5 上下文选择器h1Color: #ccc;i Color:# 000;/*使用上下文选择器*/h1 I Color:# 000;20.6 子类选择器.box color:red;.box1 主讲：李炎恢第5页共7页PHP100 视频教程font-weight:bold;.box2 font-style:italic;BoxBox1Box220.7 其他选择器(1).类型选择器pcolor:black;atext-decoration:underline;h1font-weight:bold;(2).后代选择器h2 icolor:red;li atext-decoration:none;#main h1Color:red;(3).伪类a:linkcolor:blue;a:visitedcolor:green;a:hover,a:activecolor:red;input:focusbackground-color:yellow;(4).通用选择器*Padding:0;Margin:0;(5).高级选择器高级选择器,目前支持还不太完善,所以,对于站点功能很重要的任何元素上,应该避免使用这些高级选择器.1.子选择器和相邻同胞选择器子选择器#nav li background:url(bg.gif) no-repeat left top;主讲：李炎恢第6页共7页PHP100 视频教程HomeServerDevelopmentConsultancyContact Us相邻同胞选择器:h1+pfont-weight:bold;Main HeadingFirst ParagraphSecond Paragraph2.属性选择器CSSstrongtitle border-bottom: 1px dotted #999;strongtitle:hover cursor:help;background:#ccc20.8 代码注释与结构/*body styles*/body Font-size:67.5%;1.添加结构性注释/*-Version: 1.1Author: andy buddEmail:Website:http:-*/2.自我提示/*Use the star selector hack to give IE a different font size.co.ph*/布局结构：使用有意义的标记。表格成了一种布局工具而不是显示数据的方式,人们使用块引用(blockquote)来添加空白而不是表示引用.Web 很快就失去了意义,成了字体和表格标签的大杂烩.而现在我们可以使用DIV+CSS 来控制布局.主讲：李炎恢第1页共4页PHP100 视频教程第22 章CSS 构造颜色、背景与图像1. 设定颜色2. 背景使用3. 图像使用1.设定颜色红色的几种合法定义;#f00;#ff0000;Red;Rgb(255,0,0);Rgb(100%,0%,0%);2.十六进制三元组第一个字节:红色的值;第二个字节:绿色的值;第三个字节:蓝色的值;简化写法:#cccccc 可写成#ccc, #ff6633 可以写成#f633.使用17 种具名颜色黑色(black) 000000藏蓝色(navy) 000080绿色(green) 008000海蓝色(teal) 008080银色(silver) 0c0c0c蓝色(blue) 0000ff酸橙色(lime) 00ff00浅绿色(aqua) 00ffff绛紫色(maroon) 800000紫色(purple) 800080橄榄绿(olive) 808000灰色(gray) 808080主讲：李炎恢第2页共4页PHP100 视频教程红色(red) ff0000紫红色(fuchsia) ff00ff黄色(yellow) ffff00橙色(orange) ffa500白色(white) ffffff4.使用span 更好的控制文本中局部区域的文本文本内容5.使用display 属性提供区块转换inline,block,none6.背景图象渐变的制作Body Background: #ccc url(bg.gif) rpeat-x;7.给一个区块加上一个背景#branding Width: 700px;Height: 200px;Background: url(branding.gif) no-repeat;8.给标题加上一个小图标H1 Padding-left: 20px;Background: url (bullet.gif) no-repeat left center;如果希望使用百分比而不使用关键字,则0 50%这样就实现了垂直居中9.圆顶角HeadlineContent.box Width: 418px;Background: #ccc url(bottom.gif) no-repeat left bottom;.box h2 主讲：李炎恢第3页共4页PHP100 视频教程Background:url(top.gif) no-repeat left top;如果不希望碰到边界,加上填充.box h2 Padding:10px 20px 0 20px;.box p Padding:0 20px 10px 20px;10.简单的CSS 阴影效果.img-wrapper background: url(images/shadow.gif) no-repeat bottom right;clear: right;float: left;position: relative;margin: 10px 0 0 10px;.img-wrapper img display: block; /*这个属性到列表再进行解释*/margin: -5px 5px 5px -5px;position: relative;第23 章CSS 构造列表与导航1. 列表图片2. 背景列表3. 翻转列表4. 水平导航主讲教师：李炎恢官方网站：1. 内边距与外边距Ul Margin: 0;Padding: 0;2. 使用图片作为列表图标Ul Margin: 0;Padding:0;Width: 200px;List-style-image:url(images/list.gif);Line-height: 150%;3. 以背景图片作为项目列表图标Ul List-style-type:none;Li Background: url(images/list.gif) no-repeat left center;Padding: 0 0 0 25px;4. 内联列表Ul List-style-type:disc;主讲：李炎恢第2页共4页PHP100 视频教程Li Display: inline;这里的display 属性是块级值的设置,定义是否要成为块.Inline 是是内联,block 是区块.5. 背景图片和内联列表Ul List-style-type: none;Li Display:inline;Background url(images/list.gif) no-repeat left center;Margin: 0 0 0 10px;Padding: 0 0 0 15px;6.垂直导航栏Drubjs MenuBeerSpiritsColaLemonadeTeaCoffeeUl List-style-type:none;Margin:5px;Padding:2pxWidth: 160px;Font-size: 12px;Li Background: #ddd;Margin: 0;Padding: 2px 10px;Border-left: 1px solid #fff;主讲：李炎恢第3页共4页PHP100 视频教程Border-top: 1px solid #fff;Border-right: 1px solid #666;Border-bottom: 1px solid #aaa;7.创建垂直翻转的列表ul margin: 0;padding: 0;list-style-type: none;Ul aDisplay: block;Width: 200px;Height: 40px; /*39px*/Line-height: 40px; /*39px*/Color:# 000;Text-decoration: none;Background: #94b8E9 url(images/pixy-rollover.gif) no-repeat left center; /*left bottom*/Text-indent: 50px;a:hover background-position: right bottom;8.创建水平导航条ul Margin: 0;Padding: 0 2em;List-style: none;line-height: 2.1em;Width: 720px;Background: #faa819 url(images/mainNavBg.gif) repeat-x;ul li float: left;ul a color:#fff;padding: 0 10px;主讲：李炎恢第4页共4页PHP100 视频教程background: url(images/divider.gif) repeat-y left top;text-decoration: none;第24 章CSS 构造超链接1. 超链接边框2. 派生超链接3. 属性选择器超链接4. 动态超链接5. 图像翻转超链接6. CSS 工具提示1.给链接加上边框A:link Color: #f00;Text-decoration: none;Border-bottom: 1px dashed #333;Line-height: 150%;2.在文章段落中加上超级链接A:link Color: #f00;Text-decoration: none;Border: 1px solid #333;Background: #ccc;Padding: 2px;Line-height: 150%;3. 用背景图象添加记号A:link Color:#f00;Padding: 0 15px 0 0;Background:url(images/arrow.gif) no-repeat right center;主讲：李炎恢第2页共5页PHP100 视频教程A:visited Color:# 999;Padding: 0 15px 0 0;Background:url(images/checkmark.gif) no-repeat right center;4.利用派生来影响链接P a:link, p a:visited, p a:hover, p a:active Color:#f00;Ul a Color:# 000;5.利用图片作为下划线A:link, a:visited Color: #666;Text-decoration:none;Background: url(images/underline1.gif) repeat-x left bottom;A:hover, a:active Background:url(images/underline1-hover.gif);6.突出显示不同类型的链接.external Background:url(images/externalLink.gif) no-repeat right top;Padding-right: 10px;7.使用属性选择器来做链接ahref=http: background:url(images/externalLink.gif) no-repeat right top;padding-right: 10px;ahref=mailto: background:url(images/email.png) no-repeat right top;padding-right: 13px;8.创建按钮和翻转a Display: block;主讲：李炎恢第3页共5页PHP100 视频教程Width: 6em;Padding: 02.em;Line-height: 1.4;Background-color: #94b8e9;Border: 1px solid black;Color: #000;Text-decoration: none;Text-align: center;a:hover background-color: #369;color:#fff;9.具有图象的翻转a Display: block;Width: 200px;Height: 40px;Line-height: 40px;Background-color: #94b8e9;Color: #000;Text-decoration: none;Text-indent:50px;Background: #94b8ea url(images/button.gif) no-repeat left top;A:hover Background: #369 url(images/button_over.gif) no-repeat left top;Color: #fff;9.以访问链接样式Andy Budds BlogographyStuff and NonsenseHicks DesignClagnutHTML DogAdactioAll In The HeadMark BoultonIan Lloyd主讲：李炎恢第4页共5页PHP100 视频教程ul list-style:none;li margin: 5px 0;li a display: block;width: 300px;height: 30px;line-height: 30px;color: #000;text-decoration: none;background: #94B8E9 url(imag