前端(2)：CSS

阿新 • • 發佈：2018-11-08

一、CSS

CSS（cascading style sheet，層疊樣式表）定義如何顯示HTML元素。

當瀏覽器讀到一個樣式表，它會按照這個樣式表來對文件進行格式化（渲染）。

1、CSS語法

每個CSS樣式由兩個部分組成：選擇器 + 宣告（屬性、屬性值）每個宣告之後加；分號結束！

2、CSS註釋

/* 註釋內容 */

二、CSS的引入方式

1、行內樣式

<!--行內式  是在標記的style 屬性中設定CSS樣式。儘量不要頻繁使用-->


<p style 
="color: pink">這個一個p標籤 內聯樣式是字型顏色粉色</p>

2、內部樣式

<!--嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。-->
<head>
    <meta charset="UTF-8">
    <style>
        h1 {color: pink}
    </style>
    <title>test練習</title> 

</head>
<body>
<h1 id="p1">海燕</h1>
</body>
</html>

3、外部樣式

<!--外部樣式就是將css寫在一個單獨的檔案中，然後在頁面進行引入即可。推薦使用此方式-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="01樣式.css">  link 即為引入外部樣式 

    <title>test練習</title>
</head>

三、CSS選擇器

1、基本選擇器

1、元素（標籤）選擇器：適用於批量的（統一，預設）的樣式
p {color: sandybrown}

2、ID 選擇器：給特定標籤設定特定樣式
#p1 {background-color: burlywood} 
（井號後跟 需渲染內容的 ID 號）

3、類 選擇器：給某一些標籤設定相同的樣式
.c1 {color: antiquewhite;font-size: 18px}
.p1 { font-size: 29px}
（在HTML標籤中有一個class屬性，c1 和 p1 對應名稱的class）

4、通用選擇器
* {font-size: 14px}
/*適用所有元素*/

ps：

樣式類名不要用數字開頭（有的瀏覽器不認）。

標籤中的class屬性如果有多個，要用空格分隔。

2、組合選擇器

1、後代選擇器
 （p內部的a標籤設定字型顏色 <p>空格<a>：p標籤內部巢狀的所有a標籤（包括兒子，孫子等等））
p a {
     color: red;
 }

2、兒子選擇器
 （選擇所有父級是<div>元素的<p>元素:div標籤內子標籤是p標籤的生效（只找兒子輩））
div>p {
    font-family: "Arial Black","arial-black",cursive;
 }

3、毗鄰選擇器
（選擇所有緊挨著<div>之後的<p>標籤：找的是<p>標籤（條件：同級的上面有個<div>））
div+p {
    margin: 5px;
}

4、弟弟選擇器
（#p1(id=p1的)後面所有的兄弟p標籤）
#p1~p {
    color: gold
}

3、屬性選擇器

1、用於選取帶有指定屬性的元素。
p[title] {
  color: red;
}
2、用於選取帶有指定屬性和值的元素。
p[title="123"] {
  color: green;
}


對應下面2個HTML生效
<p title="xxx">咕咕咕</p>
<p title="123">略略略</p>

