HTML 樣式表
- 王林原創
- 2024-09-04 16:16:281235瀏覽
以下文章提供了 HTML 樣式表的概述。 HTML 層疊樣式表是一個包含規則和屬性的表，告訴瀏覽器如何使用所有指定的樣式呈現 HTML。 CSS 是我們設計任何網頁的方式。 CSS 有背景、顏色、字體、間距、邊框等所有屬性，我們可以為頁面上的每個元素定義這些屬性。
HTML 樣式表也用於設定頁面佈局，例如頁首、頁尾或任何其他元素在頁面上的放置位置。 CSS 總是與 HTML 一起討論，因為沒有任何樣式的頁面非常蒼白，沒有突出顯示任何標題等，整個頁面的字體大小相同，這對用戶來說根本不好看。
如何使用 HTML 樣式表？
過去，樣式、腳本、HTML 所有內容都寫在同一個頁面上。這使得頁面變得非常冗長並且非常難以閱讀和編輯。然後就出現了分離 HTML、樣式和 Javascript 的方法。
在網頁上包含 HTML 樣式表的方法
我們可以用 3 種方式包含樣式：
1.內嵌樣式
這是一種在名為 style 的屬性內為 HTML 本身內的每個元素編寫樣式的方法。
完全不推薦這種樣式方式，因為 HTML 看起來很混亂，而且我們不能遵循「一次寫，多處使用」的方法。
範例：
代碼：
<h1 style=”font-size: 10px;margin-top: 10px;”>Hello World!</h1>
2.內部造型
這是將樣式包含在樣式標籤中並將其放置在網頁中的 HTML 之上。這種樣式方式仍然比內聯樣式更好，因為我們可以將常見樣式組合在一起，以防必須一次用於多個元素。
在開發階段編輯HTML檔案比較容易，而且我們不需要每次都開啟對應的CSS檔案並進行編輯。
範例：
代碼：
<html>
<head>
<style>
container-block{
font-size: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class=”container-block”>Hello World!</div>
</body>
3.外部造型
這是為網頁設定樣式的最常見也是最好的方式。這與內部樣式類似，但不同之處在於，樣式被編寫在擴展名為 .css 的單獨文件中，並且對其的引用放置在網頁的 head 標籤中。
網頁上連結 CSS 檔案的語法為：
文法：
<link rel="stylesheet" type="text/css" href="theme.css">
樣式應包含在 head 標籤中，該標籤位於 HTML 的 body 標籤（即實際內容）之上。
內聯、內部、外部樣式之間的優先順序是什麼？
內聯樣式比內部樣式優先，最後是外部樣式。
內嵌>內部>外部
使用 CSS 的最佳實務：
- CSS 可以分成多個文件，而不是一個。
- 可以使用連結標籤將單獨的 CSS 檔案逐一包含在 head 標籤中。
- 或一個 CSS 檔案可以有多個 import 語句來匯入其餘的 CSS 檔案。這會在邏輯上分離CSS，但最終會得到；所有樣式均從同一文件渲染。
用法： @import ‘./process.css’;
- 可以使用選擇器為任何網頁元素定義樣式，如 HTML 標籤本身、類別名稱、id、任何屬性名稱。
- 有一些偽選擇器可用，例如：
- 之前
- 之後
- 第 n 個孩子
- 第一個孩子
- 最後一個孩子
- 懸停
- 訪問過
這些基本上是所選元素的狀態，而不是真正的確切元素。
- 當頁面中包含多個 CSS 檔案時，最後一個檔案具有最高優先級，並覆蓋具有相同選擇器的先前檔案的現有樣式。
- 樣式表應該在 HTML 本身之前使用，以便在頁面載入時套用樣式。如果包含在最後，HTML 將首先加載，然後慢慢套用樣式，這會給用戶帶來非常糟糕的體驗。
HTML 層疊樣式表的各種特性
各種功能如下：
- CSS 提供動畫：以前，javascript 僅用於動畫。但最新的 CSS，即 CSS3，使用屬性本身提供動畫。
- 供應商前綴：在瀏覽器發布任何新功能的標準版本/屬性名稱之前，瀏覽器會在一段時間內為我們提供一些供應商前綴作為實驗。開發者需要等待瀏覽器發布標準版本，在此期間，實驗性功能可以與供應商前綴一起使用。
- CSS 轉換：轉換用於在給定持續時間內逐漸從屬性的另一個值轉到一個值。
範例：
Code:
-webkit-transition: width 2s, height 4s;
- CSS Transforms: Transforms in CSS allow you to translate, rotate, scale and skew elements.
Media Queries
Mobile, Desktops, iPads behave differently; however, we cannot style the pages in the same way. Previous web standards have been designed in such a way that we had different CSS for every type of device.
With the progress of web standards and the way the web is built, browsers are developed to have a single CSS that can be used for any type of device. To change the styles for devices based on width and height, media queries are used with which we can specify the min or max-width of the device and write styles within it.
Example:
Code:
@media screen and (max-width: 767px){
container{
width: 60%;
padding: 20px;
}
}
Styles are definitely a boon for the web. And as web development has increased exponentially in recent times, CSS3 has definitely gained a lot of demand to make the pages extremely interactive and intuitive.
以上是HTML 樣式表的詳細內容。更多資訊請關注PHP中文網其他相關文章！