css编码规范、空格占位符

素颜马尾好姑娘i 2021-09-29 19:18 620阅读 0赞

这里我就不复制粘贴了内容了，请移步https://segmentfault.com/a/1190000002460968

记录几个我平时不太注意的地方：

1.选择器与\{ 之间包含空格；eg：

.selector {}

2.属性名与之后的：之间不允许包含空格，：与属性值之间必须包含空格；eg:

margin: 0;

3.列表型属性值书写在单行是， ，后必须跟一个空格;eg:

font-family:Arial, sans-serif;

4.当一个rule包含多个selector时，每个选择器声明必须独占一行；eg：

.post,
    　.page,
    　.comment {
         
    　　　　line-height:1.5;
    　}

5.选择器“>”“+”“~”的两边各保留一个空格

main > nav {
         
        　　padding: 10px;
    　　}
    
    　　label + input {
         
       　　 margin-left: 5px;
    　　}
    
    　　input:checked ~ button {
         
       　　 background-color: #69C;
    　　}

6.属性书写顺序

布局方式、位置 > 尺寸 > 文本相关 > 视觉效果

布局方式、位置相关：position/top/right/float/display/overflow等

尺寸相关：border/margin/padding/width/height等

文本相关：font/line-height/text-align/word-wrap等

视觉效果：background/color/transition/list-style等

注意：如果包含content属性，应放在最前面。eg:

.sidebar {
        /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
        position: absolute;
        top: 50px;
        left: 0;
        overflow-x: hidden;
    
        /* box model: sizes / margins / paddings / borders / ...  */
        width: 200px;
        padding: 5px;
        border: 1px solid #ddd;
    
        /* typographic: font / aligns / text styles / ... */
        font-size: 14px;
        line-height: 20px;
    
        /* visual: colors / shadows / gradients / ... */
        background: #f5f5f5;
        color: #333;
        -webkit-transition: color 1s;
           -moz-transition: color 1s;
                transition: color 1s;
    }

7.2D位置，必须同时给出水平和垂直方向的位置，2D位置初始值为0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为center,为避免理解上的错误，同时给出两个方向的值较好；eg:

body {
         
       　　 background-position: center top; /* 50% 0% */
    　　}

8.字体名称一律用英文，放在引号中，常见字体如下：

<table style="width:587px;"> 
 <thead> 
  <tr> 
   <th>字体</th> 
   <th>操作系统</th> 
   <th>Family Name</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>宋体 (中易宋体)</td> 
   <td>Windows</td> 
   <td>SimSun</td> 
  </tr> 
  <tr> 
   <td>黑体 (中易黑体)</td> 
   <td>Windows</td> 
   <td>SimHei</td> 
  </tr> 
  <tr> 
   <td>微软雅黑</td> 
   <td>Windows</td> 
   <td>Microsoft YaHei</td> 
  </tr> 
  <tr> 
   <td>微软正黑</td> 
   <td>Windows</td> 
   <td>Microsoft JhengHei</td> 
  </tr> 
  <tr> 
   <td>新宋体</td> 
   <td>Windows</td> 
   <td>NSimSun</td> 
  </tr> 
  <tr> 
   <td>仿宋</td> 
   <td>Windows</td> 
   <td>FangSong</td> 
  </tr> 
  <tr> 
   <td>楷体</td> 
   <td>Windows</td> 
   <td>KaiTi</td> 
  </tr> 
  <tr> 
   <td>仿宋_GB2312</td> 
   <td>Windows</td> 
   <td>FangSong_GB2312</td> 
  </tr> 
  <tr> 
   <td>楷体_GB2312</td> 
   <td>Windows</td> 
   <td>KaiTi_GB2312</td> 
  </tr> 
  <tr> 
   <td>新细明体</td> 
   <td>Windows</td> 
   <td>PMingLiU</td> 
  </tr> 
  <tr> 
   <td>细明体</td> 
   <td>Windows</td> 
   <td>MingLiU</td> 
  </tr> 
  <tr> 
   <td>华文黑体</td> 
   <td>Mac/iOS</td> 
   <td>STHeiti</td> 
  </tr> 
  <tr> 
   <td>冬青黑体</td> 
   <td>Mac/iOS</td> 
   <td>Hiragino Sans GB</td> 
  </tr> 
  <tr> 
   <td>苹果俪中黑</td> 
   <td>Mac/iOS</td> 
   <td>Apple LiGothic Medium</td> 
  </tr> 
  <tr> 
   <td>苹果俪细宋</td> 
   <td>Mac/iOS</td> 
   <td>Apple LiSung Light</td> 
  </tr> 
  <tr> 
   <td>文泉驿正黑</td> 
   <td>Linux</td> 
   <td>WenQuanYi Zen Hei</td> 
  </tr> 
  <tr> 
   <td>文泉驿微米黑</td> 
   <td>Linux</td> 
   <td>WenQuanYi Micro Hei</td> 
  </tr> 
  <tr> 
   <td>隶书</td> 
   <td>Windows</td> 
   <td>LiSu</td> 
  </tr> 
  <tr> 
   <td>幼圆</td> 
   <td>Windows</td> 
   <td>YouYuan</td> 
  </tr> 
  <tr> 
   <td>华文细黑</td> 
   <td>Windows</td> 
   <td>STXihei</td> 
  </tr> 
  <tr> 
   <td>华文楷体</td> 
   <td>Windows</td> 
   <td>STKaiti</td> 
  </tr> 
  <tr> 
   <td>华文宋体</td> 
   <td>Windows</td> 
   <td>STSong</td> 
  </tr> 
  <tr> 
   <td>华文中宋</td> 
   <td>Windows</td> 
   <td>STZhongsong</td> 
  </tr> 
  <tr> 
   <td>华文仿宋</td> 
   <td>Windows</td> 
   <td>STFangsong</td> 
  </tr> 
  <tr> 
   <td>方正舒体</td> 
   <td>Windows</td> 
   <td>FZShuTi</td> 
  </tr> 
  <tr> 
   <td>方正姚体</td> 
   <td>Windows</td> 
   <td>FZYaoti</td> 
  </tr> 
  <tr> 
   <td>华文彩云</td> 
   <td>Windows</td> 
   <td>STCaiyun</td> 
  </tr> 
  <tr> 
   <td>华文琥珀</td> 
   <td>Windows</td> 
   <td>STHupo</td> 
  </tr> 
  <tr> 
   <td>华文隶书</td> 
   <td>Windows</td> 
   <td>STLiti</td> 
  </tr> 
  <tr> 
   <td>华文行楷</td> 
   <td>Windows</td> 
   <td>STXingkai</td> 
  </tr> 
  <tr> 
   <td>华文新魏</td> 
   <td>Windows</td> 
   <td>STXinwei</td> 
  </tr> 
 </tbody> 
</table>

font-family的最后指定一个字体族（serif/sans-serif）,eg：

.article {
         
        font-family: Arial, sans-serif;
    }
    
    /* Specific for most platforms */
    h1 {
         
        font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
    }

9.字号：需要在windows平台显示的中文内容分类，字号不小于12px;(由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认)

10.字体风格：需要在 Windows 平台显示的中文内容，不要使用除 `normal` 外的 `font-style`。其他平台也应慎用。（由于中文字体没有 italic 风格的实现，所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体)，小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。）

11.空位符整理

&\#32; == 普通的英文半角空格

&\#160; == &nbsp; == &\#xA0; == no-break space （普通的英文半角空格但不换行）

&\#12288; == 中文全角空格 （一个中文宽度）

&\#8194; == &ensp; == en空格 （半个中文宽度）

&\#8195; == &emsp; == em空格 （一个中文宽度）

&\#8197; == 四分之一em空格 （四分之一中文宽度）

相比平时的空格（&\#32;），&nbsp拥有不间断（non-breaking）特性。即连续的&nbsp会在同一行内显示。即使有100个连续的&nbsp，浏览器也不会把它们拆成两行。

12.css3选择器

:before ,::after 通过 css 模拟出来html标签的效果
    注意：必须有content属性才行
    ::first-letter  选中第一个字母
    ::first-line    选中第一行的伪元素的选择器

转载于:https://www.cnblogs.com/wj19940520/articles/6927202.html