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

Question

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

我目前使用：

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