Unbending Notes

DIV+CSS 命名规范

1.CSS ID 的命名
外　套：　　wrap
主导航：　　mainnav
子导航：　　subnav
页　脚：　　footet
整个页面：　content
页　眉：　　header
页　脚：　　footer
商　标：　　label
标　题：　　title
主导航：　　mainbav（globalnav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsidebar
右导航：　　rightsidebar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1 content
菜单容量：　menu container
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadcrumb(即页面所处位置导航提示）
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　Login
功能区：　　shop(如购物车，收银台)
当前的　　　current

2.另外在编辑样式表时可用的注释可这样写：
<-- Footer -->
内容区
<-- End Footer -->

3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css 

CSS简略写法总结

颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸
通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1； 
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left 
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em; 

边框(border)
边框的属性如下：

border-width:1px; 
border-style:solid; 
border-color:#000; 
可以缩写为一句：border:1px solid #000; 

语法是border:width style color; 

背景(Backgrounds)
背景的属性如下：

background-color:#f00; 
background-image:url(/oblog313/background.gif); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:0 0; 
可以缩写为一句：background:#f00 url(/oblog313/background.gif) no-repeat fixed 0 0; 

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

color: transparent 
image: none 
repeat: repeat 
attachment: scroll 
position: 0% 0% 
字体(fonts)
字体的属性如下：

font-style:italic; 
font-variant:small-caps; 
font-weight:bold; 
font-size:1em; 
line-height:140%; 
font-family:"Lucida Grande",sans-serif; 
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

list-style-type:square; 
list-style-position:inside; 
list-style-image:url(/oblog313/image.gif); 
可以缩写为一句：list-style:square inside url(/oblog313/image.gif);

/*共用部分*/
body {
    margin: 0px;
    scrollbar-base-color: #F9F9F9;
    scrollbar-arrow-color: #5B5B5B;
    font: 12px Tahoma, Verdana;
    background-color: #808284;
    color: #000000;
}

table {
    font: 12px Tahoma, Verdana;
    color: #333333;
    empty-cells: show;
    border-collapse: separate !important;
    border-collapse: collapse;
}

input, select, textarea {
    font: 12px Tahoma, Verdana;
    color: #333333;
    font-weight: normal;
    background-color: #F9F9F9;
    border: 1px solid #EEEEEE;
}

a {
    text-decoration: none;
    color: #000000;
}

a:hover {
    color:#000000;
    text-decoration: none;
}

.smalltxt {
    font: 12px Arial, Tahoma !important;
    font: 12px Arial, Tahoma;
}

/*字体控制*/
.bold {
    font-weight: bold;
}

/*顶部背景*/
.top_bg {
    float:left;
    width:1002px; 
    background:url(../../images/default/pic/top_bg.jpg) repeat-x; 
    height:18px;
}

/*头部背景*/
.top_head {
    float:left; 
    width:1002px; 
    background:url(../../images/default/pic/top_b.jpg) repeat-x; 
    height:150px;
}

/*菜单背景*/
.menu_bg {
    float:left; 
    width:1002px; 
    background:url(../../images/default/pic/menu_bg.jpg) repeat-x; 
    height:32px;
}

/*菜单*/
.menu_txt {
    float: center;
    text-align: center;
    padding-top: 8px;
}

/*菜单链接*/
.menu_link {
    color:#FFFFFF;
    padding-top: 8px !important;
    padding-top: 8px;
}
.menu_link a {
    color:#FFFFFF;
    padding-top: 8px !important;
    padding-top: 8px;
    text-decoration: none;
}
.menu_link a:hover {
    color:#000000;
    padding-top: 8px !important;
    padding-top: 8px;
    text-decoration: none;
}

/* head */

.header {
    font: 12px Arial, Tahoma !important;
    font-weight: bold !important;
    font: 12px Arial, Tahoma;
    font-weight: bold;
    color: #FFFFFF;
    background-image: url("../../images/default/header_bg.gif");
    height: 28px;
    padding-left: 10px;
}

.header td {
    padding-left: 10px;
}

.header a {
    color: #FFF;
}

.header input {
    background:none;
    vertical-align: middle;
    height: 16px;
}

干吗删我的贴？

马甲出来捧场还不允许别人说了？

发表评论：