css - 如何通过 css 为我的文本设置不同的字体大小？

Question

我的CSS代码是

#footer .right {
    font-weight: bold;
    color: #ffffff;
    margin: 0px auto;
    padding: 10px 0px 0px;
    float: right;
}

文字是

<p class="right">Copyright &copy; 2012 SiteName. All Rights Reserved.<br />
         Powered By ScriptName</p>

我需要设置：

“Copyright © 2012 SiteName。保留所有权利”的文本字体大小（12 像素）。

和“Powered By ScriptName”的文本字体大小（11px）

它应该看起来像那样

请问我该怎么做？

更新

感谢大家的有用帮助:)

致以我的问候

Answer 1

使用跨度将是最简单的。像这样...

<p class="right">Copyright &copy; 2012 SiteName. All Rights Reserved.<br />
     <span class="small">Powered By ScriptName</span></p>

和CSS

#footer .right {
font-size: 12px;
}

.small {
font-size: 11px;
}

Answer 2

每行使用两个不同的段落。给每个人自己的课。通过定位这些类来应用它们的特定样式。

将它们包装在一个 div 中并对其应用常用样式：

HTML

<div class="footerTxt">
    <p class="copyright">Copyright &copy; 2012 SiteName. All Rights Reserved.</p>
    <p class="poweredBy">Powered By ScriptName</p>
</div>

CSS

.footerTxt {
    font-weight: bold;
    color: #ffffff;
    margin: 0px auto;
    padding: 10px 0px 0px;
    float: right;
}

.copyright {
    font-size: 12px;
}

.poweredBy {
    font-size: 11px
}

Answer 3

HTML：

<p class="right">Copyright &copy; 2012 SiteName. All Rights Reserved.<br />
<span>Powered By ScriptName</span></p>

CSS：

#footer .right {
    ...
    font-size: 12px;
}

#footer .right span {
    font-size: 11px;
}

示例：http: //jsfiddle.net/4CpRk/

Answer 4

为了让您的页脚看起来与您提供的图像相同，除了字体大小之外，还需要一些额外的样式，但是还需要包装第二行以便能够在 css 中引用它。这样做之后<br />就不再需要了。

这是示例

• http://jsfiddle.net/UmFkv/2/

html:

<div id="footer">
    <p class="right">Copyright &copy; 2012 SiteName. All Rights Reserved.
         <span id="secondline">Powered By ScriptName<span>
   </p>
</div>​

CSS：

#footer {
background:#25B5EA;
    width: 421px;
    height: 46px;
    font-family:Verdana, Geneva, sans-serif; 
}
#footer .right {
    color: #ffffff;
    margin: 0px auto;
    padding: 7px 0px 0px;
    width: 330px;
    font-size: 12px;
    float: right;
    line-height: 16px;
}
#footer #secondline {
 font-size: 11px;   
}

​</p>