什么是CSS中不同颜色/样式的正确方法

Question

我想为我的网站名称的每个单词设置两种不同的颜色/样式，如下所示：

我目前使用：

<a href="#">James<strong>.</strong><span>Wood</span></a>

（“A”标签内的“STRONG”和“SPAN”标签。）

然后用CSS完成剩下的工作。

如果我们不能使用图像，这是用CSS做的正确方法吗？

Answer 1

非常类似于Gianps的答案，但CSS更简单：

工作演示： http://www.cdpn.io/wvCou

<强> HTML ：

<a href="#" class='title'><span class='green'>James</span>.<span class='orange'>Wood</span></a>

<强> CSS：

.title {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
  color: red;
  text-decoration: none;
}
.title .green {color: green;}
.title .orange {color: orange;}

Answer 2

该HTML代码不可读。用css做这个是正确的，但是这样：

<a href="#" class="f18 b">
<span class="green uc">james</span>.<span class="orange uc">wood</span>
</a>

并定义css类：

.f18 {font-size: 18px;}
.b   {font-weight:bold;}
.uc  {text-transform:uppercase;}