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

资源描述

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

《CSS网页设计制作配合李炎恢 css 视频教程Word下载.docx》由会员分享，可在线阅读，更多相关《CSS网页设计制作配合李炎恢 css 视频教程Word下载.docx（49页珍藏版）》请在冰豆网上搜索。

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

/中华人民共和国>

12.4HTML4.01的文档定义

DOCTYPEHTMLPUBLIC"

-//W3C//DTDHTML4.01Transitional//EN"

http:

//www.w3.org/TR/html4/loose.dtd"

12.5XHTML1.0的文档定义

DOCTYPEhtmlPUBLIC"

-//W3C//DTDXHTML1.0Transitional//EN"

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

htmlxmlns="

//www.w3.org/1999/xhtml"

HTML与XHTML都有三种标准风格：

第一种称为过度型（transitional），它允许使用废

弃标记。

第二种称为严格型（strict），他禁止使用任何废弃的标记。

第三种是框架型（frameset），

它允许使用废弃的标记和框架。

12.6XHTML1.0风格标记的改变

1.所有单标记都必须关闭：

br/>

、<

hr/>

option/>

等

2.所有的单属性必须等于自身：

checked="

checked"

、readonly="

readonly"

3.尽可能不使用废弃标记：

center>

font>

第13章CSS入门基础

13.1认识CSS

CSS的英文全名是CascadingStyleSheets,中文可翻译为串接式排版样式,并且CSS2规范

也于1998年02月通过W3C的审核与推荐,所以CSS并不是专为XHTML所设计的,CSS还

可以被其他标记语言拿来制作排版样本,如HTML,XML文件都可以应用CSS,来美化网页的

设计,大家如果学会CSS,在HTML,XHTML,XML文件中都可以使用.

13.2传统HTML设计网页版面的缺点

使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML

并非完全着眼在网页排版的功能上,而这对XHTML而言更是如此,因为XHTML有意将原先

HTML中有关网页版面的标记或属性遗弃不用,如<

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>

该数据显示前后都不会跳行.

内嵌式排版样本:

内嵌式排版中所有的样式定义都必须在<

style>

..<

/style>

之间,而<

又必须在<

head>

/head>

之间.

与其功能,又可以分为三种,

1.标记定义型

2.class定义型

3.id定义型

标记定义型格式:

styletype=”text/css”>

标记名称{属性1:

属性值2;

}

body>

标记名称>

/body>

class定义型格式:

