CSS 如何设计文本段落的首字母

我们在许多书籍的各章节中看到了如何使用CSS设计单词的首字母。在CSS中，我们可以使用::first-letter 伪元素来设计文本段落的首字母。这使我们能够将特定的样式应用于块级元素的第一行的首字母。例如，我们可以使首字母变大，使用不同的字体，或与其余文本的颜色不同。

语法

p::first-letter{
   property_name : value_name;
}

first-letter − 首字母首字母被定义为伪元素，用于设计段落的首字母。

使用的属性

示例中使用了以下属性 –

font-style - 定义文本的样式。
color - 定义文本的颜色。
text-align - 定义文本的水平对齐方式。
font-size - 定义文本的大小。

示例

在这个示例中，我们将使用内部CSS的属性来设计文字段落的首字母。 p元素将在HTML中创建段落。使用h1元素并通过font-style、color和text style设置属性来提及段落的主题名称。要设计段落中的首字母，将使用伪元素p::first-letter。该伪元素通过使用font-size和color的属性来创建首字母的较大大小。

<!DOCTYPE html>
<html>
   <title>Design initial letter of text paragraph</title>
   <head>
      <style>
         h1{
            font-style: italic;
            color: darkblue;
            text-align: center;
         }
         p{
            font-size: 20px;
         }
         p::first-letter{
            font-size: 80px;
            color: #FF0000;
         }
         p.new_style:first-letter {
            font-size: 100px;
            display: block;
            float: left;
            line-height: 0.5;
            margin: 15px 15px 10px 0;
            color: blue;
         }
         h3{
            color: darkgreen;
            font-style: italic;
         }
      </style>
   </head>
   <body>
      <h1>The story of Anne Frank</h1>
      <p><i>
         Anne Frank was born on June 12, 1929, in Frankfurt am Main, Germany. Edith 
         and Otto Frank were her parents. Anne spent her first five years of life in 
         a flat on the outskirts of Frankfurt with her parents and older sister, 
         Margot. Otto Frank moved to Amsterdam in the Netherlands, where he had 
         links in the business world, after the Nazis took over in 1933. The 
         remainder of the Frank family arrived shortly after, with Anne arriving 
         last in February 1934 after spending time with her grandparents in 
         Aachen.</i></p>
      <h2>One more new format style of first letter</h2>
      <p class="new_style"> Anne Frank was born on June 12, 1929, in Frankfurt 
         am Main, Germany. Edith and Otto Frank were her parents. Anne spent her 
         first five years of life in a flat on the outskirts of Frankfurt with her 
         parents and older sister, Margot. Otto Frank moved to Amsterdam in the 
         Netherlands, where he had links in the business world, after the Nazis took 
         over in 1933. The remainder of the Frank family arrived shortly after, with 
         Anne arriving last in February 1934 after spending time with her 
         grandparents in Aachen.<p>
      <h3>@tutorialspoint.com</h3>
   </body>
</html>