CSS基礎知識(一)

CSS · 發表 2019-05-10 23:41:05

摘要：一、什麼是CSS CSS全稱為層疊樣式表(Cascading Style Sheets)，通常又稱為風格樣式表(Style Sheets)，它是用來進行網頁設計的；在網頁製作時採用CSS技術，可以有效地對頁面的佈局、字型、顏色、背景和其它效果實現更加精確的控制，只要對...

一、什麼是CSS

CSS全稱為層疊樣式表(Cascading Style Sheets)，通常又稱為風格樣式表(Style Sheets)，它是用來進行網頁設計的；
在網頁製作時採用CSS技術，可以有效地對頁面的佈局、字型、顏色、背景和其它效果實現更加精確的控制，只要對相應的程式碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式；

二、CSS的優勢

內容與表現分離，也就是使用前面學習得HTML語言製作網頁，使用CSS設定網頁樣式、風格、並且CSS樣式單獨存放在一個檔案中，這樣只要HTML檔案引用CSS檔案就可以了，便於後期的CSS樣式的維護；
表現的統一，可以使網頁的表現非常同意，並且容易修改；
豐富的樣式，使得頁面佈局靈活；
減少網頁的程式碼量，增加網頁的瀏覽速度；
運用獨立頁面的CSS，有利於網頁被搜尋引擎收錄；

三、CSS的基本語法結構

CSS和HTML一樣都是瀏覽器能解析的計算機語言，因此CSS也有自己的語法結構；
CSS規則由兩部分構成，選擇器和宣告，宣告必須放在大括號中{}，可以是一條或多條；
每條宣告由一個屬性和值組成，屬性和值用冒號分開，每條語句以英文的分好結尾；

# h1表示選擇器
# font-size和color表示屬性
# 12px和#fff表示屬性值
p{
font-size:12px;
color:#fff;
}

四、style標籤

在HTML中通過使用 <style> 標籤引入CSS樣式， <style> 標籤用於為HTML文件定義樣式資訊；

在 <style> 標籤中，type是必須屬性，用於定義style元素的內容，值為“text/css”；

<style type="text/css">
p{
font-size:12px;
color:#fff;
}
</style>
<body>
</body>

五、CSS選擇器

在 CSS 中，選擇器是一種模式，用於選擇需要新增樣式的元素；

所有HTML語言中的標籤樣式都是通過不同的CSS選擇器進行控制的；

CSS的選擇器分為三種，分別是：標籤選擇器、類選擇器、 ID選擇器；

標籤選擇器：

一個HTML頁面由很多的標籤組成，例如 <html> 、 <p> 、 <h1> 、 <div> 、 <span> 等，CSS標籤選擇器就是用來宣告這些標籤的；

每種HTML標籤的名稱都可以作為相應的標籤選擇器的名稱，例如 <p> 標籤和 <h1> 標籤，如果我們需要在它們上面定義一個標籤選擇器，那我們要怎麼做呢；

p{
font-size:12px;
}
h1{
font-size:16px;
}

需要注意的是，一個HTML頁面會有很多的 <p> 標籤和 <h1> 標籤，標籤選擇器一旦宣告，那麼頁面的所有該標籤都會應用，這樣雖然用起來很方便，但是如果想要給其中一個標籤單獨定義屬性則不能，此時需要使用類選擇器或者ID選擇器了；

類選擇器：

類選擇器的名字可以由使用者自定義，屬性和值跟標籤選擇器一樣，必須符合CSS規範，它的語法如下；

# .class1為類選擇器的名字
# font-size為屬性
# 12px為屬性值
.class1{
font-size:12px;
}

和標籤選擇器不同的是，設定了類選擇器之後就要在HTML的標籤中應用相應類樣式，使用標籤的class屬性引用類樣式，如下所示；

<style>
.class1{
font-size:18px;
color:#f00;
}
</style>
<body>
<p class="class1">hello world！</p>
<p>hello world!</p>
</body>

如下圖所示，上面一行p標籤是應用了類樣式class1，下面一行則沒有，所以上面一行樣式有變化，下面一行沒有變化；

ID選擇器：

ID選擇器的使用方法和類選擇器相同，不同之處在於ID選擇器只能在HTML頁面中使用一次，因此它的針對性更強；

比如說有一個類選擇器.class1，那麼它可以在頁面的多個標籤中應用，有一個ID選擇器class1，那麼它只能在頁面中用一次；

