常用排版格式应用CSS汇总.doc

常用排版格式应用CSS外联css样式 内联css样式 链接到“地址”全视窗显示插入图片 list-style-type:none;去除表单符号line-height:200%;/*行高*/display:block;/*内联变区块*/display:inline;/*区块变成内联*/background:#fff url(./images/bg1.jpg)no-repeat left bottom;/*加入背景色 插入背景图片 只重复一次 居左 居底 */margin:0 auto; /*居中自适应*/float:left;/*区块左漂移*/clear:both;/*清除浮动*/margin-left:10px;/*离左边的就距离为10px*/text-align:center;/*文档排列居中*/text-decoration:none;/*文本无装饰*/text-indent:28px;/*首行缩进*/text-decoration:none;/*超链接不要下划线*/#contents ul li a:hover/*鼠标经过的颜色*/position:relative;/*相对定位参考点(以左上角)*/position:absolute;/*设置相对（绝对）定位*/border-collapse:collapse;/*表格显示单格线*/*定义行元素*/*列元素标签*/*定义列 元素*/调用动态样式表式样调用动态样式表式样letter-spacing:1px;/*文档间距*/overflow:auto;/*滚动条自动*/font-stype:/*字体设置*/cursor:polnter;/*手型*/text-indent:10px;/*文档前留空*/如果添加了Flash可以设置背景为透明的代码：position:relative;/*在父类设置基准点*/position:absolute;/*设定与基准点相对浮动*/text-indent: 数值px; 缩进注意事项: 一律小写; 尽量用英文；不加中杠和下划线尽量不缩写，除非一看就明白的单词主要的CSS样式表命名规则master.css模块columns.css文字module.css基本共用font.css表单base.css布局，版面forms.css补丁layout.css主题mend.css打印themes.css专栏print.css一、区块的命名头header标志logo内容content/container广告banner尾footer页面主体main导航nav热点hot侧栏sidebar新闻news栏目column下载download登录条loginbar子导航subnav投票：vote合作伙伴：partner注册：regsiter状态：status服务：service指南：guild栏目标题：title加入：joinus小技巧：tips提示信息：msg文章列表：list标签页：tab滚动：scroll内容：content菜单：menu子菜单：submenu版权：copyright页脚：footer友情链接：friendlink搜索：search页面外围控制整体布局宽度：wrapper左右中：left right center(二)注释的写法: (a)id的命名:(1)页面结构容器:container页尾：footer页头：header导航：nav内容：content/container侧栏：sidebar页面主体：main栏目：column(2)导航导航：nav摘要:summary主导航：mainbav标题:title子导航：subnav子菜单：submenu顶导航：topnav菜单：menu边导航：sidebar右导航：rightsidebar左导航：leftsidebar(3)功能标志：logo功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg图标:icon当前的:current广告：banner小技巧：tips登陆：login注释：note登录条：loginbar指南：guild注册：regsiter服务：service搜索：search热点：hot新闻：news合作伙伴：partner下载：download友情链接：link投票：vote版权：copyright页面外围控制整体布局宽度：wrapper左右中：left right center(四)class的命名:(4)标题栏样式,使用类别+功能的方式命名,如.barnews .barproduct 块元素(block element)* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易，也是css layout的主要标签* dl - 定义列表* fieldset - form控制组* form - 交互表单* h1 - 大标题* h2 - 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题* hr - 水平分隔线* isindex - input prompt* menu - 菜单列表* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）* ol - 排序表单* p - 段落* pre - 格式化文本* table - 表格* ul - 非排序列表内联元素(inline element)* a - 锚点* abbr - 缩写* acronym - 首字* b - 粗体(不推荐)* bdo - bidi override* big - 大字体* br - 换行* cite - 引用* code - 计算机代码(在引用源码的时候需要)* dfn - 定义字段* em - 强调* font - 字体设定(不推荐)* i - 斜体* img - 图片* input - 输入框* kbd - 定义键盘文本* label - 表格标签* q - 短引用* s - 中划线(不推荐)* samp - 定义范例计算机代码* select - 项目选择* small - 小字体文本* span - 常用内联容器，定义文本内区块* strike - 中划线* strong - 粗体强调* sub - 下标* sup - 上标* textarea - 多行文本输入框* tt - 电传文本* u - 下划线* var - 定义变量可变元素可变元素为根据上下文语境决定该元素为块元素或者内联元素。* applet - java applet* button - 按钮* del - 删除文本* iframe - inline frame* ins - 插入的文本* map - 图片区块(map)* object - object对象* script - 客户端脚本Font 字体属性font:font-style font-variant font-weight font-size font-family: 宋体,sans-serif; /*文字字体*/ Courier New, Courier, monospace,Times New Roman, Times, serif, Arial, Helvetica, sans-serif, Verdana常用字体font-size: 10px ; x-large;(特大) xx-small;(极小)，单位：PX、PD字体大小font-style: oblique;(偏斜体) italic;(斜体) normal;(正常) 样式font-weight: bold;(粗体) lighter;(细体) normal;(正常) 100-900font-variant: small-caps;(小型大写字母) normal;(正常) 变体line-height: normal;(正常) 单位：PX、PD、EM行高 百分比 letter-spacing:数值|inherit|normal字 间 距word-spacing:数值|inherit|normal单词间距font-variant:inherit|normal|small-cps 字体变形uppercase;(大写) lowercase;(小写) none;(无) 英文转换font-size-adjust:inherit|none 字体变形font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| 字体semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|widervertical-align: baseline;(基线) sub;(下标) 垂直对齐super;(下标) top; text-top; middle; bottom; text-bottom;word-spacing: normal; 数值 词间距white-space: pre;(保留) nowrap;(不换行) 空格背景属性： (background)background-color: #FFFFFF; 色彩background-image: url();图片background-repeat: no-repeat;不 重复background-attachment: fixed;(固定) scroll;(滚动) 滚动background-position: left;(水平) top(垂直) 位置;background:#000 url(.) repeat fixed left top; 简写方法letter-spacing: normal; 字间距 数值对齐 列表属性： (List-style)list-style-type:disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;list-style-position: outside;(外) inside; 位置list-style-image: url(.);图像 Position) 定位属性Position: absolute; relative; static; 定位属性visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/text-indent:数值|inherit段首空格text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ text-shadow:阴影颜色 16位色值text-indent: 数值px; 缩进vertical-align属性vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ 二、CSS边框空白 margin: margin-top margin-right margin-bottom margin-left边界留白padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白三、CSS符号属性：list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/ list-style-type:square; /*实心方形符号*/ list-style-image:url(/dot.gif); /*图片式符号*/ list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/ 四、CSS背景样式：background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/ background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-attachment: scroll/*滚动背景*/background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/ background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/五、CSS连接属性：a /*所有超链接*/ a:link /*超链接文字格式*/ a:visited /*浏览过的链接文字格式*/ a:active /*按下链接的格式*/ a:hover /*鼠标转到链接*/ 鼠标光标样式：链接手指 CURSOR: hand 十字体 cursor:crosshair 箭头朝下 cursor:s-resize 十字箭头 cursor:move 箭头朝右 cursor:move 加一问号 cursor:help 箭头朝左 cursor:w-resize 箭头朝上 cursor:n-resize 箭头朝右上 cursor:ne-resize 箭头朝左上 cursor:nw-resize 文字I型 cursor:text 箭头斜右下 cursor:se-resize 箭头斜左下 cursor:sw-resize 漏斗 cursor:wait 光标图案cursor:url(光标文件名.cur),text;边框属性： (Border) 方框属性： (Box)width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左border-width:; 边框宽度border-color:#;border：width style color; /*简写*/简写方法border-top : 1px solid #6699cc; /*上框线*/边框宽度border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/ 以上是建议书写方式,但也可以使用常规的方式 如下:border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/宽度值： thin|medium|thick|数值其他框线样式border-style: dashed; 虚线solid /*实线框*/ dotted /*虚线框*/ double /*双线框*/ groove /*立体内凸框*/ ridge /*立体浮雕框*/ inset /*凹框*/ outset /*凸边框vertical-align:inherit|top |bottom垂直对齐|text-top|text-bottom|baseline|middle|sub|super writing-mode:lr-tb|tb-rl书写方式display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group