CSS3-樣式位置(重點)
阿新 • • 發佈：2021-10-17
CSS3可以理解為CSS的第三個版本；可實際上CSS是分為各種模組的，有的模組版本可能是2，有的可能是4或5等等，就即各個不同模組版本可能不一致。因此CSS3只是一個統稱而已，不必深究。
CSS書寫的位置，一共有3個：
1. 行內寫法，如下：
<div style="color: red;font-size: 30px;"></div>
行內寫法叫做內聯樣式。只作用於當前標籤。此方式有非常大的弊病，和html耦合度太高了，有時候其他標籤也要相同的樣式時，需要多次重寫，就非常冗餘；不推薦使用
2. 內部樣式表寫法，如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ color: red; font-size: 30px; } </style> </head> <body> </body> </html>
此方式是開發中最常使用的；至於什麼原因，等第3個樣式說完再詳細說明。他的好處是當前頁面被選擇的標籤都可以共用此樣式。
特別注意點：style標籤的位置習慣是放在head內層的
3. 外部樣式表寫法，具體如下步驟：
1. 先在外部建立一個css檔案
2. 在html頁面引用，引用標籤如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--引用外部CSS --> <link rel="stylesheet" type="text/css" href="base.css"/> </head> <body> </body> </html>
也特別注意，link位置也是在head裡面，然後也屬於載入的一部分。
最後，說下實際開發常用的吧。
第一種基本不考慮。內聯樣式是最常用的，可能會有一些小夥伴會反駁：不是外部樣式使用最多嗎？他的耦合度是很低，共用信很強。有這個想法是非常好，可實際中，通常我們會採用第三方元件庫，都是已寫好的公共樣式了，不需要我們再單獨去寫CSS檔案，基本元件庫都能滿足。反而是元件庫提供的在某些樣式上你不太滿意，所以經常對某些特殊的頁面單獨去寫內聯CSS
並且內聯的css還有一個很大的好處：直觀易找。假設是外部樣式，又引用了很多的link，根本不知道你關注的標籤被哪個css檔案所修飾。