溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css基本語法使用實(shí)例分析

發(fā)布時(shí)間：2022-04-22 15:44:00 來源：億速云 閱讀：105 作者：iii 欄目：大數(shù)據(jù)

今天小編給大家分享一下css基本語法使用實(shí)例分析的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一 概述

  1.  CSS 指層疊樣式表 (Cascading Style Sheets)

  2. 樣式定義如何顯示 HTML 元素

  3. 樣式通常存儲在樣式表中

  4. 把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問題

  5. 外部樣式表可以極大提高工作效率

  6.  外部樣式表通常存儲在 CSS 文件中

  7. 多個(gè)樣式定義可層疊為一

二 層疊次序

當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會使用哪個(gè)樣式呢？

一般而言，所有的樣式會根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。

1.   瀏覽器缺省設(shè)置

2.   外部樣式表

3.   內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）

4.   內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）

三 CSS 基本語法

CSS語法由三部分構(gòu)成：選擇器、屬性和值：

selector {property: value}

選擇器 (selector) 通常是你希望定義的 HTML 元素或標(biāo)簽，屬性 (property) 是你希望改變的屬性，并且每個(gè)屬性都有一個(gè)值（value）。屬性和值被冒號分開，并由花括號包圍，這樣就組成了一個(gè)完整的樣式聲明（declaration）。

 提示：如果值為若干單詞，則要給值加引號：

p {font-family: "sans serif";}

提示：如果要定義不止一個(gè)聲明，則需要用分號將每個(gè)聲明分開。下面的例子展示出如何定義一個(gè)紅色文字的居中段落。最后一條規(guī)則是不需要加分號的，但是加上分號是良好的習(xí)慣：

p {text-align:center; color:red;}

提示：應(yīng)該在每行只描述一個(gè)屬性，這樣可以增強(qiáng)樣式定義的可讀性：

p {
  text-align: center;
  color: black;
  font-family: arial;
}

提示：是否包含空格不會影響 CSS 在瀏覽器的工作效果，但是可以增加可讀性；與 XHTML 不同，CSS 對大小寫不敏感。不過存在一個(gè)例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。

提示：不要在屬性值與單位之間留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它僅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。

四 CSS 高級語法

1. 選擇器分組

可以對選擇器進(jìn)行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標(biāo)題元素進(jìn)行了分組。所有的標(biāo)題元素都是綠色的。

h2,h3,h3,h4,h6,h7 {
  color: green;
  }

2. 繼承及其問題

根據(jù) CSS，子元素從父元素繼承屬性。但是它并不總是按此方式工作。看看下面這條規(guī)則：

body {
     font-family: Verdana, sans-serif;
     }

根據(jù)上面這條規(guī)則，站點(diǎn)的 body 元素將使用 Verdana 字體（假如訪問者的系統(tǒng)中存在該字體的話）。

通過 CSS 繼承，子元素將繼承最高級元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規(guī)則，所有 body 的子元素都應(yīng)該顯示 Verdana 字體，子元素的子元素也一樣。在大部分的現(xiàn)代瀏覽器中，確實(shí)是這樣的。但是在那個(gè)瀏覽器大戰(zhàn)的血腥年代里，這種情況就未必會發(fā)生。比方說，Netscape 4 就不支持繼承，它不僅忽略繼承，而且也忽略應(yīng)用于 body 元素的規(guī)則。IE/Windows 直到 IE6 還存在相關(guān)的問題，在表格內(nèi)的字體樣式會被忽略。我們又該如何是好呢？

 辦法：

//:定義一個(gè)父元素風(fēng)格，應(yīng)用于整體
body  { 
     font-family: Verdana, sans-serif;
     }
//:采用組選擇器來預(yù)防某些瀏覽器拒絕繼承
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
//:如果某子元素不愿繼承風(fēng)格，可以定義特殊規(guī)則來擺脫父元素規(guī)則
p  {
     font-family: Times, "Times New Roman", serif;
     }

3. 派生選擇器

派生選擇器允許你根據(jù)文檔的上下文關(guān)系來確定某個(gè)標(biāo)簽的樣式。比方說，你希望列表中的 strong 元素變?yōu)樾斌w字，而不是通常的粗體字，可以這樣定義一個(gè)派生選擇器：

//:當(dāng)<strong>元素位于<li>元素內(nèi)部時(shí)，字體為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 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來定義。下面的兩個(gè) id 選擇器，第一個(gè)定義屬性id=”red”的元素的顏色為紅色，第二個(gè)定義id=”green”的元素的顏色為綠色：

#red {color:red;}
#green {color:green;}

下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

<p id="red">這個(gè)段落是紅色。</p>
<p id="green">這個(gè)段落是綠色。</p>

注意：id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次。

5. id選擇器+派生選擇器

在現(xiàn)代布局中，id 選擇器常常用于建立派生選擇器。

#sidebar p {
         font-style: italic;
         text-align: right;
         margin-top: 0.5em;
         }

上面的樣式只會應(yīng)用于出現(xiàn)在 id 是 sidebar 的元素內(nèi)的段落。這個(gè)元素很可能是 div 或者是表格單元，盡管它也可能是一個(gè)表格或者其他塊級元素。它甚至可以是一個(gè)內(nèi)聯(lián)元素，比如 <em></em> 或者 <span></span>，不過這樣的用法是非法的，因?yàn)椴豢梢栽趦?nèi)聯(lián)元素 <span> 中嵌入 <p>。

6.類選擇器

類選擇器以一個(gè)點(diǎn)號（.）顯示：

.center {text-align: center}

所有擁有 center 類的 HTML 元素均為居中。在下面的 HTML 代碼中，h2 和 p 元素都有 center 類。這意味著兩者都將遵守".center" 選擇器中的規(guī)則。

<h2 class="center">
This heading will be center-aligned
</h2>
<p class="center">
This paragraph will also be center-aligned.
</p>

注意：類名的第一個(gè)字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用。

 1> 類選擇+派生選擇

.fancy td {
         color: #f60;
         background: #666;
         }

在上面這個(gè)例子中，類名為 fancy 的更大的元素內(nèi)部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個(gè)表格或者一個(gè) div）

2>派生選擇+類選擇

td.fancy {
         color: #f60;
         background: #666;
         }

在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色，而其他的元素不會受到影響。

五 CSS 如何引入？

 插入樣式表的方法有三種：

1. 外部樣式表 當(dāng)樣式需要應(yīng)用于很多頁面時(shí)，外部樣式表將是理想的選擇。每個(gè)頁面使用 <link> 標(biāo)簽鏈接到樣式表。<link> 標(biāo)簽在（文檔的）頭部：

<head>
<link rel="stylesheet" type="text/css" href="xxx.css" />
</head>

2. 內(nèi)部樣式表 當(dāng)單個(gè)文檔需要特殊的樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。你可以使用 <style> 標(biāo)簽在文檔頭部定義內(nèi)部樣式表，就像這樣:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

 3. 內(nèi)聯(lián)樣式 由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法，例如當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)。

要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

4. 多重樣式 如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。

以上就是“css基本語法使用實(shí)例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手