以下文章提供了 HTML 樣式表的概述。 HTML 層疊樣式表是一個包含規則和屬性的表，告訴瀏覽器如何使用所有指定的樣式呈現 HTML。 CSS 是我們設計任何網頁的方式。 CSS 有背景、顏色、字體、間距、邊框等所有屬性，我們可以為頁面上的每個元素定義這些屬性。
HTML 樣式表也用於設定頁面佈局，例如頁首、頁尾或任何其他元素在頁面上的放置位置。 CSS 總是與 HTML 一起討論，因為沒有任何樣式的頁面非常蒼白，沒有突出顯示任何標題等，整個頁面的字體大小相同，這對用戶來說根本不好看。
過去，樣式、腳本、HTML 所有內容都寫在同一個頁面上。這使得頁面變得非常冗長並且非常難以閱讀和編輯。然後就出現了分離 HTML、樣式和 Javascript 的方法。
我們可以用 3 種方式包含樣式：
這是一種在名為 style 的屬性內為 HTML 本身內的每個元素編寫樣式的方法。
完全不推薦這種樣式方式，因為 HTML 看起來很混亂，而且我們不能遵循「一次寫，多處使用」的方法。
範例：
代碼：
<h1 style=”font-size: 10px;margin-top: 10px;”>Hello World!</h1>
這是將樣式包含在樣式標籤中並將其放置在網頁中的 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>這是為網頁設定樣式的最常見也是最好的方式。這與內部樣式類似，但不同之處在於，樣式被編寫在擴展名為 .css 的單獨文件中，並且對其的引用放置在網頁的 head 標籤中。
網頁上連結 CSS 檔案的語法為：
文法：
<link rel="stylesheet" type="text/css" href="theme.css">
樣式應包含在 head 標籤中，該標籤位於 HTML 的 body 標籤（即實際內容）之上。
內聯樣式比內部樣式優先，最後是外部樣式。
內嵌>內部>外部
使用 CSS 的最佳實務：
用法： @import ‘./process.css’;
這些基本上是所選元素的狀態，而不是真正的確切元素。
各種功能如下：
範例：
Code:
-webkit-transition: width 2s, height 4s;
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中文網其他相關文章！
