CSS网页设计制作配合李炎恢 css 视频教程Word下载.docx

1、/中华人民共和国12.4HTML4.01 的文档定义DOCTYPE HTML PUBLIC -/W3C/DTD HTML 4.01 Transitional/ENhttp:/www.w3.org/TR/html4/loose.dtd12.5 XHTML1.0 的文档定义DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/www.w3.org/1999/xhtmlHTML 与XHTML 都有三种标准风格：第一种称为过度

2、型（transitional），它允许使用废弃标记。第二种称为严格型（strict），他禁止使用任何废弃的标记。第三种是框架型（frameset），它允许使用废弃的标记和框架。12.6 XHTML1.0 风格标记的改变1.所有单标记都必须关闭：br /、option /等2.所有的单属性必须等于自身：checked=checked、readonly=readonly3.尽可能不使用废弃标记：centerfont第13 章CSS 入门基础13.1 认识CSSCSS 的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS2 规范也于1998 年02 月通过

3、W3C 的审核与推荐,所以CSS 并不是专为XHTML 所设计的,CSS 还可以被其他标记语言拿来制作排版样本,如HTML,XML 文件都可以应用CSS,来美化网页的设计,大家如果学会CSS,在HTML,XHTML,XML 文件中都可以使用.13.2 传统HTML设计网页版面的缺点使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML并非完全着眼在网页排版的功能上,而这对XHTML 而言更是如此,因为XHTML 有意将原先HTML 中有关网页版面的标记或属性遗弃不用,如,例:p style= ”font-size:20pt;color:red;text-align:

4、center”排版样式排版专用标记:div与这两个标签都是用来设置涵盖一个区块为主.区块就是表示一行以上的数据.如果没有一样,则 与该数据显示前后都不会跳行.内嵌式排版样本:内嵌式排版中所有的样式定义都必须在. 之间,而 又必须在/head之间.与其功能,又可以分为三种,1. 标记定义型2. class 定义型3. id 定义型标记定义型格式:style type=”text/css”标记名称属性1:属性值2;body标记名称/bodyclass 定义型格式:.定义名称属性1:.定义名称1,.定义名称2属性1:标记名称class=”定义名称”id 定义型格式:#定义名称属性1:#定义名称1,#

5、定义名称2属性1:标记名称id=”定义名称”“行内”和”内嵌式”排版定义的优先级:CSS 规定,范围越小,优先级越高.由小到大排列:1. 行内2. class 和id 定义型3. 标记定义行id 的优先级高于class 级.外部排版样式定义:独立的样式排版:在之间使用link rel=”stylesheet” type=”text/css” href=URL /之间使用import格式：style type=text/cssimport style.css第14 章CSS 文字与文本14.1 CSS 中长度与颜色长度单位说明in 英寸Cm 公分Mm 公里cm 以目前字体高度为单位ex 以小写字

6、母高度为单位（大部分不支持）pt 1pt/72英寸pc 1pc/12ptpx 像素（推荐使用）颜色单位： 说明十六进制如： color:#ff0000颜色名称如：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-siz

7、e 像素 字体大小百分比 字体大小font-family 字体名称 设置字体名称font属性简化的使用方法：font:是否斜体是否同宽是否粗体大小字体名称例如:italic bold 200 隶书；14.3 CSS中的文本属性属性 名称属性值 说明color 十六进制 颜色英文名称 颜色三原色单位 颜色letter-spacing normal 正常显示长度 文本间隔word-spacing normal 正常显示数字 单词间距white-space normal 文本自动处理换行pre 换行和空白受保护 nowrap 强制在同一行显示text-align left 文字靠左right 文字靠

8、右center 文字靠中text-decoration none 正常显示Underline 加上下划线overline 加顶线line-through 加删除线text-indent 长度 首行缩进百分比 同上line-height 像素 行高数字/百分比 行高text-transform none 正常显示可以包含大，小字符capitalize 字符串第一个字符大写uppercase 设置大写字符lowercase 设置小写字符vertical-align sub 设置文字为下标。super 设置文字为上标。top 元件往上端靠齐。middle 设置文字是在中线位置。bottom 元件往下

9、端靠齐。第15 章CSS 背景与列表15.1 CSS 中背景的使用属性名称 属性值 说明background-attachment scroll 设置背景图像会随视窗滚动条的移动而移动。fixed 设置背景图像不会随视窗滚动条的移动而移动。background-color 十六进制 background-color:#ff0000;英文名称 background-color:三原色 background-color:rgb（255,0,0）transparent background-color:transparent;透明background-image URL background-ima

10、ge: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 将背景图案填

11、满整个背景。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