.定义名称{属性1:

.定义名称1,.定义名称2{属性1:

标记名称class=”定义名称”>

id定义型格式:

#定义名称{属性1:

#定义名称1,#定义名称2{属性1:

标记名称id=”定义名称”>

“行内”和”内嵌式”排版定义的优先级:

CSS规定,范围越小,优先级越高.

由小到大排列:

1.行内

2.class和id定义型

3.标记定义行

id的优先级高于class级.

外部排版样式定义:

独立的样式排版:

在<

之间使用<

link>

linkrel=”stylesheet”type=”text/css”href=URL/>

之间使用import

格式：

styletype="

text/css"

@import"

style.css"

第14章CSS文字与文本

14.1CSS中长度与颜色

长度单位说明

in英寸

Cm公分

Mm公里

cm以目前字体高度为单位

ex以小写字母高度为单位（大部分不支持）

pt1pt/72英寸

pc1pc/12pt

px像素（推荐使用）

颜色单位：

说明

十六进制如：

color:

#ff0000

颜色名称如：

red

三原色单位如：

rgb（255,0,0）

一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝（b）】混合而成。

。

每个值域在0－255之间

14.2CSS中的文字属性

属性名称属性值说明

font-stylenormal正常显示

Italic斜体

font-variantnormal正常显示

small-caps将英文大小写字母写调为同宽

font-weightnormal正常显示

bold粗体

font-size像素字体大小

百分比字体大小

font-family字体名称设置字体名称

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设置文字为上标。

top元件往上端靠齐。

middle设置文字是在中线位置。

bottom元件往下端靠齐。

第15章CSS背景与列表

15.1CSS中背景的使用

属性名称属性值说明

background-attachmentscroll设置背景图像会随视窗滚动条的移动而移动。

fixed设置背景图像不会随视窗滚动条的移动而移动。

background-color十六进制background-color:

#ff0000;

英文名称background-color:

三原色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:

颜色背景图片repeatattachmentposition

15.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中边框的使用

border-color十六进制可依序设置上，右，下，左线颜色

英文名称border-color:

red（四边均为红色）

三原色border-color:

redgreen（上下为红色，左右为绿色）

border-color:

redgreenblue

（上为红色、左右为绿色、下为蓝色）

redgreenblueyellow

（上右下左分别为红绿蓝黄）

border-stylenone不显示边线

dotted点线

dashed虚线

solid实线

double双线

border-width长度border-width:

0.2cm0.3cm0.4cm0.5cm;

border-width:

1234;

简化方案：

border:

形态长度颜色

例如border:

1pxsolidblack;

16.2CSS中边界的使用

padding属性介绍

padding-bottom长度/百分比元件下端边线的空隙

padding-left长度/百分比元件左端边线的空隙

padding-right长度/百分比元件右端边线的空隙

padding-top长度/百分比元件上端边线的空隙

简易写法：

padding:

10px

2px4px

2px6px10px

1px2px3px4px

margin系列属性介绍

margin-bottomauto自动调整空隙

长度/百分比设置下端空隙

margin-leftauto自动调整空隙

长度/百分比设置左端空隙

margin-rightauto自动调整空隙

长度/百分比设置右端空隙

margin-topauto自动调整空隙

长度/百分比设置上端空隙

margin:

常用网页顶格设置：

第17章CSS区块、浮动、定位、溢出、滚动条

17.1CSS中区块的使用

width像素/百分比区块的宽度

auto

height像素/百分比区块的高度

min-height像素/百分比区块最小高度

max-height像素/百分比区块最大高度

min-width像素/百分比区块最小宽度

max-width像素/百分比区块最大宽度

17.2CSS中浮动的使用

floatnone正常显示

left左浮动

right右浮动

clearnone允许两边浮动

left不允许左边浮动

right不允许右边浮动

both不允许两边浮动

17.3CSS中定位的使用

Positionrelative设置区块基准点为左上角

absolute设置网页的为基准点左上角

static无设置

leftauto以基准点定位在左边

像素/百分比定位在左边

topauto以基准点定位在上边

像素/百分比定位在上边

rightauto以基准点定位在右边

像素/百分比定位在右边

bottomauto以基准点定位在下边

像素/百分比定位在下边

z-indexauto自动调整高度

数字数字越大越往上层

17.4CSS中溢出的使用

overflowvisible不剪切内容也不添加滚动条

auto在必需时对象内容才会被裁切或显示滚动条

hidden不显示超过对象尺寸的内容

scroll总是显示滚动条

overflow-x（同上）

overflow-y（同上）

17.5CSS中滚动条的使用

属性名称属性值说明

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颜色/十六进制滚动条拖动区域

第18章CSS链接、光标、DHTML、缩放

18.1CSS中链接的使用

超链接伪类属性

link表示该超链接文字尚未被点选

visited表示该超链接文字已被点选过

active表示该超链接文字正被点选,但未被放开

hover表示当鼠标停留在文字上

18.2CSS中光标的使用

cursorauto光标是手指

crosshair光标是十子形

default光标是箭头

hand/pointer光标是手形

move光标是移动的符号

text输入文字的符号

wait漏斗

help帮助

18.2CSS中DHTML的使用

behaviorurlDHTML文件

18.3CSS中缩放的使用

zoomnormal使用对象的实际尺寸

百分数/浮点实数放大缩小

第19章CSS滤镜

19.1Filter属性介绍

设置或检索对象所应用的滤镜或滤镜集合。

此属性仅作用于有布局的对象，如块对象。

内联要素要使用该属性，必须先设定对象的height或width属性，或者设定position属

性为absolute，或者设定display属性为block。

请参阅对象的hasLayout属性。

若要在

img对象上应用shadow滤镜，可以在该对象img对象的父容器上应用。

滤镜的机制是可扩

展的。

通过利用Microsoft®

DirectX®

MediaSDK，你可以使用C++开发和使用第三方滤镜。

该属性在MAC平台上不可用。

对应的脚本特性为filter。

19.2Alpha滤镜的使用

属性值说明

opacity0-100对象的亮度

style1,2,3滤镜的样式

19.2Blur滤镜的使用

addtrue/false是否印象派

direction0-360角度

strength数字模糊度

19.3Fliph、Flipv滤镜

无

19.4DropShadow滤镜

color颜色阴影颜色

offx数字x坐标偏移

offy数字y坐标偏移

positivetrue/false是否建立透明

19.5Glow滤镜

color颜色发光颜色

strength数字发光厚度

19.6Gray,Invert,Xray滤镜

19.7Shadow滤镜

direction0-360阴影方向

第20章CSS定义选择器

20.1ID与类

选择器是用于控制页面设计的样式.即ID选择器何类选择器.

一直以来,许多开发人员经常将ID与类混淆,或者不能正确的使用这两种选择器,或者简

单的认为是一个代替另一个.这种认知是及其错误的.

（1）.应用ID

每个ID在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID只

用于页面的唯一元素,如页眉,主导航条,布局区块等.

示例:

pid=”hightlight”>

Thisparagraphhasredtext.<

相应的CSS代码:

#hightlight{

#FFFFFF;

（2）.将ID与选择器结合

/*适合所有h2标题*/

h2{

#333;

font-size:

16px;

/*只适合title的h2标题*/

h2#title{

#eee;

相应的XHTML代码:

h2>

TitleOfMyArticle<

/h2>

h2id=”title”>

（3）.ID的使用场合

对于每个ID,每个页面只能有一个元素使用该样式,因此ID应该为每个页面唯一存

在并仅使用一次的元素不保留,

（4）.避免使用ID的场合

当一个以上的地方需要使用同一CSS规则时,不应该使用ID.

（5）.应用类

类可以无限次的使用,因此它是应用CSS的非常灵活的方法.

pclass=”hightlight”>

hisparagraphhasredtext.<