Powered by md-Blog  文 - 篇  访客 -

CSS编写规范及注意事项


更新:2019-09-04 13:54:03  /  创建:2019-09-02 17:23:15  /  分类:HTML5+CSS3  / 
不要删除

1、样式重置(初始化)

/* reset.css */
html {
    overflow-x:auto;
    overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
    font-weight:400;
    margin:0;
    padding:0;
}
h1, h2, h3, h4, h4, h5 {
    margin:0;
    padding:0;
}
body {
    background-color:#FFFFFF;
    color:#666666;
    font-family:Helvetica,Arial,sans-serif;
    font-size:12px;
    padding:0 10px;
    text-align:left;
}
select {
    font-size:12px;
}
table {
    border-collapse:collapse;
}
fieldset, img {
    border:0 none;
}
fieldset {
    margin:0;
    padding:0;
}
fieldset p {
    margin:0;
    padding:0 0 0 8px;
}
legend {
    display:none;
}
address, caption, em, strong, th, i {
    font-style:normal;
    font-weight:400;
}
table caption {
    margin-left:-1px;
}
hr {
    border-bottom:1px solid #FFFFFF;
    border-top:1px solid #E4E4E4;
    border-width:1px 0;
    clear:both;
    height:2px;
    margin:5px 0;
    overflow:hidden;
}
ol, ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
}
caption, th {
    text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
    content:"";
}

简单一点,推荐您参照 normalize.css
https://necolas.github.io/normalize.css/latest/normalize.css

2、CSS样式表文件命名

  • 样式重置 reset.css
  • 主要的 master.css
  • 模块 module.css
  • 基本共用 base.css
  • 布局、版面 layout.css
  • 主题 themes.css
  • 专栏 columns.css
  • 文字 font.css
  • 表单 forms.css
  • 补丁 mend.css
  • 打印 print.css

3、CSS文件外部引入方式

<!-- 方式1 -->
<link rel="stylesheet" rev="stylesheet" href="CSS文件路径" type="text/css" media="all" />
<!-- 方式2 -->
<style type="text/css" media="screen">
 @import url("CSS文件路径");
</style>

4、CSS 基本格式

@charset 'UTF-8';
div {
    border: 1px solid #F00; /* 我是注释 */
}
/* Header */
h1 {}
h2 {}
...
/* End Header */

5、CSS书写顺序

  1. 位置属性(position, top, right, z-index, display, float等)
  2. 大小(width, height, padding, margin)
  3. 文字系列(font, line-height, letter-spacing, color- text-align等)
  4. 背景(background, border等)
  5. 其他(animation, transition等)

6、不要随意使用Id

  • id 尽量留给Js去操作,看到ID,说明有JavaScript与之操作。

7、连字符CSS选择器命名规范

  1. 长名称或词组可以使用中横线来为选择器命名。
  2. 不建议使用“_”下划线来命名CSS选择器,为什么呢?
  • 输入的时候少按一个shift键;
  • 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
  • 能良好区分JavaScript变量命名(JS变量命名是用“_”)

8、常用的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
  • 标签:tags
  • 文章列表:list
  • 提示信息:msg
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 指南:guide
  • 服务:service
  • 注册:regsiter
  • 状态:status
  • 投票:vote
  • 合作伙伴:partner

9、隐藏元素

display:nonevisibility:hidden

  • 隐藏一个元素可以通过把 display 属性设置为 "none",或把 visibility 属性设置为 "hidden"。但是请注意,这两种方法会产生不同的结果。
  • visibility:hidden 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

10、margin、padding 简写及方向说明

div{
    margin: 1px 2px 3px 4px; /* 上、右、下、左 */
    margin: 1px 2px 3px; /* 上、左右、下 */
    margin: 1px 2px; /* 上下、左右 */
    margin: 1px; /* 所有 */
}
不要删除

小站不易,感谢支持!