位置
保存到桌面添加到收藏夹设为首页

工作亚博手机二维码下载 热门标签: ?缩进???图解???Dreamweaver???样式???修改??

在Dreamweaver中怎么修改HTML文档或CSS样式的缩进量详细方法介绍(图解)

代码缩进在哪里?

在Dreamweaver中怎么修改HTML文档或CSS样式的缩进量详细方法介绍(图解)


2.png

修改缩进量



3.png

在这里可以修改CSS样式的缩进。点击这个CSS

按钮就可以看到窗口了。设置方法看文字说明就

知道了。(并且是实时预览的)


【CSS样式书写规范说明】


CSS 作为网页样式的描述语言,一直有着广泛的应用。为了使 CSS 代码风格保持一致,容易被理解和被维护。

虽然本文档是针对 CSS 设计的,但是在使用各种 CSS 的预编译器(如 less、sass、stylus 等)时,适用的部分也应尽量遵循本文档的约定。

[建议]?CSS?文件使用无?BOM?的?UTF-8?编码。

解释:

UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。

[强制] 使用?4?个空格做为一个缩进层级,不允许使用?2?个空格 或?tab?字符。

示例:

.selector?{????margin:?0;????padding:?0;
}

[强制]?选择器?与?{?之间必须包含空格。

示例:

.selector?{
}

[强制]?属性名?与之后的?:?之间不允许包含空格,?:?与?属性值?之间必须包含空格。

示例:

margin:?0;

[强制]?列表型属性值?书写在单行时,,?后必须跟一个空格。

示例:

font-family:?Arial,?sans-serif;

[强制] 每行不得超过?120?个字符,除非单行不可分割。

解释:

常见不可分割的场景为URL超长。

[建议] 对于超长的样式,在样式值的?空格?处或?,?后换行,建议按逻辑分组。

示例:

/*?不同属性值按逻辑分组?*/background:
????transparent?url(aVeryVeryVeryLongUrlIsPlacedHere)
????no-repeat?0?0;/*?可重复多次的属性,每次重复一行?*/background-image:
????url(aVeryVeryVeryLongUrlIsPlacedHere)
????url(anotherVeryVeryVeryLongUrlIsPlacedHere);/*?类似函数的属性值可以根据函数调用的缩进进行?*/background-image:?-webkit-gradient(
????linear,
????left?bottom,
????left?top,
????color-stop(0.04,?rgb(88,94,124)),
????color-stop(0.52,?rgb(115,123,162))
);

[强制] 当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行。

示例:

/*?good?*/.post,.page,.comment?{????line-height:?1.5;
}/*?bad?*/.post,?.page,?.comment?{????line-height:?1.5;
}

[强制]?>、+、~?选择器的两边各保留一个空格。

示例:

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

[强制] 属性选择器中的值必须用双引号包围。

解释:

不允许使用单引号,不允许不使用引号。

示例:

/*?good?*/article[character="juliet"]?{????voice-family:?"Vivien?Leigh",?victoria,?female;
}/*?bad?*/article[character='juliet']?{????voice-family:?"Vivien?Leigh",?victoria,?female;
}

[强制] 属性定义必须另起一行。

示例:

/*?good?*/.selector?{????margin:?0;????padding:?0;
}/*?bad?*/.selector?{?margin:?0;?padding:?0;?}

[强制] 属性定义后必须以分号结尾。

示例:

/*?good?*/.selector?{????margin:?0;
}/*?bad?*/.selector?{????margin:?0}

[强制] 如无必要,不得为?id、class?选择器添加类型选择器进行限定。

解释:

在性能和维护性上,都有一定的影响。

示例:

/*?good?*/#error,.danger-message?{????font-color:?#c00;
}/*?bad?*/dialog#error,p.danger-message?{????font-color:?#c00;
}

[建议] 选择器的嵌套层级应不大于?3?级,位置靠后的限定条件应尽可能精确。

示例:

/*?good?*/#username?input?{}.comment?.avatar?{}/*?bad?*/.page?.header?.login?#username?input?{}.comment?div?*?{}

[建议] 在可以使用缩写的情况下,尽量使用属性缩写。

示例:

/*?good?*/.post?{????font:?12px/1.5?arial,?sans-serif;
}/*?bad?*/.post?{????font-family:?arial,?sans-serif;????font-size:?12px;????line-height:?1.5;
}

[建议] 使用?border?/?margin?/?padding?等缩写时,应注意隐含值对实际数值的影响,确实需要设置多个方向的值时才使用缩写。

解释:

border?/?margin?/?padding?等缩写会同时设置多个属性的值,容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值,则应该分开设置。

示例:

/*?centering??horizontally?and?highlight?featured?ones?*/article?{????margin:?5px;????border:?1px?solid?#999;
}/*?good?*/.page?{????margin-right:?auto;????margin-left:?auto;
}.featured?{????border-color:?#69c;
}/*?bad?*/.page?{????margin:?5px?auto;?/*?introducing?redundancy?*/}.featured?{????border:?1px?solid?#69c;?/*?introducing?redundancy?*/}

[建议] 同一 rule set 下的属性在书写时,应按功能进行分组,并以?Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果)?的顺序书写,以提高代码的可读性。

解释:

  • yabo体育滚球新亚博体育Formatting Model 相关属性包括:position?/?top?/?right?/?bottom?/?left?/?float?/?display?/?overflow?等

  • Box Model 相关属性包括:border?/?margin?/?padding?/?width?/?height?等

  • Typographic 相关属性包括:font?/?line-height?/?text-align?/?word-wrap?等

  • Visual 相关属性包括:background?/?color?/?transition?/?list-style?等

另外,如果包含?content?属性,应放在最前面。

示例:

.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;
}


相关亚博手机二维码下载