12、,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 中边框的使用border-color 十六进制 可依序设置上，右，下，左线颜色英文名称 border-color:red（四边均为红色）三原色 border-color:red green（上下为红色，左右为

13、绿色）border-color:red green blue（上为红色、左右为绿色、下为蓝色）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 长度

14、/百分比 元件下端边线的空隙padding-left 长度/百分比 元件左端边线的空隙padding-right 长度/百分比 元件右端边线的空隙padding-top 长度/百分比 元件上端边线的空隙简易写法：padding:10px2px 4px2px 6px 10px1px 2px 3px 4pxmargin 系列属性介绍margin-bottom auto 自动调整空隙长度/百分比 设置下端空隙margin-left auto 自动调整空隙长度/百分比 设置左端空隙margin-right auto 自动调整空隙长度/百分比 设置右端空隙margin-top auto 自动调整空隙长度

15、/百分比 设置上端空隙margin:常用网页顶格设置：0;第17 章CSS 区块、浮动、定位、溢出、滚动条17.1 CSS 中区块的使用width 像素/百分比 区块的宽度autoheight 像素/百分比 区块的高度min-height 像素/百分比 区块最小高度max-height 像素/百分比 区块最大高度min-width 像素/百分比 区块最小宽度max-width 像素/百分比 区块最大宽度17.2 CSS 中浮动的使用float none 正常显示left 左浮动right 右浮动clear none 允许两边浮动left 不允许左边浮动right 不允许右边浮动both 不允许

16、两边浮动17.3 CSS 中定位的使用Position relative 设置区块基准点为左上角absolute 设置网页的为基准点左上角static 无设置left auto 以基准点定位在左边像素/百分比 定位在左边top auto 以基准点定位在上边像素/百分比 定位在上边right auto 以基准 点定位在右边像素/百分比 定位在右边bottom auto 以基准点定位在下边像素/百分比 定位在下边z-index auto 自动调整高度数字 数字越大越往上层17.4 CSS 中溢出的使用overflow visible 不剪切内容也不添加滚动条auto 在必需时对象内容才会被裁切或显

17、示滚动条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-dark

18、shadow-color 颜色/十六进制 滚动条暗边框scrollbar-base-color 颜色/十六进制 滚动条基准颜色scrollbar-track-color 颜色/十六进制 滚动条拖动区域第18 章CSS 链接、光标、DHTML、缩放18.1 CSS 中链接的使用超链接伪类属性a:link 表示该超链接文字尚未被点选visited 表示该超链接文字已被点选过active 表示该超链接文字正被点选,但未被放开hover 表示当鼠标停留在文字上18.2 CSS 中光标的使用cursor auto 光标是手指crosshair 光标是十子形default 光标是箭头hand/pointe

19、r光标是手形move 光标是移动的符号text 输入文字的符号wait 漏斗help 帮助18.2 CSS 中DHTML 的使用behavior url DHTML 文件18.3 CSS 中缩放的使用zoom normal 使用对象的实际尺寸百分数/浮点实数放大缩小第19 章CSS 滤镜19.1 Filter 属性介绍设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象，如块对象。内联要素要使用该属性，必须先设定对象的height 或width 属性，或者设定position 属性为absolute，或者设定display 属性为block。请参阅对象的hasLayout 属性。若

20、要在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 滤镜无19.4 DropShadow 滤镜color

21、 颜色 阴影颜色offx 数字x 坐标偏移offy 数字y 坐标偏移positive true/false 是否建立透明19.5 Glow 滤镜color 颜色 发光颜色strength 数字 发光厚度19.6 Gray ,Invert,Xray 滤镜19.7 Shadow 滤镜direction 0-360 阴影方向第20 章CSS 定义选择器20.1 ID与类选择器是用于控制页面设计的样式.即ID 选择器何类选择器.一直以来,许多开发人员经常将ID 与类混淆,或者不能正确的使用这两种选择器,或者简单的认为是一个代替另一个.这种认知是及其错误的.（1）.应用ID每个ID 在一个页面中只能使用

22、一次,作为某个元素的唯一标识符.一般情况下,ID 只用于页面的唯一元素,如页眉,主导航条,布局区块等.示例:p id=”hightlight”This paragraph has red text.Title Of My Article （3）.ID的使用场合对于每个ID,每个页面只能有一个元素使用该样式,因此ID 应该为每个页面唯一存在并仅使用一次的元素不保留,（4）.避免使用ID的场合当一个以上的地方需要使用同一CSS 规则时,不应该使用ID.（5）.应用类类可以无限次的使用,因此它是应用CSS 的非常灵活的方法.p class=”hightlight”his paragraph has red text.li class=”mix”Beerli class=”mi