/*找到所有title屬性以hello開頭的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title屬性以hello結尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title屬性中包含（字串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素：*/
[title~="hello"] {
  color: green;

不怎麼常用的屬性選擇器

4、分組和巢狀

/*1、分組（當多個元素的樣式相同的時候，我們沒有必要重複地為每個元素都設定樣式，
       可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設定元素樣式）*/
div, （一定要加逗號（不然就變成後代了））
p{
    color: sandybrown;
}

/*2、巢狀（多種選擇器可以混合起來使用（空格,>,+,~），比如：.c1類內部所有p標籤設定字型顏色為紅色。）*/
.c1 p {
    color: red;
 }

5、偽類選擇器

/* 未訪問的連結 */
a:link {
  color: #FF0000
}

/* 已訪問的連結 */
a:visited {
  color: #00FF00
} 

/* 滑鼠移動到連結上 */
a:hover {
  color: #FF00FF
} 

/* 選定的連結 */ 
a:active {
  color: #0000FF
}

/*input輸入框獲取焦點時樣式*/
input:focus {
  outline: none;
  background-color: #eee;
}

6、偽元素選擇器

1、first-letter: 常用的給首字母設定特殊樣式：

p:first-letter{
    font-size: 48px;
    color: red;
}

2、before：在每個p元素之前插入內容

 p:before{
    content: "*";
    color: red;
 }

3、 after：在每個p元素之後插入內容
 
 p:after{
   content: "[?]";
    color: blue;
 }

before和after多用於清除浮動

四、選擇器的優先順序

1、CSS繼承

　　繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。例如一個body定義了的字型顏色值也會應用到段落的文字中。

body {
    color: red;
}
此時頁面上所有標籤都會繼承body的字型顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。
我們只要給對應的標籤設定字型顏色就可覆蓋掉它繼承的樣式。

此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什麼能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

具體的選擇器權重計算方式如下圖：

除此之外還可以通過新增 !important方式來強制讓樣式生效，但並不推薦使用。因為如果過多的使用!important會使樣式檔案混亂不易維護。

萬不得已可以使用!important

2、樣式檔案優先順序（重要）

　　1. 越靠近標籤的優先順序越高（就近原則）

　　2. 權重的計算

　　　　1. 內聯樣式 1000

　　　　2. ID選擇器 100

　　　　3. 類選擇器 10

　　　　4.元素選擇器 1

五、CSS字型和文字屬性相關

1、通用的屬性：寬和高（width(寬度) 和 height(高度)）

width 屬性可以為元素設定寬度。

height 屬性可以為元素設定高度。

塊級標籤才能設定寬度，內聯標籤的寬度由內容決定。

2、文字字型

font-family可以把多個字型名稱作為一個“回退”系統來儲存。如果瀏覽器不支援第一個字型，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。

* {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}

3、字型大小和粗細

@字型大小設定

p {
  font-size: 14px;    如果設定成 inherit 表示繼承父元素的字型大小值。
}

@字型粗細設定

p {
    font-weight: normal;  預設值，標準粗細
    font-weight:  bold;   粗體
    font-weight:  bolder; 更粗
    font-weight:  lighter;更細
    font-weight:  100-900;設定具體粗細，400等同於normal，700等同於bold
    font-weight:  inherit;繼承父元素字型的粗細值
}

4、文字顏色

.c1 {
    color: aqua;
}

顏色屬性被用來設定文字的顏色。

顏色是通過CSS最經常的指定：

十六進位制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red

還有rgba(255,0,0,0.3)，第四個值為alpha, 指定了色彩的透明度/不透明度，它的範圍為0.0到1.0之間。

5、文字對齊

text-align 屬性規定元素中的文字的水平對齊方式。

p {text-align: center;}

6、文字裝飾

text-decoration 屬性用來給文字新增特殊效果。

常用的為去掉a標籤預設的下劃線：

a { text-decoration: none; }

首行縮排：

p { text-indent: 28px; }
首行縮排28畫素

六、CSS背景和邊框屬性

1、背景屬性

1.背景顏色
background-color: red;
  背景圖片
background-image: url("頭像.jpg") ;

2. 背景重複
 repeat(預設):背景圖片平鋪排滿整個網頁
 repeat-x：  背景圖片只在水平方向上平鋪
 repeat-y：  背景圖片只在垂直方向上平鋪
 no-repeat： 背景圖片不平鋪

background-repeat: no-repeat; 

3.背景位置
background-position: right top;
background-position: 200px 200px;

可簡寫為：

background:  url("頭像.jpg") no-repeat center top ;

使用背景圖片的一個常見案例就是很多網站會把很多小圖示放在一張圖片上，然後根據位置去顯示圖片。減少頻繁的圖片請求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滾動背景圖示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("頭像.jpg") no-repeat center center;
            background-attachment: fixed;
        }
        .c1 {
            height: 500px;
            background-color: tomato;
        }
        .c2 {
            height: 500px;
            background-color: steelblue;
        }

    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="box"></div>
    <div class="c2"></div>
</body>
</html>

滑鼠滾動，背景不變

2、邊框屬性

1、邊框屬性有（border - width、border-style、bordercolor）

通常簡寫成：

.c2 {
    border: aqua solid 3px;
}

2、邊框的樣式：

3、單獨為某一個邊框設定樣式：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

4、圓角邊框效果

將border-radius設定為長或高的一半即可得到一個圓形

border-radius: 50%;

3、display 屬性

用於塊級元素和行內元素轉換（控制元素顯示效果）

