Beautiful Soup - 刪除所有樣式

本章解釋如何從HTML文件中刪除所有樣式。層疊樣式表（CSS）用於控制HTML文件不同方面的外觀。它包括使用特定的字型、顏色、對齊方式、間距等來設定文字的渲染樣式。CSS可以透過不同的方式應用於HTML標籤。

一種是在CSS檔案中定義不同的樣式，並使用``標籤在文件的``部分的HTML指令碼中包含該檔案。例如：

示例

<html>
   <head>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
   . . .
   . . .
   </body>
</html>

HTML指令碼主體部分的不同標籤將使用mystyle.css檔案中的定義。

另一種方法是在HTML文件本身的``部分定義樣式配置。主體部分的標籤將使用內部提供的定義進行渲染。

內部樣式示例：

<html>
<head>
   <style>
      p {
         text-align: center;
         color: red;
      } 
   </style>
</head>
   <body>
      <p>para1.</p>
      <p id="para1">para2</p>
      <p>para3</p>
   </body>
</html>

在這兩種情況下，要以程式設計方式刪除樣式，只需從soup物件中刪除head標籤。

from bs4 import BeautifulSoup

soup = BeautifulSoup(html, "html.parser")
soup.head.extract()

第三種方法是透過在標籤本身中包含style屬性來內聯定義樣式。style屬性可能包含一個或多個樣式屬性定義，例如顏色、大小等。例如：

<body>
   <h1 style="color:blue;text-align:center;">This is a heading</h1>
   <p style="color:red;">This is a paragraph.</p>
</body>

要從HTML文件中刪除此類內聯樣式，需要檢查標籤物件的attrs字典中是否定義了style鍵，如果已定義，則刪除它。

tags=soup.find_all()
for tag in tags:
   if tag.has_attr('style'):
      del tag.attrs['style']
print (soup)

以下程式碼刪除內聯樣式並刪除head標籤本身，以便生成的HTML樹中不再包含任何樣式。

html = '''
<html>
   <head>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <h1 style="color:blue;text-align:center;">This is a heading</h1>
      <p style="color:red;">This is a paragraph.</p>
   </body>
</html>
'''
from bs4 import BeautifulSoup

soup = BeautifulSoup(html, "html.parser")
soup.head.extract()

tags=soup.find_all()
for tag in tags:
   if tag.has_attr('style'):
      del tag.attrs['style']
print (soup.prettify())

輸出

<html>
 <body>
  <h1>
   This is a heading
  </h1>
  <p>
   This is a paragraph.
  </p>
 </body>
</html>

列印頁面