CSS样式表范例

<script language=javascript> function click(){if(event.button==2) {alert('123木头人！８许动！>&<') }} function CtrlKeyDown(){if(event.ctrlKey) {alert('哇卡卡！８８８许动！')}} document.οnkeydοwn=CtrlKeyDown; document.οnmοusedοwn=click; document.write('

') </script>

/*CSS样式表范例*/

/* 此标签内是注释 */
/* 自定义的标签也可以是中文命名*/
/* 如果以"."开头的自定义标签(即适用于所有元素的标签)FrontPage会自动添加到样式列表框中*/

/*  1。在网页源代码里加入如下代码可以连接到样式表：  */
<link type="text/css" href="_private/style.css" rel="stylesheet"> 

/*  2。大小的单位     */
/*  px   象素         */
/*  pt   磅           */
/*  mm   毫米         */
/*  cm   厘米         */
/*  em   1em=12pt     */
/*  pc   1pc=12pt     */
/*  in   英寸         */

/*  3。角度的单位     */
/*  deg    度         */
/*  grad   梯度       */
/*  rad    弧度       */

/*  4。频率的单位     */
/*  Hz                */
/*  kHz               */

/*  设置前景色  */
.About_color        
 { color:rgb(255,0,0);
 }

/*  设置背景  */
.About_background
 { background-color:#00FF00;                       /*   设置背景色，none 是默认值，可以更改为颜色值*/
   background-image:url('../images/bluearrow.gif');/*   设置背景图片，url 里可以是绝对地址，也可以是相对地址 */
   background-repeat:repeat-x;       /*   设置背景图片的重复方式，可选值有*/
                       /*   repeat     沿X轴和Y轴两个方向重复显示图片            */
                                                   /*   repeat-x   沿X轴方向重复显示图片          */
                                                   /*   repeat-y   沿Y轴方向重复显示图片       */
                                                   /*   no-repeat  不重复图片          */
   background-attachment:fixed                     /*   设置水印，fixed 开启水印效果，scroll 关闭水印        */
 }

 /*  颜色可以是十六进制数值、rgb()函数或CSS承认的颜色名称。如：    */
 /*  none    透明      */
 /*  red     红色      */
 /*  green   绿色      */
 /*  blue    蓝色      */
 /*  white   白色      */

/*   设置字体  */
.About_font
 { font-family : "科信创意体","符号字体","Arial Black","华文新魏";  /* 设置字体，可以设定优先值，如果第一字体无效则引用第二字体。 */       
 font-size : 2em;           /* 设置字号                */
 font-style: normal;            /* 设置字体倾斜程度，可选值有：normal、italic、oblique     */
 font-weight : bold;            /* 设置字重程度，默认值为normal，可选值有：       */
               /* normal、bold、bolder、lighter 及数字表达式      */
 font-variant:normal        /* 可选值有：normal、small-caps。 */
               /* 一个使用了 small-caps 属性的元素中的小写字母看起来要    */
               /* 比正常的大写字母小一些。           */
 }
 
/*  设置文本属性  */
.About_text
 {text-indent:2em;        /* 设置文本缩进程度                */
 Alignment:center;        /* 设置文本对齐方式，可选值有：left、center、right、justify   */
 text-decoration :none;         /* 设置文本修饰方式，可选值有：          */
               /* none             无修饰           */
               /* underline        下划线           */
               /* overline   上划线           */
               /* line-through  删除线           */
               /* blink   闪烁           */ 
 text-shadow:black;        /* 设置文本阴影，可设为 black            */
 letter-spacing:auto;        /* 文本的字间距               */
 word-spacing:2em;             /* 设置单词间距                */
 text-transform:uppercase;      /* 设置大小写，可选值有：             */
               /* capitalize   每句句首成为大写          */
               /* uppercase    全部大写           */
               /* lowercase    全部小写           */
 }
 
/*  设置列表  */
.About_list
 {list-style-type:disc         /* 设置项目符号样式，可选值有：       */
                 /* disc   圆           */
                 /* circle  空心圆           */
                 /* square  方形          */
                 /* decimal  十进制数值         */
                 /* lower-roman  小写罗马数字       */
                 /* upper-roman  大写罗马数字         */
                 /* lower-alpha  小写希腊字母        */
                 /* upper-alpha  大写希腊字母       */
 /*    list-style-image:url(_private/bluearrow.gif) 设置项目符号为图片       */
 }
 
/*  设置边框   */
.About_border
 {     
/* 设置 box 的边框宽值   */
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:5px;
 border-left-width:5px;     /*   也可以用 border-width : 上 右 下 左  */
 
 /*  设置 box 的边框颜色值  */
 border-top-color:red;
 border-right-color:#CC0000;
 border-bottom-color:blue;
 border-left-color:#00CCCC;     /*   也可以用 border-color : 上 右 下 左  */
 
 /*  设置 box 的边框样式  */
 border-top-style:double;
 border-right-style:dotted;
 border-bottom-style:dashed;
 border-left-style:solid;      /*   也可以用 border-style : 上 右 下 左  */
 
 /*  border-style 的可选值有: */
 /*  none    无边框  */
 /*  solid   实线    */
 /*  double  双线    */
 /*  dotted  点线    */
 /*  dashed  长短线  */
 
 border-collapse: collapse;     /* 单元格边距无  */ 
 }

.About_line
 {
 line-height : 50px;  /* 设置行高  */
 }

.About_margin    
 {         
/*  margin 的属性 */
 margin-top : 5px;         /* 上 */
 margin-right : 2pt;       /* 右 */
 margin-botton : 2em;      /* 下 */
 margin-left : 2pt;        /* 左 */
           /*  当只有两个参数时，margin 表现为 上下、左右 */
           /*  当只有三个参数时，margin 表现为 上、左右、下 */
           /*  当有四个参数时，margin 表现为 上、右、下、左 */
 }
 
.About_padding    /* padding 值和 margin 值类似，它表示Box的边与Box内部文本之间的距离。 */
 {
 padding-top : 5px;         /* 上 */
 padding-right : 2pt;       /* 右 */
 padding-botton : 2em;      /* 下 */
 padding-left : 2pt;        /* 左 */
 }

/* 定义元素位置 */
.About_position{

 position:static;     /*定义元素位置，可选值有：*/
          /*static(固有位置)、relative(屏幕相对位置)、absolute(屏幕绝对位置)*/
         
 direction:ltr;      /*决定Box的排列方式，可选值有：ltr、rtl*/
 
 float:none;       /*决定Box的飘浮位置，可选值有：left、right、none*/
 
 clear:none;       /*禁止其它元素飘浮在Box旁边位置，可选值有：*/
          /*left、right、both、none*/
         
 top:auto;       /*精确定义元素的位置*/
 right:auto;
 botton:auto;
 left:auto;
 
 z-index:auto;      /*CSS允许元素的重叠显示，此属性定义元素的层次关系，值可为数字*/
 
 width:auto;       /*精确定义元素的宽度*/
          /*CSS允许有 max-width(最大宽度) 属性和 min-width(最小宽度) 属*/
          /*性，把元素宽度定义在最大宽度和最小宽度之间*/
         
 height:auto;      /*精确定义元素的高度*/
          /*CSS允许有 max-height(最大高度) 属性和 min-height(最小高度) */
          /*属性，把元素宽度定义在最大高度和最小高度之间*/
         
 overflow:visible;     /*设置当元素不足显示全部内容时的状态，可选值有：*/
          /*visible(扩大面积以显示所有内容)*/
          /*hidden(隐藏超出范围的内容)*/
          /*scroll(在元素的右边显示一个滚动条)*/
          /*auto(在需要时显示滚动条)*/
 }
 
 
 
/************************************************************************************/
/*html中的标签*/
/************************************************************************************/

/*超链接：常规*/
A:link {
 COLOR: #0033cc; text-decoration: none
}

/*超链接：*/
A:visited {
 COLOR: #0033cc; text-decoration: none
}

/*超链接：已访问*/
A:active {
 COLOR: #ff0000; text-decoration: none
}

/*超链接：悬停*/
A:hover {
 COLOR: #000000; text-decoration: underline
}
 
/*定义悬停于元素的鼠标样式*/
About_Cursor{
 cursor:auto;  /*默认*/
 
 /*可选值：*/
 /*default:  普通鼠标样式*/
 /*hand:   手型*/
 /*pointer:  手型*/
 /*crosshair: 细十字架*/
 /*move:   移动*/
 /*text:   文本*/
 /*wait:   忙*/
 /*help:   帮助*/

 /*e-resize:  一些改变大小的鼠标样式*/
 /*ne-resize:*/
 /*nw-resize:*/
 /*n-resize:*/
 /*se-resize:*/
 /*sw-resize:*/
 /*s-resize:*/
 /*w-resize:*/
 
 /*<url>:  自定义*/

 }
/*设置滚动条样式*/
body {
 margin:0px;
 scrollbar-face-color: #DEE3E7;
 scrollbar-highlight-color: #FFFFFF;
 scrollbar-shadow-color: #DEE3E7;
 scrollbar-3dlight-color: #D1D7DC;
 scrollbar-arrow-color:  #006699;
 scrollbar-track-color: #EFEFEF;
 scrollbar-darkshadow-color: #98AAB1;
}

=======================================

/* 评论相关，设置这个值是为了透明背景 */
.commentsTable{
    background-color: #000;
}

/* 隐藏“标语”，我用了自己的图作背景 */
.headerText{
    display:none;
}

/* 最上面的整个Banner*/
.header{
    border:none;
    height:200px;
    background: url("") no-repeat;/*-----*/
}

/* 设置域为a中的文本 */
a{
    font-family : 宋体;
    font-size:17px;
    color: darkgreen;
    text-decoration: none;
}
a:link{
    color: mediumvioletred;
    text-decoration: none;
}
a:visited{
    color: darkgrey;
    text-decoration: none;
}
a:active{
    color: darkgrey;
}a:hover{
    color: darkgrey;
    text-decoration: underline;
}

/*左边导航栏内容*/
#leftcontent{
    border:none;
    padding-top: 99;
    background-color: transparent; 
}

