何時以及為何在 CSS 樣式表之外使用樣式標籤

已發表: 2017-10-29

樣式標籤是 Web 開發中一個非常有趣的部分。我的意思是，它們是當前 Web 工作方式的基礎和基礎，但大多數情況下，您網站的實際樣式來自於為主題、插件和訪問者看到的日常外觀導入和使用大量 CSS 樣式表。

但是回到網站建設的舊時代，您可以在網站的正文中使用樣式標籤，這沒問題。大多數（如果不是全部）頁面的 CSS 將放在頁面本身上，然後……它工作正常。如今，這當然存在一些問題——例如頁面加載速度和執行順序，而且越是成熟的網絡技術發展，您就越不想單獨使用樣式標籤。

但是，有時您會想要使用它們。有時，它們會增強您的工作流程，而其他實例確實可以讓您的用戶生活更美好——例如，移動優化，或者通過出色的樣式將他們的注意力吸引到特定元素上。

典型的樣式表使用

在當今幾乎每個網站中，您都會看到這樣實現的樣式：

<link rel='stylesheet' id='divi-style-css'  href='/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />

如果您是使用 Divi 的 Elegant Themes 成員（您應該是！），就會調用我從以下代碼段中獲取的完整樣式表：

/*
Theme Name: Divi
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 3.0.40
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Browser Reset */

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

現在，理論上，您可以將其放在您編寫的任何頁面的頁眉中的樣式標記中。它肯定會奏效，但那是糟糕的編碼，根本就不是什麼風格標籤適合。

樣式標籤，現代用法

當然，您的網站有這樣的 CSS 樣式表。你會使用它們。您有custom.css和stylesheet.css並且可能不止這些。您已經確定了您的網站應該是什麼樣子，並且您對此很滿意。

那麼為什麼需要樣式標籤呢？

因為樣式表是全局解決方案。樣式標籤是一種小規模的解決方案。

表格處理的是您網站的更大外觀，而不是具體的單個元素和特殊亮點。有時，將一段一次性的代碼放入樣式表中所付出的努力比值得的多。

這就是樣式標籤真正有用的時候。此外，有時您需要調整單個元素或為某些設備或用例做出特定的樣式選擇。那是樣式標籤在現代 Web 開發中真正發揮作用的時候。

元素的單個實例

您在站點中使用樣式標記的主要原因可能是您正在處理頁面上的單個一次性元素。將樣式包含在附加到該元素的 id 的外部 CSS 文件中可能會很麻煩（很少，如果有的話，返回）。但是，您可以做的是在元素上添加樣式標籤，然後繼續您的一天。

例如，如果您有一個需要特殊字體的側邊欄小部件，您可以將它放在一個 div 中，為該 div 提供一個 CSS id，然後前往您的電子表格以包含諸如{font-family: “Exo”之類的簡單內容, Arial, sans-serif;} ，但這很麻煩。

更好的選擇是簡單地這樣做？

<div style="font-family: "Exo", Arial, sans-serif;" />

bada-bing，bada-boom，你完成了，這個小部件現在很突出，因為它是唯一一個獲得這種特殊樣式的小部件。（是的，我意識到使用新的和不同的字體可能會與您設計的其餘部分發生衝突。但這是一個例子。）

一個簡單的頁面

有時，您的網站上有一個非常簡單的一次性頁面。它可能是啟動頁面或擠壓頁面。您可能只需要對此處的樣式進行一些調整，但您需要將它們應用於此頁面，並且僅適用於此頁面。

因此，與創建新樣式表並鏈接它相比，您可以使用經常受到誹謗的!important標籤和样式來更快、更輕鬆地完成工作。如果你沒有很多新的 CSS，最好使用這種方法，因為加載大量的 CSS 會減慢頁面加載速度。但你已經知道了。

然而，像這樣簡單的事情不會對您的用戶連接造成太大的壓力，而且真的不值得添加到樣式表中。（公平地說，這個 CSS 很醜陋，不值得添加到任何網站。Tee hee！）

<style>
h2, h3, h4 {
  font-family: "Exo", Arial, sans-serif!important; 
  text-align: right; 
	font-size: 2rem; 
	color: blue;}
body, p {font-family: "Roboto", Arial, sans-serif!important; 
  font-size: 1.2rem; 
	color: red; 
	background: #000;}
	</style>

不過，這裡的重點是 HTML 5 很酷，您可以將樣式標籤添加到網站的頭部，以便您調整現有的樣式表。雖然在這種情況下絕對不需要!important標籤（它們很少需要），但我覺得這也許是一次使用它們的時候，因為它們不會像你（或其他開發人員）開始在該站點上工作，因為它們僅適用於該單個頁面。

多種視口尺寸

媒體查詢是您的朋友。如果您不完全熟悉它們，那麼我強烈建議您閱讀它們。基本上，您可以聲明某些 CSS 必須滿足哪些參數才能生效。但是，大多數情況下，您將使用它來確保您的網站在不同的設備上運行。當您需要站點範圍的響應能力時，這將包含在樣式表中。

但同樣，如果您有一個頁面或元素需要在移動設備上以不同方式顯示或根本不需要顯示（甚至更小或更大的桌面分辨率），您可以使用標題中的樣式標籤來實現。

<style>
@media (max-width: 767px) {

.white_text {
    color: #ffffff;
}

.blue_text {
    color: #cbe1f3;
}

.white_background {
    background-color: #ffffff;
}

.blue_background {
    background-color: #003663;
}

#email_form_a {
  display:none;
}
</style>

造型和輪廓

CSS 現在是 Web 開發的重要組成部分，幾乎每個人都必須了解和使用它。甚至比了解CSS 更重要的是知道何時使用您可以訪問的細微工具。

所以不要覺得你只限於樣式表。當然，它們很棒而且很有用，它們使整個網絡成為一個更好的地方，但您仍然可以使用簡單的樣式標籤，也可以讓您的網站更受歡迎。

那麼如何在 .css 樣式表之外使用樣式標籤呢？ 你能給人們什麼見解？

Creative Thoughts/shutterstock.com 的文章縮略圖