CSS网页设计制作(配合李炎恢_css_视频教程)

CSS网页设计制作____张国策，机械电子工程专业第页共34页-1-第12章XML与XHTML12.1什么是XMLXML中文翻译为可扩展标记语言,顾名思义,它比HTML的优势:1.延伸性2.简单易懂12.2XML的基本格式?xmlversion=1.0encoding=gb2312?我的家人爸爸姓名张三/姓名年龄58/年龄男//爸爸妈妈姓名张晓三/姓名年龄57/年龄女//妈妈/我的家人12.3XML的定义文档?xmlversion=1.0encoding=gb2312?!DOCTYPE中华人民共和国[!ELEMENT中华人民共和国公民(公民*)!ELEMENT公民(身份证号,姓名,籍贯)!ELEMENT身份证号(#PCDATA)!ELEMENT姓名(#PCDATA)!ELEMENT籍贯(#PCDATA)]中华人民共和国公民身份证号01085401/身份证号姓名张三/姓名籍贯北京/籍贯/公民公民身份证号01085402/身份证号姓名李四/姓名籍贯上海/籍贯/公民/中华人民共和国12.4HTML4.01的文档定义!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN网页设计制作____张国策，机械电子工程专业第页共34页-2-12.5XHTML1.0的文档定义!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=与XHTML都有三种标准风格：第一种称为过度型(transitional)，它允许使用废弃标记。第二种称为严格型(strict)，他禁止使用任何废弃的标记。第三种是框架型(frameset)，它允许使用废弃的标记和框架。12.6XHTML1.0风格标记的改变1.所有单标记都必须关闭：br/、hr/、option/等2.所有的单属性必须等于自身：checked=checked、readonly=readonly等3.尽可能不使用废弃标记：center、font等第13章CSS入门基础13.1认识CSSCSS的英文全名是CascadingStyleSheets,中文可翻译为串接式排版样式,并且CSS2规范也于1998年02月通过W3C的审核与推荐,所以CSS并不是专为XHTML所设计的,CSS还可以被其他标记语言拿来制作排版样本,如HTML,XML文件都可以应用CSS,来美化网页的设计,大家如果学会CSS,在HTML,XHTML,XML文件中都可以使用.13.2传统HTML设计网页版面的缺点使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML并非完全着眼在网页排版的功能上,而这对XHTML而言更是如此,因为XHTML有意将原先HTML中有关网页版面的标记或属性遗弃不用,如font,center,color,background,bgcolor等等,所以对XHTML文件而言,其排版与显示的功能比HTML文件更弱,所以使用XHTML来设计网页更需要搭配CSS排版样本.13.3CSS的特点HTML排版时的缺点:设置麻烦,修改麻烦,功能严重不足.CSS样式排版的优点:排版属性功能完整,排版文件可以独立存在,可以共用排版文件CSS样式排版的分类:内行排版样式,,内嵌式排版样式,,链接式排版13.4CSS的排版样式行内排版样式:格式:标记名称style=”属性1:属性值1;属性2:属性值2”…/标记名称例:pstyle=”font-size:20pt;color:red;text-align:center”排版样式/p排版专用标记:div与span这两个标签都是用来设置涵盖一个区块为主.区块就是表示一行以上的数据.如果没有一样,则span与/span该数据显示前后都不会跳行.内嵌式排版样本:内嵌式排版中所有的样式定义都必须在style../style之间,而CSS网页设计制作____张国策，机械电子工程专业第页共34页-3-style../style又必须在head../head之间.与其功能,又可以分为三种,1.标记定义型2.class定义型3.id定义型标记定义型格式:headstyletype=”text/css”标记名称{属性1:属性值1;属性2:属性值2;}标记名称{属性1:属性值2;属性2:属性值2;}/style/headbody标记名称…/标记名称/bodyclass定义型格式:headstyletype=”text/css”.定义名称{属性1:属性值1;属性2:属性值2;}.定义名称1,.定义名称2{属性1:属性值1;属性2:属性值2;}/style/headbody标记名称class=”定义名称”…/标记名称/bodyid定义型格式:headstyle#定义名称{属性1:属性值1;属性2:属性值2;}#定义名称1,#定义名称2{属性1:属性值1;属性2:属性值2;}/style/headbody标记名称id=”定义名称”…/标记名称/body“行内”和”内嵌式”排版定义的优先级:CSS规定,范围越小,优先级越高.由小到大排列:1.行内2.class和id定义型3.标记定义行id的优先级高于class级.外部排版样式定义:独立的样式排版:CSS网页设计制作____张国策，机械电子工程专业第页共34页-4-标记名称{属性1:属性值1;属性2:属性值2;}.定义名称{属性1:属性值1;属性2:属性值2;}在head…/head之间使用link格式:headlinkrel=”stylesheet”type=”text/css”href=URL//head在head…/head之间使用import格式：headstyletype=text/[e-mail]/style/head第14章CSS文字与文本14.1CSS中长度与颜色长度单位说明in英寸Cm公分Mm公里cm以目前字体高度为单位ex以小写字母高度为单位（大部分不支持）pt1pt/72英寸pc1pc/12ptpx像素（推荐使用）颜色单位：说明十六进制如：color:#ff0000颜色名称如：color:red三原色单位如：rgb(255,0,0)一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝(b)】混合而成。。每个值域在0－255之间14.2CSS中的文字属性属性名称属性值说明font-stylenormal正常显示Italic斜体font-variantnormal正常显示small-caps将英文小写字母改为大写的小字母font-weightnormal正常显示bold粗体font-size像素字体大小百分比字体大小CSS网页设计制作____张国策，机械电子工程专业第页共34页-5-font-family字体名称设置字体名称font属性简化的使用方法：font:是否斜体是否同宽是否粗体大小字体名称例如:font:italicbold200隶书；14.3CSS中的文本属性属性名称属性值说明color十六进制颜色英文名称颜色三原色单位颜色letter-spacingnormal正常显示长度文本间隔word-spacingnormal正常显示数字单词间距white-spacenormal文本自动处理换行pre换行和空白受保护nowrap强制在同一行显示text-alignleft文字靠左right文字靠右center文字靠中text-decorationnone正常显示Underline加上下划线overline加顶线line-through加删除线text-indent长度首行缩进百分比同上line-height像素行高数字/百分比行高text-transformnone正常显示可以包含大，小字符capitalize字符串第一个字符大写uppercase设置大写字符lowercase设置小写字符vertical-alignsub设置文字为下标。super设置文字为上标。text-top元件往上端靠齐。middle设置文字是在中线位置。text-bottom元件往下端靠齐。第15章CSS背景与列表15.1CSS中背景的使用属性名称属性值说明background-attachmentscroll设置背景图像会随视窗滚动条的移动而移动。fixed设置背景图像不会随视窗滚动条的移动而移动。CSS网页设计制作____张国策，机械电子工程专业第页共34页-6-background-color十六进制background-color:#ff0000;英文名称background-color:red;三原色background-color:rgb(255,0,0)transparentbackground-color:transparent;透明background-imageURLbackground-image:url(bg.jpg)背景图片none不设置背景图片background-positiontopleft设置背景图案出现在上左方。topcenter设置背景图案出现在上方中间。topright设置背景图案出现在上右方。centerleft设置背景图案出现在中间左方。centercenter设置背景图案出现在IE中间。centerright设置背景图案出现中间右方。bottomleft设置背景图案出现在下左方。bottom设置背景图案出现在正下方。bottomright设置背景图案出现在下右方。background-repeatrepeat将背景图案填满整个背景。repeat-x将背景图案在水平方向添满。repeat-y将背景图案在垂直方向添满。no-repeat图案只出现一次。背景图案简化方案：background:颜色背景图片repeatattachmentposition15.2CSS中列表的使用属性名称属性值说明list-style-typenone无符号disc实体的小圆点。circle空心的小圆点。square实心的小方块。decimal1,2,3...lower-romani,ii,iii...upper-romanI,II,III...lower-alphaa,b,c,d,e...upper-alphaA,B,C,D,E...list-style-positioninside清单项目较往右移。outside清单项目正常显示。list-style-imageURLlist-style-image:url(lmk.gif)none不会显示任何图象清单的简化设置：list-style:circleinsideurl(bullet.gif)第16章CSS边框与边界16.1CSS中边框的使用属性名称属性值说明CSS网页设计制作____张国策，机械电子工程专业第页共34页-7-border-color十六进制可依序设置上，右，下，左线颜色英文名称border-color:red(四边均为红色)三原色border-color:redgreen(上下为红色，左右为绿色)border-color:redgreenblue(上为红色、左右为绿色、下为蓝色)border-color:redgreenblueyellow(上右下左分