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

工作日志 热门标签:  缩进   图解   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 <article class="page"> 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(视觉效果) 的顺序书写,以提高代码的可读性。

解释:

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


相关日志