資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究HTML 和 CSS 如何協同工作？
概述
HTML（超文字標記語言）是一種標記語言，用於建立網站的骨架；CSS（層疊樣式表）是一種樣式語言，透過對頁面應用不同的樣式並進行適當的排列，使網站骨架更具吸引力。如同人體，骨骼起著 HTML 的作用，而人的屬性，例如顏色、身高、大小以及許多其他屬性，則起著 CSS 的作用。
因此，當用戶向伺服器請求頁面時，伺服器會以包含 HTML 和 CSS 檔案的靜態檔案形式傳送響應。在使用者瀏覽器上，首先使用 HTML 載入頁面的元件，CSS 作為頁面的樣式，所有這些過程都在納秒 (ns) 內完成，因此坐在瀏覽器前的使用者無法看到頁面上反映的變化。
HTML 的重要性
可以說，HTML 和 CSS 是相互依賴的，沒有 HTML 就無法使用 CSS，反之亦然。如果沒有 HTML 元素或標籤在網頁上，我們又該如何實現 CSS 樣式呢？
CSS 的重要性
CSS（層疊樣式表），正如你所看到的，網際網路上有數百萬個網頁。所有網頁都設計得簡潔明瞭，並帶有精美的動畫效果來提升使用者體驗，所有這些都可以透過 CSS 來實現。
向 HTML 新增 CSS
有三種方法可以將 CSS 樣式表新增到 HTML 頁面
內部樣式表
內聯樣式
外部樣式
內部樣式表
內部樣式表：這種樣式可以在 HTML 頁面的 head 標籤內完成。它包含起始和結束標籤，在其中完成頁面的樣式設定。我們將透過一個示例來了解內部樣式。
示例
<html>
<head>
<title>Internal styling</title>
<style>
p{
color: green;
}
</style>
</head>
<body>
<p>tutorialspoint.com</p>
</body>
</html
內聯樣式
這種樣式是在 HTML 元素或標籤本身內完成的。當我們需要更改特定標籤的樣式時，它非常有用。此樣式在 style 屬性內完成，該屬性將 CSS 屬性作為“鍵值”對。因此，當渲染元件時，樣式也會隨之渲染。要了解更多資訊，請參見下面的示例。
示例
<html> <head> <title>Internal styling</title> </head> <body> <p style="color: green;">tutorialspoint.com</p> </body> </html>
外部樣式
對於大型專案，外部樣式是最佳樣式，因為元素的樣式是在其他檔案中完成的，而不是在同一個 HTML 檔案中。要在頁面中使用此樣式，標籤在 HTML 頁面中使用，帶有兩個屬性“rel”和“href”。“href”屬性包含 CSS 檔案的位置。因此，當頁面載入時，從 link 標籤連結的 CSS 也將載入到頁面中。
示例
index.html <html> <head> <title>Internal styling</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>tutorialspoint.com</p> </body> </html>
style.css
p{
color: green;
}
在上例中，我們看到了三種不同的 CSS 實現方式，因此，當這些程式碼在 IDE 上執行時，程式碼的輸出不會發生變化。以上三種程式碼都會產生相同的輸出。
結論
向 HTML 新增 CSS 的最佳方法是使用外部樣式表。因為它對於開發人員來說，更改網頁元件樣式更容易。我們可以將 link 標籤放在 head 標籤內或 body 標籤之後。將樣式放在 head 標籤內的優點是，HTML 從上到下載入。在這種情況下，頁面的 CSS 將載入並立即應用到瀏覽器。將樣式放在 body 標籤之後會導致 HTML 骨架首先載入，而沒有 CSS，這會降低頁面的使用者體驗。我們可以得出結論，HTML 和 CSS 都是前端應用程式的必要組成部分。
634 次檢視
