CSS总结Word格式.docx
- 文档编号:3754772
- 上传时间:2023-05-02
- 格式:DOCX
- 页数:29
- 大小:33.59KB
CSS总结Word格式.docx
《CSS总结Word格式.docx》由会员分享,可在线阅读,更多相关《CSS总结Word格式.docx(29页珍藏版)》请在冰点文库上搜索。
SUB>
下标
12.特殊符号
符号
HTML表示方法
lt;
>
gt;
amp;
“
quot;
13.控制<
BODY>
标记的属性
属性
Bgcolor
控制网页背景颜色
Background
控制网页背景图片
text
网页文字颜色
用法:
bodybgcolor=redbackground=”aa.gif”text=blue>
正文<
/body>
第二节
文字列表的设计
a)编号列表标记<
OL>
/OL>
<
LI>
编号1
编号2
编号3
…
/OL
例:
<
前言
领导的效能理论、依据
领袖特质与评估领导品质
决定领导行为的情境
如何作好授权、分权、集权
领袖有效运用权力的要决
结论
<
结果:
1.前言
2.领导的效能理论,依据
3.领袖物质与评估领导品质
…
7.结论
2.设置编号的形式(TYPE属性)
值
含义
1
数字
A
大写英文
a
小写英文
I
大写罗马
i
小写罗马
OLTYPE=A>
3.设置编号的开始序号(START属性)
OLTYPE=ASTART=”4”>
4.项目符号列表的设计<
UL>
/<
MENU>
LH>
项目符号
…
/UL>
/MENU>
/LH>
5.项目符号的形式(TYPE属性)
符号名称
表现图标
Circle
○
Disc
●
square
■
ULTYPE=CIRCLE>
6.UL/MENU/LH的差异
<
与<
标记没有什么差别,而使用<
标记与前两者最大的差异在于,在<
标记里,标题与第一个项目间没有空行,且各个项目是左对齐,而前两者则有空行,且各个项目是向右缩排。
第三节
表格的建立
起始标记:
TABLE>
行标记:
TR>
单元格标记:
TD>
TH>
表格外框的控制属性:
1.边框宽度(BORDER)
2.内框宽度(CELLSPACING)
3.表格内文字与边框距离(CELLPADDING)
用法:
TABLEborder=2cellspacing=0cellpadding=0>
表格的控制:
1.表格高度(HEIGHT)
2.表格宽度(WIDTH)
3.边框颜色(BORDERCOLOR)
4.背景颜色(BGCOLOR)
TABLEbgcolor=navybordercolor=yellowwidth=50%border=10>
5.水平对齐方式(ALIGN)
TALBEalign=left/center/right>
表格行的控制:
1.行高度(HEIGHT)
2.行的外框颜色(BORDERCOLOR)
3.行的前景颜色(BGCOLOR)
4.行文字水平对齐方式(ALIGN=left/center/right)
5.行文字垂直对齐方式(VALIGN=top/middle/bottom)
单元格的设置:
1.单元格的边框颜色(BORDERCOLOR)
2.单元格的背景颜色(BGCOLOR)
3.单元格的文字水平对齐(ALIGN)
4.单元格的文字垂直对齐(VALIGN)
5.水平合并单元格(COLSPAN)
TDCOLSPAN=N>
6.垂直合并单元格(ROWSPAN)
TDROWSPAN=N>
7.单元格的宽度(WIDTH)
第四节图片的使用
1.<
IMG>
标记
用法:
IMGSRC=”图片文件名称与位置”>
2.图片高度(HEIGHT)
3.图片宽度(WIDTH)
4.图片边缘宽度(BORDER)
5.图片水平空间(HSPACE)
说明:
图片左右两边方向的空白区域宽度.
6.图片垂直空间(VSPACE)
7.图片相对文豪基准线的水平对齐(ALIGN)
IMGalign=top,middle,bottom,left,right>
8.图片的取代文字(ALT)
第五节超链接
“.”___代表当前目录
“..”___代表上级目录
“/”代表根目录
说明:
对于链接的位置最终使用相对路径还是使用绝对路径应根据情况而定.
1.基本语法
ahref=”链接位置”>
名称<
/a>
2.建立图片超链接
Ahref=”链接位置”>
imgsrc=图片>
/A>
3.超键接颜色的设置
BODYalink=颜色vlink=颜色link=颜色>
alink:
单击时使用的颜色
vlink:
已经链接过的链接的颜色
link:
未链接时的颜色
4.其它链接形式
ahref=http:
//网址>
ahref=ftp:
ahref=telnet:
//>
第六节
网页动态更新与多媒体
1.动态更新
METAHTTP-EQUIV=”refresh”content=”秒数;
url=文件名称或网址”>
注:
META>
标记必须放在<
HEAD>
标记中。
2.音乐文件的播放
a.创建一个指向声音文件的超链接
Ahref=”sweet.wav”>
甜美音乐<
注:
使用这种方法时,当单击鼠标时就会自动打开WINDOWS的播放器播放该声音文件.同样的方法也可用于mov、mpg、avi.
b.将影像文件加入网页
EMBEDSRC=”影像文件的名称”WIDTH=宽度HEIGHT=高度AUTOSTART=自动播放LOOP=播放次数>
注:
使用这种方法时,将不会调用WINDOWS的播放器。
c.<
bgsound>
播放背景音乐
BGSOUNDSRC=”sweet.wav”loop=2>
第七节CSS样式表
一、样式表的定义与使用
1.直接定义标记的STYLE属性
2.定义内部样式表
3.嵌入外部样式表
4.连接外部样式表
具体操作方法如下:
标记名称STYLE=“样式属性:
属性值;
样式属性;
例:
H1STYLE=”FONT-FAMILY:
楷体;
COLOR:
BLUE”>
2.定义内部样式表
a.最简单的形式
STYLETYPE=”TEXT/CSS”>
!
—
选择符1{样式属性:
样式属性:
}
选择符2{样式属性:
选择符N{样式属性:
/STYLE>
例:
H1{FONT-FAMILY:
楷体;
COLOR:
RED}
H2{FONT-FAMILY:
化文隶书;
BLUE}
…
H1>
此行文字为红色楷体的字体<
/H1>
H2>
此行文字为蓝色华文隶书的字体<
/H2>
b.组合选择符(即一次完成不同的选择符内相同的样式定义)
选择符1,选择符2,选择符n(样式属性:
属性值….)
H1,H2{FONT-FAMILY:
c.利用CLASS类选择符定义样式
STYLETYPE=”TEXT”/CSS>
*.A1{样式属性:
*.A2{样式属性:
标记1.A1{样式属性:
标记2.A1{样式属性:
注:
以上标记中*.A1样式可应用在HTML文件的任何地方,而标记1.A1只能用在该标记范围内才有效。
P.A1{FONT-FAMILY:
*.A2{FONT-FAMILY:
华文隶书;
……
PCLASS=A1>
此行文字为红色楷体的字体,A1标记只能用在P标记中<
/P>
PCLASS=A2>
此行文字为蓝色华文隶书,A2标记能用在所有的地方<
d.利用ID类选择符定义样式
#A1{样式属性:
#A2{样式属性:
#An{样式属性:
标记1#A1{样式属性:
标记2#A2{样式属性:
标记N#AN{样式属性:
P#A1{FONT-FAMILY:
#A2{FONT-FAMILY:
PID=A1>
PID=A2>
@IMPORTURL(“外部样式表名称.CSS”);
LINKTYPE=”TEXT/CSS”REL=STYLESHEETHREF=”样式表.css”>
以连接方式引用外部样式表时,不使用STYLE元素,直接运行LINK标记。
注:
样式调用的顺序以较后的定义方式来显示,但除了在标记中直接定义的STYLE属性除外,它是最优先执行的。
第八节文字排版样式的使用
1.了解长度、百分比单位
类型
明细
说明
相对类型
Em
以目前使用的字体高度为单位,如2EM表示为目前字符的2倍
Px
像素,因为屏幕上的大小与打印机的大小不同,所以为相对
50%
相对字体FONT-SIZE的百分比
绝对类型
In
英寸,1in=2.54cm
Cm
厘米
Mm
毫米
Pt
点数1pt=1/72in
Pc
印刷单位,1pc=12pt
2.文字样式属性
1.FONT-FAMILY(字体)
语法:
FONT-FAMILY:
字体一,字体二,字体三…
说明:
当前面的字体找不到时就会使用后面的替代字体。
2.FONT-STYLE(字体效果)
语法:
FONT-STYLE:
NORMAL|ITALIC(斜体)|OBLIQUE(歪斜体)
3.FONT-VARIANT(文字变体)
FONT-VARIANT:
NORMAL|SMALL-CAPS
说明:
可以将中文字体转换为较小的中文字体,而小写的英文字体将转换为大写且较小的英文字。
4.FONT-WEIGHT(文字粗细)
FONT-WEIGHT:
NORMAL|BOLD|BOLDER|LIGHTER|100~900
设置值
NORMAL
游览器默认字体为7粗细为400
BOLD
粗体,700
BOLDER
粗体再粗体,900
LIGHTER
比默认字还细。
100-900
九个层次(100、200、900)
5.FONT-SIZE(文字大小)
FONT-SIZE:
绝对大小|相对大小
6.FONT(文字属性)
FONT:
FONT-FAMILY||FONT-STYLE||FONT-VARIANT||FONT-WEIGHT||FONT-SIZE
这是上面五种设置的总结,表示可以同时设置以上五个属性。
属性与属性之间必须用;
号分开。
FONTSIZE:
20PT;
ITALIC
7.TEXT-DECORATION(文字效果)
text-decoration:
underline|overline|line-through|none
underline
overline
上划线
line-through
8.Text-transform(文字转换)
text-tranform:
capitalize|uppercase|lowercase|none
设置值
Capitalize
首字母大写
Uppercase
大写
Lowercase
小写
以下是排版样式属性
1.text-indent(首行缩进)
text-indent:
长度单位|百分比单位
2.Letter-spacing(字符间距)
letter-spacing:
normal|长度单位
3.Line-height(行距)
line-height:
normal|比例|长度单位|百分比
4.text-align(水平对齐)
text-align:
left|right|center|justify(左右)
5.Vertical-align(垂直对齐)
vertical-align:
baseline|sub|super|top|text-top|middle|bottom|text-bottom|
Baseline
浏览器默认的对齐方式
Sub
文字以下标显示
Super
文字以上标显示
Top
垂直向上对齐
Text-top
文字垂直向上,同TOP
Middle
垂直居中对齐
Bottom
垂直向下对齐
Text-bottom
文字垂直向下对齐,同BOTTOM
第九节背景与颜色的使用
1.颜色的表示方法
a.十六进制表示:
#ffffff
b.RGB函数表示:
rgb(255,255,255)
c.RGB百分比:
rgb(20%,50%,100%)
2.背景颜色与背景图片的设置
1.Bakcground-color(背景颜色属性)
语法:
background-color:
color>
|transparent(透明)
2.Background-image(背景图片的应用)
background-image:
url(文件位置)|none
可以在段落中设置背景图片,使某一段产生背景效果
3.Background-repeat(背景图片并排方式)
bakcground-repeat:
repeat|repeat-x|repeat-y|no-repeat
Repeat
默认值
Repeat-x
以X轴并排延伸
Repeat-y
以Y轴并排延伸
No-repeat
不并排方式处理
5.Background-attachment(固定背景图片)
background-attachment:
scroll|fixed(固定不变)
注意:
主要用在BODY标记内,用来控制整个HTML窗口的背景。
6.Background-position(背景图片的位置)
background-position:
[<
百分比>
|<
长度单位>
]|[top|center|bottom]||[left|center|right]
a.百分比方法设置:
X%y%
x%表示水平位置,即向右缩的百分比。
y%表示水平位置,即向下缩的百分比。
b.长度单位设置:
xy
background-position:
250px50px
c.以关键字设置:
righttop
或
background-positoin:
center==background-position:
bottom
第十节美化网页与超链接
1.设置anchor网页链接属性的颜色
语法
A:
link
尚未链接过的文字
visited
已经链接过的文字
active
当单击时的颜色
hover
移到文字上方时的颜色
同时设置以上四种状态为同一色
A:
link{color:
#00ff00}
A:
visited{color:
#ff0000}
active{color:
#0000ff}
hover{color:
#800080;
font-family:
font-weight:
bold;
Font-style:
italic;
font-size:
16pt}
2.不加下划线的超链接
A{text-decoration:
none}
当然也可以个别进行设置:
A:
hover{text-decoration:
3.scrollbar滚动条属性的设置
Scrollbar-face-color
凸起部分颜色
Scrollbar-shadow-color
阴影
Scrollbar-highlight-color
边框
Scrollbar-3dlight-color
3D光影
Scrollbar-darkshadow-color
3D阴影
Scrollbar-track-color
凹下部分颜色
Scrollbar-arrow-color
小三角颜色
BODY{scrollbar-face-color:
green;
scrollbar-shadow-color:
white}
4.cursor光标属性的设置
属性值
Auto
默认
Crosshair
十字形
Default
左箭头
Pointer
手形
Move
四方箭头
e-Resize
右箭头
Nw-resize
n-resize
上箭头
Se-resize
斜下箭头
Sw-resize
s-resize
下箭头
W-resize
Text
I字形状
Wait
系统忙
Help
帮助
a:
#ff0000;
cursor:
s-resize}
第十一节矩形模块的概念与使用
1.边界的设置——margin
margin主要是控制元素边界与文件其他内容的空白距离,由上、右、下、左四个部分组成。
四个边界的设置语法均相同:
margin-(top、right、bottom、left):
|默认值
具体设置方法见下表:
设置方法
具体实例
设置一个
上、右、下、左使用同一值
BODY{margin:
2cm}
设置两个
上下第一值,左右第二值
lcm2cm}
设置三个
上、左右、下
1cm2cm3cm}
设置四个
上、右、下、左的顺序
20pt30%30px2cm}
2.元素边框的设置——border
a.border-width边框宽度
border-width:
thin|middum|thick|<
(细)(中等)(粗)
注意:
和MARGIN一样,同样有四种设置方法来设置上、右、下、左边框的宽度。
它也可以单边设置,其语法为:
border-top-width、border-right-width、border-bottom-width、border-left-width
b.Border-color边框色彩
border-color:
和MARGIN一样,同样有四种设置方法来设置。
它也同样可以单边设置border-top-color、border-right-color、border-bottom-color、border-left-color.
C.border-style边框样式
border-style:
none|dotted…见下表
None
无线
Dotted
小点虚线
Dashed
大点虚
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 总结
![提示](https://static.bingdoc.com/images/bang_tan.gif)