溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css基本語法的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
一 概述
CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊為一
二 層疊次序
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據下面的規則層疊于一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
1. 瀏覽器缺省設置
2. 外部樣式表
3. 內部樣式表（位于 <head> 標簽內部）
4. 內聯樣式（在 HTML 元素內部）
三 CSS 基本語法
CSS語法由三部分構成：選擇器、屬性和值：
selector {property: value}選擇器 (selector) 通常是你希望定義的 HTML 元素或標簽，屬性 (property) 是你希望改變的屬性，并且每個屬性都有一個值（value）。屬性和值被冒號分開，并由花括號包圍，這樣就組成了一個完整的樣式聲明（declaration）。
提示：如果值為若干單詞，則要給值加引號：
p {font-family: "sans serif";}提示：如果要定義不止一個聲明，則需要用分號將每個聲明分開。下面的例子展示出如何定義一個紅色文字的居中段落。最后一條規則是不需要加分號的，但是加上分號是良好的習慣：
p {text-align:center; color:red;}提示：應該在每行只描述一個屬性，這樣可以增強樣式定義的可讀性：
p {
text-align: center;
color: black;
font-family: arial;
}提示：是否包含空格不會影響 CSS 在瀏覽器的工作效果，但是可以增加可讀性；與 XHTML 不同，CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。
提示：不要在屬性值與單位之間留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它僅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。
四 CSS 高級語法
1. 選擇器分組
可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
h2,h3,h3,h4,h6,h7 {
color: green;
}2. 繼承及其問題
根據 CSS，子元素從父元素繼承屬性。但是它并不總是按此方式工作。看看下面這條規則：
body {
font-family: Verdana, sans-serif;
}根據上面這條規則，站點的 body 元素將使用 Verdana 字體（假如訪問者的系統中存在該字體的話）。
通過 CSS 繼承，子元素將繼承最高級元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子元素都應該顯示 Verdana 字體，子元素的子元素也一樣。在大部分的現代瀏覽器中，確實是這樣的。但是在那個瀏覽器大戰的血腥年代里，這種情況就未必會發生。比方說，Netscape 4 就不支持繼承，它不僅忽略繼承，而且也忽略應用于 body 元素的規則。IE/Windows 直到 IE6 還存在相關的問題，在表格內的字體樣式會被忽略。我們又該如何是好呢？
辦法：
//:定義一個父元素風格，應用于整體
body {
font-family: Verdana, sans-serif;
}
//:采用組選擇器來預防某些瀏覽器拒絕繼承
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
//:如果某子元素不愿繼承風格，可以定義特殊規則來擺脫父元素規則
p {
font-family: Times, "Times New Roman", serif;
}3. 派生選擇器
派生選擇器允許你根據文檔的上下文關系來確定某個標簽的樣式。比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：
//:當<strong>元素位于<li>元素內部時，字體為italic,否則，字體為粗體
li strong {
font-style: italic;
font-weight: normal;
}例子：
strong {
color: red;
}
h3 {
color: red;
}
h3 strong {
color: blue;
}下面是它施加影響的 HTML：
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p> <h3>This subhead is also red.</h3> <h3>The strongly emphasized word in this subhead is<strong>blue</strong>.</h3>
4. id選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來定義。下面的兩個 id 選擇器，第一個定義屬性id=”red”的元素的顏色為紅色，第二個定義id=”green”的元素的顏色為綠色：
#red {color:red;}
#green {color:green;}下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。
<p id="red">這個段落是紅色。</p> <p id="green">這個段落是綠色。</p>
注意：id 屬性只能在每個 HTML 文檔中出現一次。
5. id選擇器+派生選擇器
在現代布局中，id 選擇器常常用于建立派生選擇器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}上面的樣式只會應用于出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是表格單元，盡管它也可能是一個表格或者其他塊級元素。它甚至可以是一個內聯元素，比如 <em></em> 或者 <span></span>，不過這樣的用法是非法的，因為不可以在內聯元素 <span> 中嵌入 <p>。
6.類選擇器
類選擇器以一個點號（.）顯示：
.center {text-align: center}所有擁有 center 類的 HTML 元素均為居中。在下面的 HTML 代碼中，h2 和 p 元素都有 center 類。這意味著兩者都將遵守".center" 選擇器中的規則。
<h2 class="center"> This heading will be center-aligned </h2> <p class="center"> This paragraph will also be center-aligned. </p>
注意：類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。
1> 類選擇+派生選擇
.fancy td {
color: #f60;
background: #666;
}在上面這個例子中，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個 div）
2>派生選擇+類選擇
td.fancy {
color: #f60;
background: #666;
}在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色，而其他的元素不會受到影響。
五 CSS 如何引入？
插入樣式表的方法有三種：
1. 外部樣式表 當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在（文檔的）頭部：
<head> <link rel="stylesheet" type="text/css" href="xxx.css" /> </head>
2. 內部樣式表 當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表，就像這樣:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>3. 內聯樣式 由于要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
4. 多重樣式 如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“css基本語法的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
