前端之CSS1_ZenDei技術網路在線

前端之CSS基礎部分，包括 css基本語法和引入方式，css文本設置，css顏色表示法，css選擇器等。其中 css基本語法和引入方式包括 CSS介紹，css基本語法，CSS引入方法；css文本設置僅包括 css文本設置及示例；css顏色表示法僅包含 css顏色表示法及示例；css選擇器 ... ...

CSS基本語法和引入方式

CSS介紹

為了讓網頁元素的樣式更加豐富，也為了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現樣式的標簽就廢棄不用了，html只負責文檔的結構和內容，表現形式完全交給CSS，html文檔變得更加簡潔。

css基本語法

css的定義方法是：

選擇器 { 屬性:值; 屬性:值; 屬性:值;}

選擇器是將樣式和頁面元素關聯起來的名稱，屬性是希望設置的樣式屬性每個屬性有一個或多個值。

代碼示例：

div{ width:100px; height:100px; color:red }

CSS引入方法

css頁面引入方法：

外聯式：通過link標簽，鏈接到外部樣式表到頁面中。
嵌入式/內嵌式：通過style標簽，在網頁上創建嵌入的樣式表。
內聯式：通過標簽的style屬性，在標簽上直接寫樣式。

style標簽，放在head標簽裡面，在style裡面寫樣式；

在網站首頁時建議使用，有助於性能優化，提升用戶體驗；
註意，嵌入式用的是style標簽，而內聯式用的是style屬性；

/* css引入方法1 */
<link rel="stylesheet" type="text/css" href="css/main.css">

/* css引入方法2 */
<head>    
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
</head>  

/* css引入方法3 */
<div style="width:100px; height:100px; color:red ">......</div>

css引入方式示例

示例1：引入css文件

/*01.引入css文件.html*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS樣式引入</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 第一種插入樣式的方式-外聯式 -->
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div>這是一個div標簽</div>

</body>
</html>

/*main.css*/

div {
    /*這裡是css的註釋*/
    font-size: 26px;
    color: blue;
}

示例2：嵌入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>內嵌式引入css樣式</title>
    <!-- 第二種插入樣式的方式-嵌入式 -->
    <style>
        div {
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>

<div>這是一個div標簽</div>
</body>
</html>

示例3：直接在標簽中寫樣式示例-內聯式/行內樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>內嵌式引入css樣式</title>
</head>
<body>
 <!-- 第三種插入樣式的方式-內聯式 -->
<div style="font-size: 20px;color: yellow">這是一個div標簽</div>
</body>
</html>

三種方式總結：
推薦使用外聯式，可以使用嵌入式，不太推薦使用內聯式；
外聯式嵌入式需要用到選擇器，內聯式不需要使用選擇器，因為它直接在選擇器裡面；
外聯式任何情況都能使用，嵌入式在網站首頁優化可以使用；
嵌入式用的是style標簽，而內聯式內聯式用的是style屬性；
首頁優化用嵌入式，其他用外聯式；

CSS文本設置

常用的應用文本的css樣式：

color 設置文字的顏色，如： color:red;
font-size 設置文字的大小，如：font-size:12px;
font-family 設置文字的字體，如：font-family:'微軟雅黑';
font-style 設置字體是否傾斜，如：font-style:'normal'; 設置不傾斜，font-style:'italic';設置文字傾斜；但一般是用來設置不傾斜的。
font-weight 設置文字是否加粗，如：font-weight:bold; 設置加粗 font-weight:normal 設置不加粗。
font 同時設置文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫： font：是否加粗字型大小/行高字體；如： font:normal 12px/36px '微軟雅黑';
line-height 設置文字的行高，如：line-height:24px;
text-decoration 設置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉，常用於將a標簽的下劃線去掉；
text-indent 設置文字首行縮進，如：text-indent:24px; 設置文字首行縮進24px；一個漢字占20px，兩個漢字40px。
text-align 設置文字水平對齊方式，如text-align:center 設置文字水平居中；span，a標簽等只讓文字撐開的，暫時不能居中，p，div占一行的，能居中。

01：文本樣式應用實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本常用樣式</title>
    <style>
        div {
            font-size: 22px;
            color: red;
            /*font-family: "微軟雅黑";*/  /*可以寫中文，但建議寫英文，避免可能出現的亂碼*/
            font-family: "Microsoft YaHei UI";
            font-style: italic;
            font-weight: bold;
            line-height: 20px;
        }
    </style>
</head>

<body>
<div>
    常用的應用文本的css樣式：
    color 設置文字的顏色，如： color:red;
    font-size 設置文字的大小，如：font-size:12px;
    font-family 設置文字的字體，如：font-family:'微軟雅黑';
    font-style 設置字體是否傾斜，如：font-style:'normal'; 設置不傾斜，font-style:'italic';設置文字傾斜
    font-weight 設置文字是否加粗，如：font-weight:bold; 設置加粗 font-weight:normal 設置不加粗
</div>
</body>
</html>

02：常用的文本應用css樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本常用樣式</title>
    <style>
        div {
            font-size: 22px;
            color: red;
            /*font-family: "微軟雅黑";*/  /*可以寫中文，但建議寫英文，避免可能出現的亂碼*/
            font-family: "Microsoft YaHei UI";
            font-style: italic;
            font-weight: bold;
            line-height: 30px;
            text-decoration: underline;
            text-indent: 40px;
        }
        a {
            text-decoration: none;
        }
        p {
            text-align: center;
        }
    </style>
</head>

<body>
<div>
    常用的應用文本的css樣式：
    color 設置文字的顏色，如： color:red;
    font-size 設置文字的大小，如：font-size:12px;
    font-family 設置文字的字體，如：font-family:'微軟雅黑';
    font-style 設置字體是否傾斜，如：font-style:'normal'; 設置不傾斜，font-style:'italic';設置文字傾斜
    font-weight 設置文字是否加粗，如：font-weight:bold; 設置加粗 font-weight:normal 設置不加粗
</div>
<p>這是一個span標簽</p>
<a href="http://www.baidu.com">百度一下，你就知道</a>
</body>
</html>

CSS顏色表示法

css顏色值主要有三種表示方法：

顏色名錶示，比如：red 紅色，gold 金色。
rgb表示，比如：rgb(255,0,0)，表示紅色。
16進位數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00。

css顏色表示法示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css顏色表示法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div {
            font-size: 30px;
            /*以下三種方法，效果一致*/
            /*color: green;*/
            /*color: rgba(0,255,0);*/
            color: #00ff00;
        }
    </style>
</head>

<body>
<div>這是一個div標簽</div>
</body>
</html>

CSS選擇器

如果對同一內容區添加樣式，下麵的樣式會覆蓋上面的樣式；
在css中，#代表id選擇器，.代表類選擇器；

常用的選擇器有如下幾種：

1.標簽選擇器

標簽選擇器，此種選擇器影響範圍大，建議儘量應用在層級選擇器中。

標簽選擇器舉例：
*{margin:0;padding:0}
div{color:red} 
<div>....</div> <!-- 對應以上兩條樣式 -->
<div class="box">....</div> <!-- 對應以上兩條樣式 -->

01標簽選擇器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 針對所有的標簽選擇器，慎用 */
        * {
            color: red;
        }
        /* 僅針對所有的div標簽選擇器 */
        div {
            font-size: 30px;
        }
    </style>
</head>

<body>
<div>第一個div標簽</div>
<div>第二個div標簽</div>
<div>第三個div標簽</div>
</body>
</html>

01標簽選擇器示例

2.id選擇器

通過id名來選擇元素，元素的id名稱不能重覆，所以一個樣式設置項只能對應於頁面上一個元素，不能復用，id名一般給程式使用，所以不推薦使用id作為選擇器。

id選擇器舉例：
#box{color:red} 
<div id="box">....</div> <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->

02id選擇器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id選擇器</title>
    <style>
        div {
            font-size: 30px;
            color: red;
        }
        /* id選擇器，用#作為id選擇器的標識 */
        /* 如果對同一內容區添加樣式，下麵的樣式會覆蓋上面的樣式 */
        #d1 {
            color: gray;
        }
    </style>
