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

【问题标题】：How I can set a different font size for my text by css?如何通过 css 为我的文本设置不同的字体大小？
【发布时间】：2012-07-12 21:08:50
【问题描述】：

我的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>

我需要设置：

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

应该是这样的

请问我该怎么做？

更新

感谢大家的有用帮助:)

我的问候

【问题讨论】：

标签： css text fonts

【解决方案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/

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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
}

【讨论】：

【解决方案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;   
}

【讨论】：