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

1、CSS网页设计制作_张国策，机械电子工程专业第12 章XML 与XHTML12.1 什么是XMLXML 中文翻译为可扩展标记语言,顾名思义,它比HTML 的优势:1.延伸性2.简单易懂12.2 XML的基本格式张三58张晓三5712.3 XML的定义文档!DOCTYPE 中华人民共和国01085401张三北京01085402李四上海12.4HTML4.01 的文档定义12.5 XHTML1.0 的文档定义HTML 与XHTML 都有三种标准风格：第一种称为过度型(transitional)，它允许使用废弃标记。第二种称为严格型(strict)，他禁止使用任何废弃的标记。第三种是框架型(fram

2、eset)，它允许使用废弃的标记和框架。12.6 XHTML1.0 风格标记的改变1.所有单标记都必须关闭：、等2.所有的单属性必须等于自身：checked=checked、readonly=readonly等3.尽可能不使用废弃标记：、等第13 章CSS 入门基础13.1 认识CSSCSS 的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS2 规范也于1998 年02 月通过W3C 的审核与推荐,所以CSS 并不是专为XHTML 所设计的,CSS 还可以被其他标记语言拿来制作排版样本,如HTML,XML 文件都可以应用CSS,来美化网页的设计,大

3、家如果学会CSS,在HTML,XHTML,XML 文件中都可以使用.13.2 传统HTML设计网页版面的缺点使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML并非完全着眼在网页排版的功能上,而这对XHTML 而言更是如此,因为XHTML 有意将原先HTML 中有关网页版面的标记或属性遗弃不用,如,color,background,bgcolor 等等,所以对XHTML 文件而言,其排版与显示的功能比HTML 文件更弱,所以使用XHTML 来设计网页更需要搭配CSS 排版样本.13.3 CSS的特点HTML 排版时的缺点:设置麻烦,修改麻烦,功能严重不足.CSS

4、样式排版的优点:排版属性功能完整,排版文件可以独立存在,可以共用排版文件CSS 样式排版的分类:内行排版样式,内嵌式排版样式,链接式排版13.4 CSS的排版样式行内排版样式:格式:例:排版样式排版专用标记:与这两个标签都是用来设置涵盖一个区块为主.区块就是表示一行以上的数据.如果没有一样,则 与该数据显示前后都不会跳行.内嵌式排版样本:内嵌式排版中所有的样式定义都必须在. 之间,而.又必须在.之间.与其功能,又可以分为三种,1. 标记定义型2. class 定义型3. id 定义型标记定义型格式:标记名称属性1:属性值1;属性2:属性值2;标记名称属性1:属性值2;属性2:属性值2;clas

5、s 定义型格式:.定义名称属性1:属性值1;属性2:属性值2;.定义名称1,.定义名称2属性1:属性值1;属性2:属性值2;id 定义型格式:#定义名称属性1:属性值1;属性2:属性值2;#定义名称1,#定义名称2属性1:属性值1;属性2:属性值2;“行内”和”内嵌式”排版定义的优先级:CSS 规定,范围越小,优先级越高.由小到大排列:1. 行内2. class 和id 定义型3. 标记定义行id 的优先级高于class 级.外部排版样式定义:独立的样式排版:标记名称属性1:属性值1;属性2:属性值2;.定义名称属性1:属性值1;属性2:属性值2;在之间使用格式:在之间使用import格式：i

6、mport style.css第14 章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斜体f

7、ont-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 正常显示数字单词间距wh

8、ite-space normal 文本自动处理换行pre 换行和空白受保护 nowrap 强制在同一行显示text-align left 文字靠左right 文字靠右center 文字靠中text-decoration none 正常显示Underline 加上下划线overline 加顶线line-through 加删除线text-indent 长度首行缩进百分比同上line-height 像素行高数字/百分比行高text-transform none 正常显示可以包含大，小字符capitalize 字符串第一个字符大写uppercase 设置大写字符lowercase 设置小写字符vert

9、ical-align sub 设置文字为下标。super 设置文字为上标。text-top 元件往上端靠齐。middle 设置文字是在中线位置。text-bottom 元件往下端靠齐。第15 章CSS 背景与列表15.1 CSS 中背景的使用属性名称属性值说明background-attachment scroll 设置背景图像会随视窗滚动条的移动而移动。fixed 设置背景图像不会随视窗滚动条的移动而移动。background-color 十六进制background-color:#ff0000;英文名称background-color:red;三原色background-color:rgb

