免費AI編程助手
CSS 簡介
CSS概述
1. Cascading Style Sheets 層疊樣式表，它可以控制多重網頁的樣式和布局；
2. 需具備的基礎知識：HTML、XHTML；
3. 主要實現(xiàn)：
樣式
----- 定義如何顯示 HTML 元素；
----- 存儲在樣式表中；
----- 添加到 HTML4.0 中，解決內容與表現(xiàn)分離；
----- 多個樣式定義可以層疊為一。
CSS解決的問題--更好的利用HTML
1. 背景
HTML 標簽原本被設計為用于定義文檔內容。即通過使用 <h1>、<p>、<table> 這樣的標簽，來表達“這是標題”、“這是段落”、“這是表格”之類的信息。
同時文檔的布局由瀏覽器來完成，而不使用任何的格式化標簽。
由于兩種主要的瀏覽器（Netscape和Internet Explorer）不斷地將新的 HTML 標簽和屬性（比如字體標簽和顏色屬性）添加到 HTML 規(guī)范中，創(chuàng)建文檔，內容清晰地獨立于文檔表現(xiàn)層的站點變得越來越困難。
2. 樣式
- 為解決這個問題，樣式（Style）肩負起了 HTML 標準化的使用，這樣所有的主流瀏覽器均支持層疊樣式表；
- 極大地提高了工作效率。樣式表定義如何顯示 HTML 元素，就像 HTML3.2 的字體標簽和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。
- 多重樣式層疊為一個。樣式表允許以多種方式規(guī)定樣式信息。它可以規(guī)定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。
- 甚至可以在同一個 HTML 文檔內部引用多個外部樣式表。
例子
CSS代表層疊樣式表。它定義如何顯示 HTML 元素。
以下 HTML 代碼包含樣式的 CSS。
<!DOCTYPE HTML>
<html>
<head>
<style>
a {
background-color:grey;
color:white
}
</style>
</head>
<body>
<a href = "http://m.hgci.cn">Visit the website</a>
</body>
</html>上面的代碼設置背景顏色和前景顏色。
樣式通常保存在外部 .css 文件中。
瀏覽器樣式
瀏覽器使用級聯(lián)和繼承來確定在顯示元素時要用于屬性的值。每個元素都有一些 CSS 屬性。
對于每個屬性，瀏覽器需要遍歷所有樣式的源。
你已經看到了三種不同的方式來定義樣式
- 內聯(lián)
- 嵌入式
- 外部樣式表
如果沒有指定其他樣式，瀏覽器樣式或用戶代理樣式是瀏覽器應用于元素的默認樣式。
這些樣式在瀏覽器之間略有不同。
以下代碼顯示了一個不包含樣式的簡單 HTML 文檔。
<!DOCTYPE HTML>
<html>
<body>
<a href="http://m.hgci.cn">Visit the website</a>
<p>I like <span>apples</span> and oranges.</p>
<a rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>鏈接的文本內容顯示為藍色，帶下劃線。
瀏覽器正在應用類似于以下代碼中所示的樣式。
a {
color: blue;
text-decoration: underline;
}小結
以上是從CSS的基本作用談起的，它內部的需要基礎知識，在下文中會提到，如 CSS 基礎語法、選擇器、樣式、框模型定位等內容。
更多建議：