CSS基礎，認識css樣式

時間 2019-12-12

標籤 css 基礎認識樣式欄目 CSS 简体版

原文原文鏈接

1.認識CSS樣式

CSS全稱爲「層疊樣式表 (Cascading Style Sheets)」，它主要是用於
定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。

以下列代碼：
        p{
           font-size:12px;
           color:red;
           font-weight:bold;
        }
使用CSS樣式的一個好處是經過定義某個樣式，可讓不一樣網頁位置的文字
有着統一的字體、字號或者顏色等。

2.CSS代碼的語法

css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，

選擇符：
又稱選擇器，指明網頁中要應用樣式規則的元素，
如本例中是網頁中全部的段（p）的文字將變成藍色，
而其餘的元素（如ol）不會受到影響。

聲明：
    在英文大括號「｛｝」中的的就是聲明，屬性和值之間用英文冒號「：」分隔。
    當有多條聲明時，中間能夠英文分號「;」分隔，以下所示：
        p{font-size:12px;color:red;}

注意：
    一、最後一條聲明能夠沒有分號，可是爲了之後修改方便，通常也加上分號。
    二、爲了使用樣式更加容易閱讀，能夠將每條代碼寫在一個新行內，以下所示：
            p{
               font-size:12px;
               color:red;
            }

3.內聯式css樣式表

內聯式css樣式表就是把css代碼直接寫在現有的HTML標籤中，以下面代碼：
    <p style="color:red">這裏文字是紅色。</p>
注意要寫在元素的開始標籤裏，下面這種寫法是錯誤的：
<p>這裏文字是紅色。</p style="color:red">
而且css樣式代碼要寫在style=""雙引號中，若是有多條css樣式代碼設置能夠寫在一塊兒，
中間用分號隔開。以下代碼：
    <p style="color:red;font-size:12px">這裏文字是紅色。</p>

4.嵌入式css樣式表

嵌入式css樣式，就是能夠把css樣式代碼寫在<style type="text/css"></style>標籤之間。
以下面代碼實現把三個<span>標籤中的文字設置爲紅色：
        <style type="text/css">
        span{
        color:red;
        }
        </style>
嵌入式css樣式必須寫在<style></style>之間，而且通常狀況下嵌入式css樣式寫在<head></head>之間。

5.外部式css樣式表

外部式css樣式，就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以「.css」爲擴展名，
在<head>內（不是在<style>標籤內）使用<link>標籤將css樣式文件連接到HTML文件內，以下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
一、css樣式文件名稱以有意義的英文字母命名，如 main.css。
二、rel="stylesheet" type="text/css" 是固定寫法不可修改。
三、<link>標籤位置通常寫在<head>標籤以內。

6.三種方法的優先級

內聯式 > 嵌入式 > 外部式

7.標籤選擇器

標籤選擇器其實就是html代碼中的標籤。如右側代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。
例以下面代碼：
p{font-size:12px;line-height:1.6em;}
上面的css樣式代碼的做用：爲p標籤設置12px字號，行間距設置1.6em的樣式。

8.類選擇器

類選擇器在css樣式編碼中是最經常使用到的，
** 語法：**
.類選器名稱{css樣式代碼;}

注意：
一、英文圓點開頭
二、其中類選器名稱能夠任意起名（但不要起中文）

使用方法：
第一步：使用合適的標籤把要修飾的內容標記起來，以下：
<span>膽小如鼠</span>
第二步：使用class="類選擇器名稱"爲標籤設置一個類，以下：
<span class="stress">膽小如鼠</span>
第三步：設置類選器css樣式，以下：
.stress{color:red;}

9.ID選擇器

在不少方面，ID選擇器都相似於類選擇符，但也有一些重要的區別：
一、爲標籤設置id="ID名稱"，而不是class="類名稱"。
二、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。

類選擇器與ID選擇器的區別css

一、ID選擇器只能在文檔中使用一次。與類選擇器不一樣，在一個HTML文檔中，
ID選擇器只能使用一次，並且僅一次。而類選擇器可使用屢次。
二、可使用類選擇器詞列表方法爲一個元素同時設置多個樣式。
咱們能夠爲一個元素同時設多個樣式，但只能夠用類選擇器的方法實現，
ID選擇器是不能夠的（不能使用 ID 詞列表）。

10.子選擇器

還有一個比較有用的選擇器子選擇器，即大於符號(>),用於選擇指定標籤元素的第一代子元素。
以下代碼：
<ul class="food">
<li>水果
    <ul>
        <li>香蕉</li>
        <li>蘋果</li>
        <li>梨</li>
    </ul>
</li>
<li>蔬菜
    <ul>
        <li>白菜</li>
        <li>油菜</li>
        <li>捲心菜</li>
    </ul>
</li>
</ul>
.food>li{border:1px solid red;}
這行代碼會使class名爲food下的子元素li（水果、蔬菜）加入紅色實線邊框。

11.包含(後代)選擇器

包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側代碼編輯器中的代碼：
.first  span{color:red;}
這行代碼會使第一段文字內容中的「膽小如鼠」字體顏色變爲紅色。
請注意這個選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的直接後代，
或者你能夠理解爲做用於子元素的第一代後代。然後代選擇器是做用於全部子後代元素。
後代選擇器經過空格來進行選擇，而子選擇器是經過「>」進行選擇。
總結：>做用於元素的第一代後代，空格做用於元素的全部後代。

12.通用選擇器

通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，
它的做用是匹配html中全部標籤元素，以下使用下面代碼使用html中任意標籤元素字體顏色所有設置爲紅色：
* {color:red;}

13.僞類選擇符

更有趣的是僞類選擇符，爲何叫作僞類選擇符，它容許給html不存在的標籤（標籤的某種狀態）設置樣式，
好比說咱們給html中一個標籤元素的鼠標滑過的狀態來設置字體顏色：
a:hover{color:red;}

關於僞選擇符：
關於僞類選擇符，到目前爲止，能夠兼容全部瀏鑑器的「僞類選擇符」就是
 a 標籤上使用 :hover 了（其實僞類選擇符還有不少，尤爲是 css3 中，
可是由於不能兼容全部瀏覽器，這一種最經常使用的）。
其實 :hover 能夠放在任意的標籤上，好比說 p:hover，可是它們的兼容性也是很很差的，
因此如今比較經常使用的仍是 a:hover 的組合。

14.分組選擇符

當你想爲html中多個標籤元素設置同一個樣式時，可使用分組選擇符（，），
以下代碼爲右側代碼編輯器中的h一、span標籤同時設置字體顏色爲紅色：
h1,span{color:red;}
它至關於下面兩行代碼：

h1{color:red;}
span{color:red;}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。