10、(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 设置

11、背景图案出现在下左方。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 实心的小方块。decima

12、l 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 边框与边界16.1 CSS 中边框的使用属性名称属性值说明bord

13、er-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;borde

14、r-width:1 2 3 4;简化方案：border:形态长度颜色例如border:1px solid black;16.2 CSS 中边界的使用padding 属性介绍属性名称属性值说明padding-bottom 长度/百分比元件下端边线的空隙padding-left 长度/百分比元件左端边线的空隙padding-right 长度/百分比元件右端边线的空隙padding-top 长度/百分比元件上端边线的空隙简易写法：padding:10pxpadding:2px 4pxpadding:2px 6px 10pxpadding:1px 2px 3px 4pxmargin 系列属性介绍属性名

15、称属性值说明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 区块、浮动、定位、溢出、滚动条17.1 CSS 中区块的使用属性名称属性值说明width 像素/百分比区块的宽度autoheig

16、ht 像素/百分比区块的高度automin-height 像素/百分比区块最小高度automax-height 像素/百分比区块最大高度automin-width 像素/百分比区块最小宽度automax-width 像素/百分比区块最大宽度auto17.2 CSS 中浮动的使用属性名称属性值说明float none 正常显示left 左浮动right 右浮动clear none 允许两边浮动left 不允许左边浮动right 不允许右边浮动both 不允许两边浮动17.3 CSS 中定位的使用属性名称属性值说明Position relative 设置区块基准点为左上角absolute 设置网页

17、的为基准点左上角static 无设置left auto 以基准点定位在左边像素/百分比定位在左边top auto 以基准点定位在上边像素/百分比定位在上边right auto 以基准点定位在右边像素/百分比定位在右边bottom auto 以基准点定位在下边像素/百分比定位在下边z-index auto 自动调整高度数字数字越大越往上层17.4 CSS 中溢出的使用属性名称属性值说明overflow visible 不剪切内容也不添加滚动条auto 在必需时对象内容才会被裁切或显示滚动条hidden 不显示超过对象尺寸的内容scroll 总是显示滚动条overflow-x (同上)overfl

18、ow-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 颜色/十六进制滚动条基准颜色scro

19、llbar-track-color 颜色/十六进制滚动条拖动区域第18 章CSS 链接、光标、DHTML、缩放18.1 CSS 中链接的使用超链接伪类属性a:link 表示该超链接文字尚未被点选a:visited 表示该超链接文字已被点选过a:active 表示该超链接文字正被点选,但未被放开a:hover 表示当鼠标停留在文字上18.2 CSS 中光标的使用属性名称属性值说明cursor auto 光标是手指 cursor:url(#)crosshair 光标是十子形default 光标是箭头hand/pointer光标是手形move 光标是移动的符号text 输入文字的符号wait 漏斗h

20、elp 帮助18.2 CSS 中DHTML 的使用属性名称属性值说明behavior url DHTML 文件18.3 CSS 中缩放的使用属性名称属性值说明zoom normal 使用对象的实际尺寸百分数/浮点实数放大缩小第19 章CSS 滤镜19.1 Filter 属性介绍设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象，如块对象。内联要素要使用该属性，必须先设定对象的height 或width 属性，或者设定position 属性为absolute，或者设定display 属性为block。请参阅对象的hasLayout 属性。若要在img 对象上应用shadow 滤镜，

21、可以在该对象img 对象的父容器上应用。滤镜的机制是可扩展的。通过利用MicrosoftDirectXMedia SDK，你可以使用C+开发和使用第三方滤镜。该属性在MAC 平台上不可用。对应的脚本特性为filter。19.2 Alpha 滤镜的使用属性值说明 filter:alpha(opacity=50)opacity 0-100 对象的亮度style 1,2,3 滤镜的样式19.2 Blur 滤镜的使用属性值说明add true/false 是否印象派direction 0-360 角度strength 数字模糊度19.3 Fliph、Flipv 滤镜属性值说明无19.4 DropSha

22、dow 滤镜属性值说明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 阴影方向第20 章CSS 定义选择器20.1 ID与类选择器是用于控制页面设计的样式.即ID 选择器何类选择器.一直以来,许多开发人员经常将ID 与类混淆,或者不能正确的使用这两种选择器,或者简单的认为是一

23、个代替另一个.这种认知是及其错误的.(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 Article Title Of My Art

24、icle(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;.

25、hot Color:# 333333;(7).利用类改写基本样式:pColor:#ff6600;.bleached Color:#ccc;相应的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).外部链接实现层叠

26、(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;/*分组后*/h1,h2,h3Font-family:隶书,宋体,楷

27、体;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 font-weight

28、: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).通用选择器*

29、Padding:0;Margin:0;(5).高级选择器高级选择器,目前支持还不太完善,所以,对于站点功能很重要的任何元素上,应该避免使用这些高级选择器.1.子选择器和相邻同胞选择器子选择器#nav li background:url(bg.gif) no-repeat left top; HomeServer DevelopmentConsultancy Contact Us相邻同胞选择器:h1+pfont-weight:bold;Main HeadingFirst ParagraphSecond Paragraph2.属性选择器CSSstrongtitle border-bottom: 1

30、px dotted #999;strongtitle:hover cursor:help;background:#ccc20.8 代码注释与结构/*body styles*/body Font-size:67.5%;1.添加结构性注释/*-Version: 1.1Author: andy buddEmail:infoWebsite:http:-*/2.自我提示/*Use the star selector hack to give IE a different font size.co.ph*/布局结构：使用有意义的标记。表格成了一种布局工具而不是显示数据的方式,人

31、们使用块引用(blockquote)来添加空白而不是表示引用.Web 很快就失去了意义,成了字体和表格标签的大杂烩.而现在我们可以使用DIV+CSS 来控制布局.第21 章CSS 构造模型21.1 div部分(division)-元素,经常以div 形式引用-是XHTML 元素,用于定义XHTML 文件中的区域.1.添加divThis is our content area.给div 添加一个idThis is our content area.#container Padding: 20px;Border:1px solid #000;Background:#ccc;2.添加子divThis

32、 is our content area.Im in a box!Im also in a box!.box margin: 10px;padding: 20px;border: 1px solid #000;3.div 和上下文选择器.box p Color: #333;#container p Color: #333;21.2 边距外边距(margin)外边距声明:#container Margin:-top: 20px;Margin-left: auto;Margin-right: auto;Margin-bottom; 20px;Width: 300px;Border: 1px sol

33、id #333;Padding: #ccc;#container Margin: 20px auto 1em auto; /*上,右,下,左*/用margin:auto 居中Body Text-align: center;#container Width: 400px;Margin: 10px auto 10px auto;Padding: 20px;Background: #ccc;Text-align: left;5.内边距(padding)#container Padding-top: 20px;Padding-left: 10%;Padding-right: 1em;Padding-b

34、ottom: 0;Background: #ccc;6.外边距,内边距和主体Body Margin: 0;Padding: 0;21.3 边框Border-style (边框样式)None(无边框),dotted(点线),dashed(虚线),Solid(实现),double(双线),groove(凹槽),ridge(凸槽),Inset(凹边),outset(凸边)/*上右下左*/Border-style: solid dotted inset outset;Border-width(长度)Border-top-widthBorder-right-widthBorder-bottom-widt

35、hBorer-left-widthBorder-colorBorderBorder-topBorder-rightBorder-bottomBorder-leftBorder(四周)Border-top(上)21.4 定位P,h1 和div 等成为块级元素.意思是这些元素显示为一块内容,即”块框”.与之相反,strong 和span 等元素称为行内元素,即”行内框”.更多内容,后章在述.(1).相对定位#myBox Position: relative;Top: 20px;Left: 20px;(2).绝对定位#myBox Position:absolute;Top: 20px;Left: 2

36、0px;21.5 浮动.news img Float: left;.news p Float: right;第22 章CSS 构造颜色、背景与图像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

37、) 0c0c0c蓝色(blue) 0000ff酸橙色(lime) 00ff00浅绿色(aqua) 00ffff绛紫色(maroon) 800000紫色(purple) 800080橄榄绿(olive) 808000灰色(gray) 808080红色(red) ff0000紫红色(fuchsia) ff00ff黄色(yellow) ffff00橙色(orange) ffa500白色(white) ffffff4.使用span 更好的控制文本中局部区域的文本文本内容5.使用display 属性提供区块转换inline,block,none6.背景图象渐变的制作Body Background: #c

38、cc url(bg.gif) repeat-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.gi

39、f) no-repeat left bottom;.box h2 Background:url(top.gif) no-repeat left top;0000000000000000000000000000000000000000000000000000000000000000000000看视频如果不希望碰到边界,加上填充.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

40、 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. 内边距与外边距Ul Margin: 0;Padding: 0;2. 使用图片作为列表图标Ul Margin: 0;Padding:0;Width: 200px;List-style-image:url(ima

41、ges/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;Li Display: inline;这里的display 属性是块级值的设置,定义是否要成为块.Inline 是是内联,block 是区块.5. 背景图片和内联列表Ul List-style-type: none;Li Display:

42、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

43、;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-