(一)常用的CSS命名规则 　　头：header 　　内容：content/container 　　尾：footer 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体布局宽度：wrapper 　　左右中：left right center 　　登录条：loginbar 　　标志：logo 　　广告：banner 　　页面主体：main 　　热点：hot 　　新闻：news 　　下载：download 　　子导航：subnav 　　菜单：menu 　 子菜单：submenu 　　搜索：search 　　友情链接：friendlink 　　页脚：footer 　　版权：copyright 　　滚动：scroll 　　内容：content 　　标签页：tab 　　文章列表：list 　　提示信息：msg 　　小技巧：tips 　　栏目标题：title 　　加入：joinus 　　指南：guild 　　服务：service 　　注册：regsiter 　　状态：status 　　投票：vote 　　合作伙伴：partner (二)注释的写法: 　　/* Footer */ 　　内容区 　　/* End Footer */ (三)id的命名: 　　(1)页面结构 　　容器: container 　　页头：header 　　内容：content/container [...]

/* mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide – http://mozilla.org/contribute/writing/markup) */ /* Suggested order: //显示属性 * display * list-style * position * float * clear //自身属性 * width * height * margin * padding * border * background //文本属性 * color * font * text-decoration * text-align * [...]

很早就想为CSS做个图,可惜一没时间二挺复杂,今天写了操作性之后,也懒得做活了,就打开fireworks开始作图啦!下面是关于整个CSS的: 说明: 现阶段大家使用的CSS,分两中模式:Quirks mode和Strict mode, Quirks mode自然是浏览器生产商自己的模式,其中含有对CSS的解析,私有CSS. 标准模式(strict mode),当然有W3C制定,现在浏览器普遍支持的和我们使用的是CSS 2.1 规范(CSS 2.1 Specification). 关于这两种模式的详细情况可去阅读Quirks mode and strict mode 根据Quirks mode诞生了CSS hack & filters,过滤浏览器,使的为网页设计CSS样式的时候,能够兼容各种浏览器. 关于属性的: 属性名可以包含以下信息 取值: 规定的值 & 语法 初始值: 初始的值 应用于:可以应用于哪些元素 继承性: 是否拥有继承性 百分率:百分比值是怎么工作的? 媒体: 可用于那种设备 优先权:后者覆盖前者 !important声明:声明优先权(IE5.X 6.0 不支持) 说明一下CSS的优先权,old9解释的比较详细,包括选择符的优先权,!important声明,@import规则,内嵌CSS

用了一段CSS 布局设计网页,发现自己的命名有点混乱,完全按照自己的想法命名,虽然没什么影响,有不给别人看源文件,但是工作室有时候和团队合作完成项目的时候,就遇到麻烦了,要修改一个地方相当的费事.所以还是有个标准比较好啊!在网上看到的一个相关的参考,再加上平时也研究别人的代码,发现这样的命名使用很广泛!我再加上自己的经验,希望对看到这篇文章的人能有用! 命名参考 常用的CSS命名规则： 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如user-list 常用代码结构： div：主要用于布局，分割页面的结构 ul/ol：用于无序/有序列表 span：没有特殊的意义，可以用作排版的辅助，例如 程序代码 (4.23)天幻网六周年天幻网六周年天幻网六周年天幻网六 然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果 h1-h6：标题 h1-h6 根据重要性依次递减 h1位最重要的标题 label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西，例如： <label for="user-password">密　码</label> <input type="password" name="password" id="user-password" /> fieldset & legend：fildset套在表单外，legend用于描述表单内容。例如： <form> <fieldset> <legend>title</legend> <label for="user-password">密　码</label> <input type="password" name="password" id="user-password" /> </fieldset> </form> dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签，例如 <dl> <dt>什么是CSS?</dt> <dd>CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。</dd><dd> <dt>什么是XHTML？</dt> [...]

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 程序代码 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义 css 程序代码 #wrap{white-space:normal; width:200px; } IE浏览器 连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 html 程序代码 abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111 css #wrap{word-break:break-all; width:200px;} 或者 #wrap{word-wrap:break-word; width:200px;} Firefox浏览器 连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条 html 程序代码 abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111 css 程序代码 #wrap{word-break:break-all; width:200px; overflow:auto;} 对于table元素 IE浏览器 1. 使用 table-layout:fixed;强制table的宽度,多余内容隐藏 <table style="table-layout:fixed" width="200"> <tr> <td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss </td> </tr> </table> 2. 使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word [...]