如何通過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; 
}