CSS

@charset

样式文件必须写上 @charset 规则,并且一定要在样式文件的第一行首个字符位置开始写,编码名用 UTF-8

@charset "UTF-8";
  • UTF-8 编码:为世界统一编码,可以兼容全世界的操作系统,不会出现乱码情况。缺点是体积稍大点。

  • **gb2312 编码:**国外的浏览者可能会出现乱码,获提示安装语言包。一般,网站提供给全球看的一般用UTF-8,仅仅针对国内的用gb2312 就可以了。体积稍小点,因为程序产生的网页文本使用 ANSI 编码格式,会比 UTF-8 文本编码节省一些体积,访问速度会稍微快一点点。

  • 使用 UTF-8 编码有 2 个要注意:

    • 网页的 meta 必须有这句:<meta charset="UTF-8">

    • 网页的文本格式必须保存为 UTF-8 格式

代码风格

  • class用"-"连接,id用驼峰命名。

  • 使用展开格式书写样式,即一个属性一行,每个属性声明末尾都要加分号。

  • **选择器:**尽量少用通用选择器 *

  • 不使用 ID 选择器。

  • 不使用无具体语义定义的标签选择器。

  • **代码缩进:**统一使用两个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置)。

  • 左括号与类名之间一个空格,冒号与属性值之间一个空格。

  • 逗号分隔的取值,逗号之后一个空格。

  • 为单个css选择器或新申明开启新行。

  • 十六进制数值能用简写的尽量用简写,例如使用 #fff 替代 #ffffff

  • 不要为 0 指明单位。

  • 去掉小数点前面的 0。

  • css属性值需要用到引号时,统一使用单引号。

  • 图片引入不需要引号。

属性书写顺序

  • 布局定位属性:display、position、float、clear、visibility、overflow。

  • 自身属性:width、height、margin、padding、border、background。

  • 文本属性:color、font、text-decoration、text-align、vertical-align、white- space、break-word。

  • 其他属性(CSS3):content、cursor、border-radius、box-shadow、text-shadow、background: linear-gradient …。

    body {
        /* 定位属性 */
        display: flex;
        position: absolute;
        float: left;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        clear: both;
        z-index: 100;
        content: '';
        list-style: square;
        visibility: visible;
    
        /* 自身属性 */
        width: 100px;
        height: 100px;
        border: 10px solid #fff;
        padding: 10px;
        margin: 10px;
        background: #fff;
    
        /* 文字样式 */
        color: white;
        font-family: '微软雅黑';
        font-size: 14px;
        font-style: normal;
        font-weight: bold;
        font-varient: normal;
    
        /* 文本属性 */
        text-align: center;
        vertical-align: middle;
        text-transform: none;
        text-indent: 2px;
        text-decoration: underline;
        letter-spacing: 10px;
        word-spacing: 10px;
        white-space: 10px;
        text-overflow: ellipsis;
    }
  • 有浏览器前缀的属性在前,标准属性在后。

    .border-radius {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        -ms-border-radius: 10px;
        border-radius: 10px;
    }

最后更新于