</head>
<body>

<div id="d1">第一個div標簽</div>
<div>第二個div標簽</div>
<div>第三個div標簽</div>

</body>
</html>

02id選擇器示例

3.類選擇器

通過類名來選擇元素，一個類可應用於多個元素，一個元素上也可以使用多個類，應用靈活，可復用，是css中應用最多的一種選擇器。

類選擇器舉例：
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 
<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

03類選擇器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>類選擇器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .d1 {
            font-size: 30px;
            color: deeppink;
        }
        .d2 {
            font-style: italic;
        }
        .d3 {
            color: green;
        }
    </style>
</head>
<body>
<div class="d1">這是第一個div標簽</div>
<div class="d1 d2">這是第二個div標簽</div>  <!-- 多個類可以作用於一個元素 -->
<!--如果一個元素上有多個類，多個類之間有重覆的樣式，那麼在外聯式/嵌入式中後定義的類選擇器的樣式會覆蓋先定義的；-->
<p class="d3 d1">這是一個p標簽</p>

<p>下麵是沒有添加類選擇器的標簽</p>
<div>這是第一個div標簽</div>
<div>這是第二個div標簽</div>
<p>這是一個p標簽</p>
</body>
</html>

03類選擇器示例

4.層級選擇器

主要應用在選擇父元素下的子元素，或者子元素下麵的子元素，可與標簽元素結合使用，減少命名，同時也可以通過層級，防止命名衝突。
層級選擇器可以包含多層，比如box中嵌套box，二層box下再嵌套span；但一般而言，最好不要超過四層。
層級選擇器之間用空格隔開；

層級選擇器舉例：
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>

04層級選擇器示例

5.組選擇器

多個選擇器，如果有同樣的樣式設置，可以使用組選擇器，抽離重覆樣式。組選擇器之間用逗號分隔開。

組選擇器舉例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

05組選擇器示例

6.偽類及偽元素選擇器

常用的偽類選擇器有hover，表示滑鼠懸浮在元素上時的狀態，偽元素選擇器有before和after,它們可以通過樣式在元素中插入內容。
常用於a標簽。

偽類選擇器舉例
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

06偽類和偽元素選擇器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>偽類和偽元素選擇器</title>
    <style>
        .link {
            font-size: 30px;
            text-decoration: none;
            color: deeppink;
        }
        /* 使用偽類選擇器 在滑鼠懸浮鏈接後變色加粗 */
        .link:hover {
            color: aqua;
            font-weight: bold;
        }
        .d1, .d2, .d3 {
            font-size: 20px;
        }
        /*使用偽元素選擇器，給文字前後添加內容*/
        .d1:before {
            content: "***";
            color: red;
        }
        .d3:after {
            content: "???";
            color: blue;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com" class="link">百度一下，你就知道</a>
<div class="d1">這是第一個div標簽</div>
<div class="d2">這是第二個div標簽</div>
<div class="d3">這是第三個div標簽</div>
</body>
</html>

06偽類和偽元素選擇器示例

註意：

id選擇器基本不用，用得最多的是類選擇器。
如果一個元素上有多個類，多個類之間有重覆的樣式，那麼在外聯式/嵌入式中後定義的類選擇器的樣式會覆蓋先定義的；
id選擇器的權重要高於類選擇器的權重，即id和類的樣式同時作用於一個內容區，會優先使用id的樣式；