我如何通过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。保留所有权利。”

的文本字体大小（12px）

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