如何通过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> 

我需要设置：

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

和文本字体大小（11像素）的“技术支持了ScriptName”

应当准确看起来像

我如何能做到这一点吗？

更新

感谢大家对你有益的帮助:)

我问候

Answer 1

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 2

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

<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 3

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

总结他们在一个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 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; 
}