增加html中的特定字母大小

时间:2017-12-30 10:23:05

标签: html html5

我想增加 C 。我也使用::first-text{}。它现在有效,我怎样才能增加

<p>Creating  and  Implementing</p>

<center>
<p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
    <style>
       p::first-letter{
       font-size:40px;
                      }                           
    </style>

  <span class="a">Creating</span> <span>and</span> <span>Implementing</span> 
     </p>
</center>

3 个答案:

答案 0 :(得分:0)

我不确定first-text,但first-letter适用于 C

对于,您必须将其包装在一个范围内并且不幸地给它一个类。

https://caniuse.com/#feat=css-first-letter

- 更新 -

我不确定您是否知道,但style标签不是'范围'。这意味着所有 <p>标记的首字母都会增加,这是您想要的吗?

此外,center标记已弃用,不应使用。

<style>
p{
  text-align: center;
  font-size: 32px;
  color: #424242;
  margin-top: 15px;
  font-family:Rockwell; 
}
.highlight-first-letter::first-letter{
       font-size:40px;
       display: inline-block;
}                           
</style>
<p>    
  <span class="highlight-first-letter">Creating</span> <span>and</span> <span class="highlight-first-letter">Implementing</span> 
     </p>

答案 1 :(得分:0)

非常简单,你必须改变你的标签,如

<p>
   <span class="highlight-first-letter"><b style="font-size:20px;">C</b>reating</span> <span>and</span> <span class="highlight-first-letter"><b style="font-size:20px;">I</b>mplementing</span> 
</p>

您的输出看起来像

enter image description here

答案 2 :(得分:-1)

我用jquery完成它,它也可以通过document.getelementbyid

在javascript中实现

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=o>c js isj kl</div>
<script>
var txt = $('#o').text();
var new_text = txt.replace(/i/gi, 'I') ;

$('#o').text(new_text.replace(/c/gi,'C'));
</script>

更新后

我发现在css中

在文字之间引入范围

 <p>Creating  and  Implementing</p>

    <center>
    <p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
        <style>
           p::first-letter{
           font-size:40px;
                          }       
          .l::first-letter{
            font-size:40px
}                    
        </style>

      <span class="a">Creating</span> <span>and</span> <span class=l>Implementing</span> 
         </p>
    </center>