<style>
.class1{
font-size:18px;
color:#f00;
}
#id1{
font-size:26px;
color:#0A00F3;
}
</style>
<body>
<p class="class1">這是第一行喲</p>
<p class="class1">這是第二行喲</p>
<p class="class1">這是第三行喲</p>
<p id="id1">這是第二行喲</p>
<p >這是第二行喲</p>
</body>

效果圖

六、CSS樣式引入方法

在HTML頁面中，引入CSS樣式有三個方法，分別是：行內樣式、內部樣式和外部樣式；

行內樣式：

行內樣式就是在HTML中直接使用style屬性設定CSS樣式，用法為：<標籤名 style=”樣式宣告;”></標籤名>；
這種方法僅對當前的HTML標籤起作用，並且是寫在HTML標籤中的，因此這種方法不能使得內容和表現相分離，沒有體現出CSS的優勢；

內部樣式：

把CSS程式碼寫在的
這種方法的優勢為方便在同頁面中修改樣式，但是不利於在多頁面間共享複用程式碼和維護程式碼，對內容與樣式的分離也不夠徹底；

外部樣式：

實際開發中我們都是使用這種方式來引入CSS樣式，它是把CSS程式碼另存為一個單獨的CSS檔案，檔案的副檔名為.css，然後在頁面中引入這個檔案；
引入外部樣式的語法為：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<link rel="stylesheet" type="text/css" href="style.css" /># 引入外部css檔案style.css,所有的樣式都寫在這個檔案中
</head>
<body>
<p class="class1">這是第一行喲</p>
<p class="class1">這是第二行喲</p>
<p class="class1">這是第三行喲</p>
<p id="id1">這是第二行喲</p>
<p >這是第二行喲</p>
</body>
</html>

七、樣式優先順序

css的全稱為層疊樣式表，顧名思義，css中的樣式可以疊加使用，頁面的最終效果為多個樣式疊加效果；
樣式的疊加會造成樣式之間的衝突，所以就存在優先順序的問題；
選擇器的優先順序為：標籤選擇器>ID選擇器>類選擇器；
樣式優先順序：行內樣式>內部樣式>外部樣式；

八、CSS複合選擇器

由標籤選擇器、類選擇器、ID選擇器三種基本的選擇器為基礎，通過不同方式將兩個或者多個選擇器組合在一起而形成的選擇器叫做複合選擇器；

後代選擇器：

後代選擇器（descendant selector）又稱為包含選擇器，後代選擇器可以選擇作為某元素後代的元素；
它的語法為：

<style>
p strong{
font-size:24px;
}
</style>
<body>
<p>春眠不覺曉，<strong>處處</strong>聞啼鳥</p>
</body>

後代選擇器：

交集選擇器由兩個選擇器直接連線構成，其中第一個必須是標記選擇器，第二個必須是類別選擇器或者ID選擇器，這兩個選擇器之間不能有空格；

它的語法為：

<style>
p.special{
color:red;
}
</style>
<body>
<p class="special">春眠不覺曉，處處聞啼鳥</p>
</body>

並集選擇器：

並集選擇器簡稱集體宣告，並集選擇器是多個選擇器通過逗號連線而成的；

並集選擇器可以用來定義風格完全相同，或者部分相同的選擇器；

語法為：

<style>
h1,h2,h3,h4,h5{
color:red;
}
</style>
<body>
<h1>第一個</h1>
<h2>第二個</h2>
<h3>第三個</h3>
<h4>第四個</h4>
<h5>第五個</h5>
</body>

九、繼承特性

CSS的繼承簡單的說就是將各個HTML標記看做一個個容器，其中被包含的小容器會繼承包含它的大容器的風格樣式；

所有的CSS語句都是基於各個標記直接的繼承關係，CSS繼承是指子標記會繼承父標記的所有樣式風格，並可以再父標記樣式風格的基礎上再加以修改，產生新的樣式，而子標記的樣式完全不會影響父標記；

CSS基礎知識(一)

一、什麼是CSS

二、CSS的優勢

三、CSS的基本語法結構

四、style標籤

五、CSS選擇器

六、CSS樣式引入方法

行內樣式：

內部樣式：

外部樣式：

七、樣式優先順序

八、CSS複合選擇器

後代選擇器：

您可能也會喜歡…