格式和用法
格式
style(样式)
<style>...</style>
或
<style type="text/css">...</style>
格式
<style>
{ 属性1:值1; 属性2:值2 ; 属性3:值3 }
</style>
格式(例)
<style>
p { color:blue; font-size:10pt }
.red { color:red }
</style>
注释
/* css注释 */
挂文件1
<link href="../css/a.css" type="text/css" rel="stylesheet"/>
挂文件2
<style>@import url("css/myStyle.css");</style>
定义样式
定义已有的
p {...}
指定名称
.red {...}
使用:<span class=red>aaa</span>
指定ID
#red {...}
使用:<span id=red>aaa</span>
其它1
p.red {...}
有效:<p class=red>aaa</p>
无效:<div class=red>aaa</div>
其它2
table.red td {...}
<table class=red>中的<td>为上面定义的样式
直接使用样式
<p style="color:blue;font-size:10pt">...</p>
使用脚本
<style type="text/css">
.showCSS {
event:expression(
onmouseover = function()
{
this.style.backgroundColor = '#f0f0f0';
},
onmouseout = function()
{
this.style.backgroundColor = '#ffffff';
})
}
</style>
<div class="showCSS">把鼠标放上去试试看!^_^</div>
htc
Html Components(HTML 组件)。
a.htc 代码:
<public:attach event="onmouseover" onevent="element.blur()"/>
xx.htm
<Style>
a{behavior:url(a.htc)}
</style>
<a href="xx">xxx</a>
--------------------------------------------------------------------------------
常用样式
weight(宽度)/height(高度)
div { height:20; width:30px }
数值单位:(em, ex, px) 或 (cm, mm, in, pt, pc)
也可以输入百分比。
em The computed font-size.
ex The height of a lowercase "x".
px 像素, relative to the viewing device.
in 英寸 (1 inch = 2.54 centimeters).
cm 厘米.
mm 毫米.
pt 点 (1 point = 1/72 inches).
pc Picas (1 pica = 12 points).
font-family(字体)/font-size(字体大小)/font-weight(字体粗细)
粗细:normal bold bolder lighter 100 200...900
p {
font-family: "Palatino Linotype", "Georgia";
color:#B7687A; font-size:15pt; font-weight:bold;
}
text-align(对齐)
left(左) right(右) center(中) justify(两端对齐)
p {
text-align:center;
text-decoration: underline;
}
text-decoration(下划线等)
none(无) underline(下划线) overline(上划线) line-through(中划线) blink
text-indent(缩进)/padding(间隙)
缩进是指字开头的空白宽度,间隙是字与边框之间的距离。
.click1 { text-indent:50%; padding:5px }
border(边框)
none(无) dotted(点) dashed(虚线) solid(实线) double(双线) groove ridge inset window outset
input {
border: 1px solid pink;
background-color: lightblue;
}
color(颜色)/background-color(背景色)
p { color:#ff0000; background-color:blue }
background(背景图片)
.setUrl { background-image: url(sphere.jpg) }
BACKGROUND: url(http://img.baidu.com/pre.gif) no-repeat center center
.style2{background:ivory url(sphere.jpeg) no-repeat bottom right}
textarea {
BACKGROUND: url(images/menu.gif);
}
scrollbar(滚动条)
body, div {
scrollbar-arrow-color: #BBFF00;
scrollbar-track-color: #B3CFF2;
scrollbar-3dlight-color: #1A81C6;
scrollbar-highlight-color: #2999E3;
scrollbar-face-color: #146398;
scrollbar-shadow-color: #08283E;
scrollbar-darkshadow-color: #000;
}
body {
background-color:#16282e;
scrollbar-arrow-color: #698495;
scrollbar-track-color: #293941;
scrollbar-3dlight-color: #576b77;
scrollbar-highlight-color: #16282e;
scrollbar-face-color: #414e58;
scrollbar-shadow-color: #627c8c;
scrollbar-darkshadow-color: #313b42;
}
鼠标指针
default(箭头) crosshair(十字) hand(手) move(移动) wait(等待) help(问号) text(文字)
url(uri) 可以输入光标文件路径
display(显示)
none(不显示) block(显示)
(visibility:visible/hidden)(占空间)
--------------------------------------------------------------------------------
HTML元素样式
BODY
BODY {
font-size:10pt;
color: #4F4F05;
background-color: white;
scrollbar-arrow-color: white;
scrollbar-track-color: lightblue;
scrollbar-3dlight-color: darkred;
scrollbar-highlight-color: white;
scrollbar-face-color: darkred;
scrollbar-shadow-color: white;
scrollbar-darkshadow-color: darkred;
}
P(段落)
P { color: #4F4F05; text-indent: 20pt; }
H3 { font-family: "Palatino Linotype", "Georgia"; color: #568527; font-size:14pt; }
HR(分割线)
HR {
height: 1px; text-indent: 0pt;
color: #86965F;
}
DIV(层)
<DIV id=oBook style="overflow:scroll; width:200; height:300"></DIV>
TEXTAREA(大文本框)
<textarea id="text1" style="width:270;height:300;color:#5a7158;background-color:#ffffe3;border:1 dashed #687e9f">
A(超链接)
A:link { text-decoration:none; color:#FFFFFF }
A:visited { text-decoration:none; color:#E3F9F3 }
A:active { text-decoration:none; color:#FFFFFF }
A:hover { text-decoration:none; color:#FFC1C1 }
text-decoration: underline; // none
A {
font-family: "Arial", "Verdana"; color: #348700; font-weight: bold; font-size:10pt
}
a:link { color:#767552 }
a:visited { color:#7F894E }
a:active { color:#B7687A }
a:hover { color:#971136 }
A.variablelist {
font-family: "Arial", "Verdana"; color: #767552; font-size:10pt
}
BUTTON(按钮)
BUTTON {
color:FBFCFE;
background-color:#FBFCFE;
border:1 solid #747B96;
FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#CDD4ED', endColorStr='#9296AD', gradientType='0');
}
TABLE TR TD(表格)
vertical-align:auto /*top middle bottom*/
表格渐变
<table border=1 bgcolor="#EEDDFF"> // 淡紫色
<td bgcolor="#99FF00" // 草绿色
style="Filter:Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=0,StartY=0,FinishX=0,FinishY=100)">
从上往下渐变
Filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
从左上至右下渐变
Filter:Alpha(style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100);background-color:skyblue
从左往右渐变
Filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
从上往下渐变
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"
例
TABLE.tb {
font-size:10pt;
cursor:default;
cell-spacing:2; background-color:#767B98;
}
.tb TH {
padding:2; color:FBFCFE; border:1 solid #E7E9F6;
FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#BCC0D9', endColorStr='#9296AD', gradientType='0');
}
.tb TD {
background-color:#767B98;
padding:2; border:1 solid white;
}
.da TD{
color:#5D6371;
FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#C7CFE3', endColorStr='#B2B8CC', gradientType='0');
}
.db TD{
color:#5D6371;
FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#E6E9F7', endColorStr='#C7CFE3', gradientType='0');
}
.dc TD{
color:#B75702;
FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#F7D2AD', endColorStr='#FBA872', gradientType='0');
}
格式
style(样式)
<style>...</style>
或
<style type="text/css">...</style>
格式
<style>
{ 属性1:值1; 属性2:值2 ; 属性3:值3 }
</style>
格式(例)
<style>
p { color:blue; font-size:10pt }
.red { color:red }
</style>
注释
/* css注释 */
挂文件1
<link href="../css/a.css" type="text/css" rel="stylesheet"/>
挂文件2
<style>@import url("css/myStyle.css");</style>
定义样式
定义已有的
p {...}
指定名称
.red {...}
使用:<span class=red>aaa</span>
指定ID
#red {...}
使用:<span id=red>aaa</span>
其它1
p.red {...}
有效:<p class=red>aaa</p>
无效:<div class=red>aaa</div>
其它2
table.red td {...}
<table class=red>中的<td>为上面定义的样式
直接使用样式
<p style="color:blue;font-size:10pt">...</p>
使用脚本
<style type="text/css">
.showCSS {
event:expression(
onmouseover = function()
{
this.style.backgroundColor = '#f0f0f0';
},
onmouseout = function()
{
this.style.backgroundColor = '#ffffff';
})
}
</style>
<div class="showCSS">把鼠标放上去试试看!^_^</div>
htc
Html Components(HTML 组件)。
a.htc 代码:
<public:attach event="onmouseover" onevent="element.blur()"/>
xx.htm
<Style>
a{behavior:url(a.htc)}
</style>
<a href="xx">xxx</a>
--------------------------------------------------------------------------------
常用样式
weight(宽度)/height(高度)
div { height:20; width:30px }
数值单位:(em, ex, px) 或 (cm, mm, in, pt, pc)
也可以输入百分比。
em The computed font-size.
ex The height of a lowercase "x".
px 像素, relative to the viewing device.
in 英寸 (1 inch = 2.54 centimeters).
cm 厘米.
mm 毫米.
pt 点 (1 point = 1/72 inches).
pc Picas (1 pica = 12 points).
font-family(字体)/font-size(字体大小)/font-weight(字体粗细)
粗细:normal bold bolder lighter 100 200...900
p {
font-family: "Palatino Linotype", "Georgia";
color:#B7687A; font-size:15pt; font-weight:bold;
}
text-align(对齐)
left(左) right(右) center(中) justify(两端对齐)
p {
text-align:center;
text-decoration: underline;
}
text-decoration(下划线等)
none(无) underline(下划线) overline(上划线) line-through(中划线) blink
text-indent(缩进)/padding(间隙)
缩进是指字开头的空白宽度,间隙是字与边框之间的距离。
.click1 { text-indent:50%; padding:5px }
border(边框)
none(无) dotted(点) dashed(虚线) solid(实线) double(双线) groove ridge inset window outset
input {
border: 1px solid pink;
background-color: lightblue;
}
color(颜色)/background-color(背景色)
p { color:#ff0000; background-color:blue }
background(背景图片)
.setUrl { background-image: url(sphere.jpg) }
BACKGROUND: url(http://img.baidu.com/pre.gif) no-repeat center center
.style2{background:ivory url(sphere.jpeg) no-repeat bottom right}
textarea {
BACKGROUND: url(images/menu.gif);
}
scrollbar(滚动条)
body, div {
scrollbar-arrow-color: #BBFF00;
scrollbar-track-color: #B3CFF2;
scrollbar-3dlight-color: #1A81C6;
scrollbar-highlight-color: #2999E3;
scrollbar-face-color: #146398;
scrollbar-shadow-color: #08283E;
scrollbar-darkshadow-color: #000;
}
body {
background-color:#16282e;
scrollbar-arrow-color: #698495;
scrollbar-track-color: #293941;
scrollbar-3dlight-color: #576b77;
scrollbar-highlight-color: #16282e;
scrollbar-face-color: #414e58;
scrollbar-shadow-color: #627c8c;
scrollbar-darkshadow-color: #313b42;
}
鼠标指针
default(箭头) crosshair(十字) hand(手) move(移动) wait(等待) help(问号) text(文字)
url(uri) 可以输入光标文件路径
display(显示)
none(不显示) block(显示)
(visibility:visible/hidden)(占空间)
--------------------------------------------------------------------------------
HTML元素样式
BODY
BODY {
font-size:10pt;
color: #4F4F05;
background-color: white;
scrollbar-arrow-color: white;
scrollbar-track-color: lightblue;
scrollbar-3dlight-color: darkred;
scrollbar-highlight-color: white;
scrollbar-face-color: darkred;
scrollbar-shadow-color: white;
scrollbar-darkshadow-color: darkred;
}
P(段落)
P { color: #4F4F05; text-indent: 20pt; }
H3 { font-family: "Palatino Linotype", "Georgia"; color: #568527; font-size:14pt; }
HR(分割线)
HR {
height: 1px; text-indent: 0pt;
color: #86965F;
}
DIV(层)
<DIV id=oBook style="overflow:scroll; width:200; height:300"></DIV>
TEXTAREA(大文本框)
<textarea id="text1" style="width:270;height:300;color:#5a7158;background-color:#ffffe3;border:1 dashed #687e9f">
A(超链接)
A:link { text-decoration:none; color:#FFFFFF }
A:visited { text-decoration:none; color:#E3F9F3 }
A:active { text-decoration:none; color:#FFFFFF }
A:hover { text-decoration:none; color:#FFC1C1 }
text-decoration: underline; // none
A {
font-family: "Arial", "Verdana"; color: #348700; font-weight: bold; font-size:10pt
}
a:link { color:#767552 }
a:visited { color:#7F894E }
a:active { color:#B7687A }
a:hover { color:#971136 }
A.variablelist {
font-family: "Arial", "Verdana"; color: #767552; font-size:10pt
}
BUTTON(按钮)
BUTTON {
color:FBFCFE;
background-color:#FBFCFE;
border:1 solid #747B96;
FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#CDD4ED', endColorStr='#9296AD', gradientType='0');
}
TABLE TR TD(表格)
vertical-align:auto /*top middle bottom*/
表格渐变
<table border=1 bgcolor="#EEDDFF"> // 淡紫色
<td bgcolor="#99FF00" // 草绿色
style="Filter:Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=0,StartY=0,FinishX=0,FinishY=100)">
从上往下渐变
Filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
从左上至右下渐变
Filter:Alpha(style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100);background-color:skyblue
从左往右渐变
Filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
从上往下渐变
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"
例
TABLE.tb {
font-size:10pt;
cursor:default;
cell-spacing:2; background-color:#767B98;
}
.tb TH {
padding:2; color:FBFCFE; border:1 solid #E7E9F6;
FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#BCC0D9', endColorStr='#9296AD', gradientType='0');
}
.tb TD {
background-color:#767B98;
padding:2; border:1 solid white;
}
.da TD{
color:#5D6371;
FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#C7CFE3', endColorStr='#B2B8CC', gradientType='0');
}
.db TD{
color:#5D6371;
FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#E6E9F7', endColorStr='#C7CFE3', gradientType='0');
}
.dc TD{
color:#B75702;
FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#F7D2AD', endColorStr='#FBA872', gradientType='0');
}