/* “文章”、“相册”等 */
.listtitle{
    font-family: 华文行楷;
    color: #6666CC;
    background: none;
}

/* 不显示WMP播放器，关于播放器的设置是在HTML里做的 */
#MediaPlayer{
    display:none;
}

/* 整个文章的内容栏 */
#centercontent{
    padding-top:0;
    font-size:100px;
}

/* 日历表，现在我用的是模板带的 */
 .CalTitle{
    background-color: transparent;
}
.CalDayHeader{
    color: #993366;
    font-family:宋体;
    background-color: transparent;
}
.entrylist{
    background-color: transparent;
    font-family:宋体;
    font-size:130%;
    color:green;
    border:none;
}

/* 整个版面表的设置 */
table{
    filter:alpha(opacity=60);
    border-collapse : collapse;
}

/* CSDN首页、CSDN社区、CSDN技术中心等等东西 */
#mytopmenu{
    display:none;
}
#mylinks{
    display:none;
}

/* 页面最下方的Powered by */
.footer{
    display:none;
}

/* 隐藏“特别推荐” */
#csdn_zhaig_ad_yahoo{
    display:none;
}

/* 中间的主版面 */
body{
    background: url("") ;/*-----*/
    cursor: url('');/*-----*/
    font-size: 0.8em;
    font-family: Geneva, Arial, Helvetica, sans-serif;
}

/* 评论栏相关 */
#comments{
    padding-left: 40px;
    font-size: 10pt;
    background-color: #000; 
}
#CommentForm{
    background-color: #000;
    width:500;
    background: url("") no-repeat;}/*-----*/

/* 公告栏 */
.newsItem{
    font-family: 宋体;
    color:black;
}

/* 所有img图
img{
    filter: invert();
}*/

/* 文章正文 */
.post{
    background-color: #000;
    padding-bottom: 5px;
    padding-top: 5px;
    line-height:120%;
    color: white;
}
.postFoot{
    color:white;/*#33CCFF*/
}
/* 文章摘要 */
.postText{
    color:white;