CSS学习一

格式和用法
格式
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');
}