CSS样式与布局详解-CSDN博客

本文深入探讨了CSS的颜色、背景、边框、边界、填充、滤镜等关键属性及其应用，详细介绍了如何使用这些属性来美化网页和实现复杂的布局效果。

l 颜色及背景

Ø 颜色属性：color
h1{color:red}
h2{color:#000080}

Ø 背景颜色属性：background-color （默认为透明transparent）
body{background-color:while}
h1{background-color:#000080}

Ø 背景图像属性：background-image
格式：background-image:url(图像文件名)|none(无)
<HTML>
<HEAD>
<TITLE>background-image属性</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>
<BODY ID=bc-1>
<CENTER>
<FONT SIZE=5 COLOR=lightyellow>background-color属性的应用</FONT>
<P ID=bi-1>
春望 <BR>
国破山河在，城春草木深。<BR>
感时花溅泪，恨别鸟惊心。<BR>
烽火连三月，家书抵万金。<BR>
白头搔更短，浑欲不胜簪。<BR>
</P>
</CENTER>
</BODY>
</HTML>

Ø 背景图片重复属性：background-repeat
格式：background-repeat:repeat|repeat-x|repeat-y|no-repeat
<HTML>
<HEAD>
<TITLE>background-repeat属性</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>
<BODY ID=bi>
<CENTER>
<FONT SIZE=4 COLOR=blue>background-repeat属性设置背景图片横向重复</FONT>
</CENTER>
</BODY>
</HTML>

Ø 固定背景图片属性：background-attachment
格式：backfround-attachment:scroll|fixed
<HTML>
<HEAD>
<TITLE>background-attachment属性</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>
<BODY ID=bi>
<CENTER>
<FONT SIZE=3 COLOR=yellow>
background-attachment固定背景图片属性的应用
</FONT>
</CENTER>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</BODY>
</HTML>

Ø 背景图片位置属性
格式：background-position:<百分比>|<长度>|<关键字>
按百分比定位格式：background-position:x% y%
按长度定位格式：background-position:x y
按关键字定位格式：background-position: top|center|bottomleft|center|right
p{background-position:70% 50%;repeat-y;url(..\pic\sky.jpg)}
p{background-position:70px 50px;url(..\pic\sky.jpg)}
p{background-position:right top;url(..\pic\sky.jpg)}

Ø background属性
格式：{background:背景颜色||背景图像||背景重复||背景附件||背景位置}
body{background:#000080 url(tree.jpg) no-repeat bottom right}

l 列表样式

格式：
list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none;
list-style-image: url(图像文件名);
list-style-position: inside|outside;
list-style 属性：{list-style: type值||image 值 ||position 值 }
.item{list-style:url(IMAGES/ITEM.GIF) inside}

l 美化网页与超链接的设置

Ø 网页链接属性anchor语法

a:link	尚未链接过的超链接文字的样式
a:visited	已链接过的超链接文字的样式
a:active	当鼠标单击超链后文字所显示的样式
a:hover	当鼠标拖动到超链上文字所显示的样式
a	在此属性内设置样式时，上述4种将同时引用此值

<HTML>
<HEAD>
<TITLE>anchor属性</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>
<BODY BGCOLOR=yellow>
<CENTER>
<FONT SIZE=4 COLOR=RED>
</FONT>
</CENTER>
<UL>
<LI><A href="http://www.sina.com.cn">新浪网</A>
<LI><A href="http://www.163.com">网易</A>
<LI><A href="http://www.yahoo.com.cn">雅虎</A>
</UL>
</BODY>
</HTML>

Ø 光标属性：cursor
<HTML>
<HEAD>
<TITLE>多变鼠标</TITLE>
</HEAD>
<BODY bgcolor=lightgreen>
<H3>鼠标显示效果</h1>
<p style="font-size:8pt;color:green;">请把鼠标移动到下面文字上</p>
<div >
<p><table width=300 style="font-size:9pt;color:#ee82ee;"border="0" cellspacing="1" cellpadding="0"bgcolor=Black>
<tr>
<td bgcolor=#FEF7ED><span style="cursor:pointer;">手的形状</span></td>
<td bgcolor=#FEF7ED><span style="cursor:ne-resize;">反方向</span></td>
</tr>
<tr>
<td bgcolor=#FEF7ED><span style="cursor:move;">移动</span></td>
<td bgcolor=#FEF7ED><span style="cursor:help;">求助</span></td>
</tr>
<tr>
<td bgcolor=#FEF7ED><span style="cursor:crosshair;">十字形</span></td>
<td bgcolor=#FEF7ED><span style="cursor:text;">移动到文本上的那种效果</span></td>
</tr>
<tr>
<td bgcolor=#FEF7ED><span style="cursor:wait;">等待</span></td>
<td bgcolor=#FEF7ED><span style="cursor:e-resize;">向右箭头</span></td>
</tr>
<tr>
<td bgcolor=#FEF7ED><span style="cursor:nw-resize;">向上箭头</span></td>
<td bgcolor=#FEF7ED><span style="cursor:ne-resize;">向右上箭头</span></td>
</tr>
<tr>
<td bgcolor=#FEF7ED><span style="cursor:nw-resize;">向左上箭头</span></td>
<td bgcolor=#FEF7ED><span style="cursor:w-resize;">向左箭头</span></td>
</tr>
<td bgcolor=#FEF7ED><span style="cursor:nw-resize;">向左下箭头</span></td>
<td bgcolor=#FEF7ED><span style="cursor:auto;">由系统自动给出效果</span></td>
<tr>
<td bgcolor=#FEF7ED><span style="cursor:se-resize;">向右下箭头</span></td>
<td bgcolor=#FEF7ED>&nbsp</td>
</tr>
</table>
</p>
</div>
</BODY>
</HTML>

Ø 滚动条属性：scrollbar
scrollbar-3dlight-color:color
说明：设置或检索滚动条亮边框颜色,对应的脚本特性为 scrollbar3dLightColor.
div {scrollbar-3dlight-color :threedhighlight; }
scrollbar-highlight-color:color
说明：设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色,对应的脚本特性为 scrollbarHighlightColor。
div {scrollbar-highlight-color :threedhighlight; }
scrollbar-face-color：color
说明：设置或检索滚动条3D表面(ThreedFace)的颜色，对应的脚本特性为 scrollbarFaceColor。
div {scrollbar-face-color : threedface; }
scrollbar-arrow-color : color
说明：设置或检索滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。对应的脚本特性为scrollbarArrowColor。
div {scrollbar-arrow-color : buttontext; }
scrollbar-shadow-color：color
说明：设置或检索滚动条3D界面的暗边(ThreedShadow)颜色。对应的脚本特性为 scrollbarShadowColor.
div {scrollbar-shadow-color :ThreedDarkShadow; }
scrollbar-darkshadow-color : color
说明：设置或检索滚动条暗边框(ThreedDarkShadow)颜色。对应的脚本特性为 scrollbarDarkShadowColor.
div {scrollbar-darkshadow-color :threeddarkshadow; }
scrollbar-base-color : color
说明：设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。对应的脚本特性为scrollbarBaseColor.
div {scrollbar-base-color : buttonface; }
scrollbar-track-color : color
说明：设置或检索滚动条的拖动区域(TrackBar)颜色。对应的脚本特性为 scrollbarTrackColor.
div {scrollbar-track-color :ThreedDarkShadow; }

<HTML>
<HEAD>
<TITLE>scrollbar属性</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>
<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=4 COLOR=RED>
制作立体的滚动条效果</FONT><BR>
<IMG src="dog.jpg">
</CENTER>
</BODY>
</HTML>

l DIV.span

Ø <div>-图层标签：
<div>标签：用于定义网页上一个相对独立的区域（文本、图形、表格、媒体、窗体、<div>等）。
格式：
<div id=IDname>...</div>
<div class=Classname>...</div>
<div id=name style="property:value;...">...</div>
图层：
<div id="Layer" style="position:absolute;
left:217px; top:135px; width:177px; height:122px;
z-index:1; visibility: visible;
overflow: scroll; clip: rect(1 170 120 1);
background-color: #0066FF; layer-background-color: #0066FF;
border: 1px none #000000;
background-image: url(images/dw_splash.gif);
layer-background-image: url(images/dw_splash.gif)">...</div>

Ø <span>-标签：
<span>和<div>的区别：<div>使上下文自动换行。
格式：
<span id=IDname>...</span>
<span class=Classname>...</span>
<span id=name style="property:value;...">...</span>

注：<span>主要用于样式的应用。

l 边框、边界、填充样式

Ø 边框属性：border-width border-color border-style
格式：
border-width:thin|medium|thick|数值[ thin|medium|thick|数值..]
border-top-width:数值
border-bottom-width:数值
border-left-width:数值
border-right-width:数值
border-color:#rrggbb[ #rrggbb..]/*按顺时针分配*/
border-top-color:#rrggbb
border-bottom-color:#rrggbb
border-left-color:#rrggbb
border-right-color:#rrggbb
border-style:dotted|dashed|solid|double|groove|ridge|inset|outset
border-top-style:
border-bottom-style:
border-left-style:
border-right-style:
<HTML>
<HEAD>
<TITLE>border-style属性</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>
<BODY>
<CENTER>
<h4>设置边框线样式属性border-style</h4>
<TABLE border=2 >
<TR><TD id=bs1>边框线样式为小点虚线</TD></TR>
<TR><TD id=bs2>边框线样式为大点虚线</TD></TR>
<TR><TD id=bs3>边框线样式为实线</TD></TR>
<TR><TD id=bs4>边框线样式为双直线</TD></TR>
<TR><TD id=bs5>边框线样式为3D凹线</TD></TR>
<TR><TD id=bs6>边框线样式为3D凸线</TD></TR>
<TR><TD id=bs7>边框线样式为3D框入线</TD></TR>
<TR><TD id=bs8>边框线样式为3D隆起线</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Ø border属性：{border:宽度||样式||颜色}
body{border:12pxsolid red}

Ø 边界属性：margin
格式：margin :auto | length
margin-top:宽度|百分比|auto
margin-right:宽度|百分比|auto
margin-bottom:宽度|百分比|auto
margin-left:宽度|百分比|auto
margin:宽度|百分比|auto[ 宽度|百分比|auto..]
<HTML>
<HEAD>
<TITLE>margin属性</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>
<BODY>
<CENTER>
<h4>利用margin属性设置边界的值</h4>
</CENTER>
花儿什么也没有。它们只有凋谢在风中的轻微、
凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，
悲哀无助地发出一声声垂死的鸣叫。<br>
或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。而美丽苦短的花期
却是那最后悲伤的秋风挽歌中的瞬间插曲。
</BODY>
</HTML>

l CSS滤镜（Filter）

分类：视觉滤镜（Visual Filters）和转换滤镜（Transition Filters）

Ø Alpha滤镜：透明和渐变透明效果
格式：
filter:alpha(opacity=*,finishopacity=*,style=*,startx=*,starty=*,finishx=*,finishy=*)
Opacity/finishopacity：开始/结束透明度（0-- 100）
style:渐变的形状。0代表统一形状、1代表线形、2代表放射状、3代表长方形
STARTX STARTY:代表渐变透明效果的开始X和Y坐标(度量单位为图片宽/高度的百分比）
FINISHX FINISHY:代表渐变透明效果的结束X和Y 的坐标(度量单位同上)

Ø Blur滤镜：模糊效果
格式：
filter:blur(add=0|1,direction=*,strength=*)
add：0 ---不显示原图，1 ---显示原图（默认）
direction：设置模糊的方向(0 0---垂直向上,依顺时针,45°递增,默认:270 0）
strength：代表有多少像素的大小将受到模糊影响，默认是5px

Ø Dropshadow滤镜：阴影效果
格式：
filter:dropshadow(color=#rrggbb,offx=*,offy=8,positive=0|1)}
color：阴影的颜色
offx offy：X方向和Y方向阴影的偏移量，px（±）
positive：阴影的透明效果（0 ---透明，1 ---不透明）

Ø Glow滤镜：光晕效果
格式：
filter:glow(color=#rrggbb,strength=*)
color：边缘光晕的颜色
strength：边缘光晕的强度大小（1 -- 255）

Ø Shadow滤镜：渐变阴影效果
格式：
filter:shadow(color=#rrggbb,direction=*)
color：阴影的颜色
direction：设置阴影的方向（0 0 ---垂直向上，依顺时针，45 0 递增，默认：225 0）

Ø Wave滤镜：垂直的波浪效果
格式：
style="filter:wave(add=*,freq=*,lightstrength=*,phase=*,strength=*)"
add：0 ---不显示原图（默认），1 ---显示原图
freq：出现在对象上的波浪数目（以正数设置）
lightstrength：波浪上光的照射强度（0 -- 100）
phase：正弦波的起始位置0—100，(相当于将360°划分为100个等分)
strength：波浪的振幅大小（px）

Ø Gray,Invert,Xray滤镜
Gray:将对象中的颜色除去,变成黑白效果.
Invert:将颜色饱和度及亮度值反转,类似底片效果.
Xray:让对象显示轮廓加亮,类似X光片的效果.
格式:
style="filter:Gray"
style="filter:Invert"
style="filter:Xray"

Ø FlipH和FlipV滤镜
FlipH:设置对象产生水平翻转效果.
FlipV:设置对象产生垂直翻转180°的效果.
格式:
style="filter:FlipH"
style="filter:FlipV"

Ø Mask滤镜:设置对像的屏蔽效果,如同印章一样印出模型的模样.
格式：
style="filter:mask(color=#rrggbb)"

Ø Chroma滤镜：主要用于指定对象中的某个颜色,变为透明效果.
格式：
style="filter:chroma(color=#rrggbb)"

Ø Light滤镜：光照效果
格式:
①AddAmbient 加入包围的光源：
filters.Light[(n)].AddAmbient(R,G,B,strength)
②AddCone 加入锥形光源：
filters.Light[(n)].addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread)
③AddPoint 加入点光源：
filters.Light[(n)].addPoint(x,y,z,R,G,B,strength)
④Changcolor 改变光的颜色：
filters.Light[(n)].ChangeColor(lightnumber, r,g,b,fAbsolute)
⑤Changstrength 改变光源的强度：
filters.Light[(n)].ChangeStrength(lightnumber,strength, fAbsolute)
⑥Clear 清除所有的光源：
⑦MoveLight 移动光源：
　filters.Light[(n)].MoveLight(lightnumber, x, y, z, fAbsolute)

Ø BlendTrans滤镜：淡入淡出效果
格式：
style="filter:blendtrans(duration=秒)"

Ø RevealTrans滤镜：形状渐变效果
格式：
filter:revealtrans(duration = 秒 , transition= 代码 )
代码描述

0 Box in 矩形缩小
1 Box out 矩形扩大
2 Circle in 圆形缩小
3 Circle out 圆形扩大
4 Wipe up 向上擦除
5 Wipe down 向下擦除
6 Wipe right 向右擦除
7 Wipe left 向左擦除
8 Vertical blinds 垂直百页
9 Horizontal blinds 水平百页
10 Checkerboard across 棋盘状通过
11 Checkerboard down 棋盘状向下
12 Random dissolve 随机融化
13 Split vertical in 垂直向内分开
14 Split vertical out 垂直向外分开
15 Split horizontal in 水平向内分开
16 Split horizontal out 水平向内分开
17 Strips left down 左下条状
18 Strips left up 左上条状
19 Strips right down 右下条状
20 Strips right up 右上条状
21 Random bars horizontal 随机的水平栅栏
22 Random bars vertical 随机的垂直栅栏
23 Random effect (any of the other 23) 随机任意的上述一种效果