display:"none"與visibility:hidden的區別：不常用！

visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

display:none: 可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失

七、CSS盒子模型

margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離；
Border(邊框): 圍繞在內邊距和內容外的邊框。
Content(內容): 盒子的內容，顯示文字和影象。

1、margin 外邊距

.c1 {
  margin-top:5px;   頂部
  margin-right:10px;右邊
  margin-bottom:15px;底部
  margin-left:20px; 左邊
}

可簡寫為：

.c1 {
  margin: 5px 10px 15px 20px;
}
順序：上>右>下>左

最常居中使用！！！

.c1 { margin: 0 auto;}

2、padding 內填充

.c1 {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}
簡寫和順序 與 margin 一致！！！

補充padding的常用簡寫方式：

提供一個，用於四邊；
提供兩個，第一個用於上－下，第二個用於左－右；
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下；
提供四個引數值，將按上－右－下－左的順序作用於四邊；

八、浮動與清除浮動、處理溢位

1、浮動（float）

在 CSS 中，任何元素都可以浮動。

浮動元素會生成一個塊級框，而不論它本身是何種元素。

關於浮動的兩個特點：

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>佈局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .c1 {
            height: 1000px;
            width: 20%;
            background-color: red;
            float: left;
        }

        .c2 {
            height: 1000px;
            width: 80%;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>

<div class="c1"></div>
<div class="c2"></div>
</body>
</html>

浮動頁面佈局示例

left：向左浮動

right：向右浮動

none：預設值，不浮動

2、清除浮動（clear）

clear屬性規定元素的哪一側不允許其他浮動元素

ps：clear屬性只會對自身起作用，而不會影響其他元素。

浮動有一個副作用：父標籤塌陷

清除主要有三種方式：

固定高度
偽元素清除法
overflow:hidden

/*偽元素清除浮動（最常用）*/
#clearfix:after {
    content: "";
    clear: left;
    display: block;
    }

3、溢位（overflow）

overflow（水平和垂直均設定）
overflow-x（設定水平方向）
overflow-y（設定垂直方向）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頭像示例</title>
    <style>
        .header-img {
            border: 1px solid pink;
            border-radius: 50%;
            height: 128px;
            width: 128px;
            overflow: hidden;
            margin: 0 auto;
        }
        img {
            max-width: 100%;
        }
    </style>
<body>
<div class="header-img">
    <!--頭像img需在div之內-->
    <img src=" http://tx.haiqq.com/uploads/allimg/150325/1222515561-5.jpg" alt="">
</div>
</body>
</html>

頭像示例

九、定位（position）

static -----> 預設
relative -----> 相對定位（相對於原來的位置）
absolute-----> 絕對定位（相對於最近的一個被定位過的的祖宗標籤）
fixed -----> 固定在某個位置（返回頂部按鈕）

left right top bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位練習</title>
    <style>
        * { margin: 0;padding: 0 }
        .c1,
        .c2,
        .c3,
        .c4{
            height: 150px;
            width: 150px;
        }
        .c1 {
            background-color: red;
        }
        .c2 {
            background-color: #ff6700;
            position: relative;
            left: 150px; ;
        }
        .c3 {
            background-color: lightgreen;
        }
        .c4 {
            background-color: coral;
            position: absolute;
            left: 300px;
            top: 150px;
        }
        #d1 {
            background-color: pink;
            bottom: 20px;right: 20px;
            position: fixed;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="c1">c1</div>
<div class="c2">c2</div>
<div class="c3">c3</div>
<div class="c4">c4</div>
<div id="d1">返回頂部</div>
</body>
</html>

定位示例

ps：脫離文件流的3種方式：

　　1、 float 浮動

　　2、absolute 絕對定位

　　3、fixed　　固定

十、元素透明度與層疊順序

1、opacity (元素透明度)

取 0---1 之間的值；

和rgba（）的區別：
　　1：opacity 改變元素以及子元素的透明度

　　2：rgba（）只改變背景顏色的透明度

2、z-index（層疊順序設定）

1、數值越大，越靠近你

2、只能作用於定位過的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定義模態框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

模態框示例

