在HTML中，p標簽用于定義段落，而pre標簽用于定義預格式化文本。當我們使用CSS來定制網站時，有時我們需要將代碼與文章內容區分開來以提高可讀性。
在CSS中，我們可以使用偽元素選擇器來定義p標簽的四個角。偽元素選擇器是指可以使用CSS來定制已定義HTML元素中的子元素的樣式，而不改變HTML結構的一種選擇器。
使用CSS來把四個角的文章、段落使用p標簽，代碼使用pre標簽，可以按照以下步驟進行操作:
1. 首先，需要為p元素和pre元素分別定義樣式。可以在CSS中為它們分配不同的顏色和字體大小等屬性。
```
p{
font-size: 16px;
color: #333333;
}
pre{
font-size: 14px;
color: #000000;
background-color: #F4F4F4;
padding: 10px;
border: 1px solid #CCCCCC;
}
```
2. 接下來，使用偽元素選擇器來應用樣式。可以使用:before和:after選擇器來定義上方、下方、左邊和右邊的角。
```
p:before{
content: "";
display: block;
width: 5px;
height: 5px;
background-color: #000000;
margin-right: 5px;
margin-bottom: -5px;
}
p:after{
content: "";
display: block;
width: 5px;
height: 5px;
background-color: #000000;
margin-left: 5px;
margin-top: -5px;
}
pre:before{
content: "";
display: block;
width: 5px;
height: 5px;
background-color: #000000;
margin-right: 5px;
margin-bottom: -5px;
}
pre:after{
content: "";
display: block;
width: 5px;
height: 5px;
background-color: #000000;
margin-left: 5px;
margin-top: -5px;
}
```
3. 最后，在HTML中使用p標簽來包含文章、段落，使用pre標簽來包含代碼，就可以看到四個角的效果了。
```
這是一段文章
這是一段代碼``` 綜上所述，使用CSS來把四個角的文章、段落使用p標簽，代碼使用pre標簽，可以通過定義樣式以及使用偽元素選擇器來實現。這種方法可以提高網站的可讀性和易用性，方便用戶快速找到想要的信息。
上一篇css怎么把三張圖片分開
下一篇css怎么把幾個詞組居中