CSS段落样式

本教程向你展示了在HTML中为一个段落添加的多种CSS样式。

段落是一个文本内容块，就像教科书中的一个章节。

在网页中，段落是用HTML的p标签或div标签创建的。

p标签在语义上用于HTML网页中的文本内容。

让我们在HTML中创建一个段落

<html lang="en">

<head>
  <meta charset="UTF-8">
 
</head>

<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua.
    Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Mattis enim ut tellus elementum sagittis.
  </p>
</body>

</html>

段落样式是通过元素或类或ID选择器来应用的以下是使用元素选择器应用颜色样式的代码

如果你的段落包含类选择器

  <p class="myparagraph"> paragraph1</p>

在CSS中，点(.)选择器和名称被用来应用样式。

如果你的段落包含id选择器

  <p id="paraId"> paragraph2</p>

在CSS中，带名字的hash(#)选择器被用来应用样式。

如何为HTML中的多个段落应用CSS样式？

假设你在一个HTML中拥有多个段落

<p class="para1">Paragraph1</p>
<p class="para2">Paragraph2</p>

你可以按照下面的方法应用CSS样式

p.para1{
    color:green;
}
p.para2{
    color:red;
}

或者你可以用类选择器来应用

.para1{
    color:green;
}
.para2{
    color:red;
}

如何在一个段落中添加左对齐的文本内容？

有时，我们想应用段落的样式，使其左对齐、右对齐或居中对齐。

Html包含段落，每个段落都被添加了类，以便对每个段落应用多种样式。

 <p class="para1">Paragraph1</p>
  <p class="para2">Paragraph2</p>

在CSS中使用属性text-align:left|right|center|justify 值：

.para1 {
      color: green;
      text-align: left;
    }

.para2 {
      color: red;
      text-align: right;
    }

在HTML css的段落样式中加符号选择器

有时，我们有多个段落，你想对除了第一段以外的段落应用CSS样式。

CSS+选择器用于选择相邻的同级段落

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>

在CSS中，p+p用来选择第二、第三和第四个参数并应用样式。

段落斜体和粗体的CSS样式

在CSS中，font-style:italic使文字变成斜体，font-weight 使字体变成粗体。

如何在CSS中对每个段落的开头进行文字缩进？

当你有一个包含多行文字的段落时，第一行会缩进或用默认的空格。

你可以使用text-indent

<style>
   p {
      color: blue;
      text-indent: 40px;
      font-weight:600;
    }
  </style>