3、頂部導航欄練習

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>導航欄示例</title>
  <style>
    /*清除瀏覽器預設外邊距和內填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a標籤預設的下劃線*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*刪除列表預設的圓點樣式*/
      margin: 0; /*刪除列表預設的外邊距*/
      padding: 0; /*刪除列表預設的內填充*/
      display: inline-block;
    }
    /*li元素向左浮動*/
    li {
      float: left;
    }

    li > a {
      display: block; /*讓連結顯示為塊級標籤*/
      padding: 0 15px; /*設定左右各15畫素的填充*/
      color: #b0b0b0; /*設定字型顏色*/
      line-height: 40px; /*設定行高*/
    }
    /*滑鼠移上去顏色變白*/
    li > a:hover {
      color: #fff;
    }
    #u-right {
        float: right;
    }

    /*清除浮動 解決父級塌陷問題*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 頂部導航欄 開始 -->
<div class="nav">
    <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">紫米</a></li>
    <li><a href="">雲服務</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">有品</a></li>
    </ul>
    <ul id="u-right" class="clearfix">
        <li><a href="">登入</a></li>
        <li><a href="">註冊</a></li>
        <li><a href="">訊息通知</a></li>
    </ul>
</div>

<!-- 頂部導航欄 結束 -->
</body>
</html>

View Code

前端(2)：CSS

一、CSS CSS（cascading style sheet，層疊樣式表）定義如何顯示HTML元素。當瀏覽器讀到一個樣式表，它會按照這個樣式表來對文件進行格式化（渲染）。 1、CSS語法每個CSS樣式由兩個部分組成：選擇器 + 宣告（屬性、屬性值

web前端教程：CSS 布局十八般武藝都在這裏了

lin bcb 學習資料 ng- .com 垂直改進 fcc block CSS布局布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的盒模型布局和比較新的fle

flask前端優化：css/js/html壓縮

flask sta ask 技術分享 all 時間減少 ges 技術 1、先壓縮再傳輸，可以減少傳輸的大小，減少傳輸時間，但是壓縮需要時間，所以最終頁面顯示是快了還是慢了，需要比較 2、先看html壓縮模塊：pip install Flask-HTMLmin 壓縮前：大小

前端基礎：CSS屬性操作

多個 red 自己 list 機制 bis SQ col 文本顏色 CSS屬性操作 1.文本文本顏色：color，顏色屬性被用來設置文字的顏色，顏色是通過CSS經常指定的，其格式有： 1.十六進制：#FF0000； 2.RGB值：RGB(255,0,0)； 3.顏色名稱

問題2：css圖片、文字居中

1. 文字或圖片水平對齊:父元素中新增以下樣式 text-align : center;2. 單行文字垂直對齊:父元素中新增以下樣式 line-height : 父元素高度; 3.圖片水平及垂直居中方法一：　　利用

前端總結：CSS/js 踩過的坑以及一些冷知識(永久更新)

css css樣式這一塊坑比較多，有些情況不按常理出牌，在考慮不同螢幕顯示效果, 精確控制樣式和大小時就會遇到這些坑。 1、行內元素（比如img）預設會在末尾(或底部)留白/間隙，無法去除。解決辦法：通過display:block讓其以塊級元素進行顯示。（同

前端每日實戰：2.純 CSS 創作一個矩形旋轉 loader 特效

原文地址：2.純 CSS 創作一個矩形旋轉 loader 特效擴充套件後地址：https://scrimba.com/c/cNJVWUR 擴充套件地址：https://codepen.io/pen/ HTML程式碼： <div class="loader"&g

前端知識學習一：CSS基礎

分隔 color html元素 http 方式瀏覽器單位工作分離一.CSS概述　　　　css指的是層疊樣式表，樣式定義如何顯示HTML元素，樣式通常存儲在樣式表中，　　把樣式添加到HTML4.0中，是為了解決內容和表現分離的問題。外部樣式表通常存儲在css文件

web前端大神整理：CSS 布局經典問題

ica 新手學習 ron arc 利用一個補充視頻大屏本文來自前端大神的整理，主要對 CSS 布局中常見的經典問題進行簡單說明，並提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Flexbox 布局，等等。 CS

Java學習總結（二十四）——前端：CSS樣式設計（CSS引入，選擇器，盒子模型，浮動元素）

引入 itl AI dropdown 正常的 type ID 總結網頁一．CSS引入方式1.CSS簡介：（1）CSS(Cascading style Sheets):層疊樣式表。用來給html網頁設置樣式;（2）當多個選擇器對同一個元素進行樣式設計時，則該元素的樣式為多

前端基礎（2）css

hidden cti title UNC 被子偏移 ges border 導致 1.浮動高度坍塌原因：父元素的高度是被子元素撐開的，當設置浮動後，會脫離文檔流，子元素無法撐起父元素，所以導致高度坍塌解決方法 .clearfix:before, .clear

Effective前端1---chapter 2 用CSS畫一個三角形

-- 前端 highlight ive 類元 light sha 畫法兩個 1.CSS畫三角形的畫法第一步：三角形可以用border畫出來，首先一個有四個border的div長這樣： <div class="triangle"></div>

WEB前端資源代碼：CSS篇

tar been 函數 win com rul css 縮小 pac css3新單位vw、vh、vmin、vmax vh: 相對於視窗的高度, 視窗被均分為100單位的vh; vw: 相對於視窗的寬度, 視窗被均分為100單位的vw; vmax: 相對於視窗的寬度

前端案例分享（一）：CSS+JS實現流星雨動畫

目錄引言 1、效果圖 2、原始碼 3、案例解析 4、小問題 5、結語引言平常會做一些有意思的小案例練手，通常都會發到codepen上，但是codepen不能寫分析。 &nb

HTML+CSS專案課2：利用table和表單製作“網易郵箱註冊頁面”

知識點：html文件基本結構、table標籤佈局、表單標籤的使用、img標籤、a標籤、p標籤等常見標籤的使用。製作網頁效果：網頁製作思路： 1、將整個網頁分成4部分：3個表格+底部段落文字（3個表格設定同樣的寬度，水平居中，邊框為0等屬性） 2、表格1

HTML+CSS第四課2：利用表單標籤製作一個百度搜索框

知識點：表單<form>標籤、<input />標籤的使用。問題描述：在html中製作一個百度搜索框，要求，在搜尋框裡輸入關鍵詞後，點選搜尋，能夠跳轉到百度搜索結果頁面。關鍵程式碼： <form action="http://www.baidu.co

python前端HTML和CSS進階-2

知識點預習1.表單2.元素型別3.浮動4.定位 01- 表單form標籤表單用來提交資料 action 要提交的網址,預設是當前網頁method 請求提交方式預設get請求 post請求切換請求方式時注意快取問題 label標籤 for屬性如果設定的值和 input標籤中設定的id屬性值一樣就

前端之CSS：CSS選擇器前端之css樣式（選擇器）。。。

前端之css樣式（選擇器）。。。一、css概述 CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，對html標籤的渲染和佈局

常用CSS樣式2：其它樣式

#css顏色表示法 css顏色值主要有三種表示方法： 1、顏色名錶示，比如：red 紅色，gold 金色 2、rgb表示，比如：rgb(255,0,0)表示紅色 3、16進位制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00 #css選擇器常

CSS基礎【2】：CSS常見屬性

CSS常見屬性文字屬性 font-style 作用：規定文字樣式格式：font-style: italic; 取值： normal：正常的，預設就是正常的 italic：傾斜的 font-weight 作用：規定文字粗細格式：fo

前端(2)：CSS

一、CSS

1、CSS語法

2、CSS註釋

二、CSS的引入方式

1、行內樣式

2、內部樣式

3、外部樣式

三、CSS選擇器

1、基本選擇器

2、組合選擇器

3、屬性選擇器

4、分組和巢狀

5、偽類選擇器

6、偽元素選擇器

四、選擇器的優先順序

1、CSS繼承

2、樣式檔案優先順序（重要）

五、CSS字型和文字屬性相關

1、通用的屬性：寬和高（width(寬度) 和 height(高度)）

2、文字字型

3、字型大小和粗細

4、文字顏色

5、文字對齊

6、文字裝飾

六、CSS背景和邊框屬性

1、背景屬性

2、邊框屬性

3、display 屬性

七、CSS盒子模型

1、margin 外邊距

2、padding 內填充

八、浮動與清除浮動、處理溢位

1、浮動（float）

2、清除浮動（clear）

3、溢位（overflow）

九、定位（position）

十、元素透明度與層疊順序

1、opacity (元素透明度)

2、z-index（層疊順序設定）

3、頂部導航欄練習

相關推薦