|
在css的构建进程中，我们常常会界说某种属性，而这些属性又在多处行使。如字体的巨细，颜色等。那么我们怎么样才可以最大限度的重用呢？
本接头中，罗列行使这两个属性（字体巨细，颜色）的例子。如我们必要界说一段赤色，字体巨细为14px的段落。
凡是可以这样：
html:
<p class="paragraph">这是赤色，字体巨细为14px的段落</p>
css:
.paragraph{
font-size:14px;
color:red
}
结果：
这是赤色，字体巨细为14px的段落
而当我们有其它一个可能几个沟通的段落（可能都是行使沟通属性：赤色，字体巨细为14px的笔墨）时，我们只要在html中界说沟通的class就可以轻松的实现。
html:
<p class="paragraph">这是另一个赤色，字体巨细为14px的段落</p>
结果：
这是另一个赤色，字体巨细为14px的段落
然而，当有一个蓝色，字体巨细同样为14px的段落时，我们不得不从头界说一个样式。
html:
<p class="paragraph_another">这是一个蓝色，字体巨细为14px的段落</p>
css:
.paragraph_another{
font-size:14px;
color:blue
}
结果：
这是一个蓝色，字体巨细为14px的段落
在这里，很明明的，字体为14px这个属性我们一再了。那么我们要怎么才可以重用这个样式呢？
我是这样做的：引入一个我称之为“class拼接”的技能（这样的用法早就用了，只不外我这样称号罢了）。
起首界说一个字体巨细为14px的样式
.font_one{
font-size:14px;
}
然后再界说自身的样式：
paragraph{
color：red
}
paragraph_another{
color：blue
}
在hmtl中，我们这样应用：
<p class="paragraph font_one">这是另一个赤色，字体巨细为14px的段落</p>
<p class="paragraph_another font_one">这是一个蓝色，字体巨细为14px的段落</p>
结果：
这是一个赤色，字体巨细为14px的段落
这是一个蓝色，字体巨细为14px的段落
同理，我们可以拼接其他样式，如字体加粗。
新建一个css
.font_a{
font-weight:bold;
}
html:
<p class="paragraph font_one font_a">这是另一个赤色，加粗，字体巨细为14px的段落</p>
<p class="paragraph_another font_one font_a">这是一个蓝色，加粗，字体巨细为14px的段落</p>
结果：
这是一个赤色，加粗，字体巨细为14px的段落
这是一个蓝色，加粗，字体巨细为14px的段落
这样，在其他段落中，要想获得什么样的结果，只要在html代码拼接相对应的class名称即可。
这种要领的利益：在构建页面的工程中，可以大大的进步速率，全局修改机动，低落了css文件体积。
弱点：局部样式修改不机动，修改时，你必要在html代码中删除相对应的class名称，可能插手独一标识，然后在独一标识中写入新的样式，去包围旧的。
当修改一两处时，尚可行，当存在大量需修改的处所时，显然是行不通的。
譬喻：我要做到这样的结果，怎么样算是较量美满的要领呢？
这是另一个赤色，加粗，字体巨细为14px的段落。标识符：paragraph
这是一个蓝色，加粗，字体巨细为14px的段落。标识符：paragraph_another
这是一个只用到加粗，字体巨细为14px样式的段落。标识符：paragraph_a
这是一个赤色，没有加粗，字体巨细为12px的段落标。识符：paragraph_b
这是一个加粗，字体巨细为12px的段落。标识符：paragraph_c
要领一：求同存异：
css：
.garagaraph,
.garagraph_another，
.paragraph_a{
font-size:14px;
font-weight:bold
}
然后别离界说：
.garagraph,
.paragraph_b{
color:red;
}
.garagraph_another{
color:blue
}
.paragraph_c{
font-weight:bold;
}
html:
<p class="paragraph ">这是另一个赤色，加粗，字体巨细为14px的段落。标识符：paragraph</p>
<p class="paragraph_another">这是一个蓝色，加粗，字体巨细为14px的段落。标识符：paragraph_another</p>
<p class="paragraph_a">这是一个只用到加粗，字体巨细为14px样式的段落。标识符：paragraph_a</p>
<p class="paragraph_b">这是一个赤色，没有加粗，字体巨细为12px的段落标。识符：paragraph_b</p>
<p class="paragraph_c">这是一个加粗，字体巨细为12px的段落。标识符：paragraph_c</p>
要领二：预留后路，就是在拼接class时，也给配置上独一标识，在必要修改时，按照标识符来添加新的样式或包围不要的样式，而不必要修改html。
css：
.font_size_one{
font-size:14px;
}
.font_weight_a{
font-weight:bold;
}
.color_one{
color:blue
}
.color_two{
color:red;
}
html:
<p class="color_two font_weight_a font_size_one paragraph ">这是另一个赤色，加粗，字体巨细为14px的段落。标识符：paragraph</p>
<p class="color_one font_weight_a font_size_one paragraph_another">这是一个蓝色，加粗，字体巨细为14px的段落。标识符：paragraph_another</p>
<p class="font_one font_weight_a paragraph_a ">这是一个只用到加粗，字体巨细为14px样式的段落。标识符：paragraph_a</p>
<p class="color_two paragraph_b">这是一个赤色，没有加粗，字体巨细为12px的段落标。标识符：paragraph_b</p>
<p class="font_weight_a paragraph_c">这是一个加粗，字体巨细为12px的段落。标识符：paragraph_c</p>
这里的定名，为什么不语义化一点？譬喻：color_two{color:red}（字体为赤色）可以定名为color_red{color:red}呢？
本人认为，假如color改成blue的时辰{color:blue}，显然color_red就不合逻辑。
那么我们在现实应用中，该用那一种要领呢？接待各人接头！ （编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
