HTML和CSS是前端開發中兩個不可或缺的技術，它們分別負責網頁結構和樣式的實現。在實際開發中，為了讓網頁更加簡潔易懂、維護更加方便，我們會選擇將HTML和CSS進行分離。
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Template</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello, World!</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates tempore, dolorum numquam optio alias porro ratione, quos voluptatum iste sapiente doloremque nisi aspernatur exercitationem velit dignissimos accusantium obcaecati? Soluta.</p> </body> </html>
如上所示，我們將樣式文件的引入放在了HTML文件的頭部，以<link>標簽的形式引入。這樣一來，我們可以單獨去編寫一個style.css文件，并且這個文件與HTML文件的耦合性進一步降低，能更好地維護和管理。
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f6f6f6;
color: #333;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 48px;
}
p {
text-align: justify;
line-height: 1.8em;
margin: 0 auto;
max-width: 800px;
}如上所示，我們在style.css文件中編寫了網頁的樣式，包括整個頁面的背景、文字顏色、標題的字體樣式等等，代碼邏輯更加清晰和高效。
總之，在前端開發中，HTML和CSS的分離是極為重要的，可以使我們更好地管理和維護代碼，進而寫出更加優秀的網頁。
上一篇css設置標題的方式