文章目錄

一、CSS背景及應用

1.1 背景顏色圖片及其平鋪

            background-color: pink; /*背景顏色*/
            background-image: url(images/test04.jpg); /*背景圖片，相對路徑*/
            background-repeat: no-repeat;   /* 是否平鋪：repeat、repeat-x、repeat-y、no-repeat */

1.2 背景位置

            /* 1.利用方位名詞來更改背景圖片位置 */
            /* background-position: left top; 默認的是 左上角 */
            /* background-position: bottom right; 右下角；方位名詞沒有順序，誰在前都可以 */
            /* background-position: center center; 水平垂直居中 */
            /* background-position: left; 如果方位名詞只寫一個，另外一個默認爲center */

            /* 2.精確單位 第一個值是x座標，第二個值是y座標 */
            background-position: 10px 30px;

            /* 3.混搭 */
            background-position: 10px center;
            /* center 10px 水平居中，垂直是10px */
            /* 10px center 水平10px，垂直居中 */

1.3 背景附着（固定）

            background-attachment: scroll; /* 默認是 滾動的 */

1.4 背景簡寫形式☆☆

        div {
            width: 550px;
            height: 550px;            
            /* 背景顏色 背景圖片 是否平鋪 是否滾動 背景位置 */
            background: #00f url(images/test04.jpg) no-repeat scroll center;
        }

1.5 背景半透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: #000 url(images/test02.jpg) no-repeat scroll center 50px;
        }
        div {
            height: 400px;
            background: rgba(0,0,0,0.5); /*背景半透明*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

1.6 背景圖片縮放

        div {
            width: 400px;
            height: 500px;            
            background: hotpink url(images/test02.jpg) no-repeat;
            
            /*設置背景圖片大小*/

            /* 1.設置長度或百分比 */
            /* background-size: 100px; 修改寬度或高度，防止圖片扭曲 */
            /* background-size: 50%; */

            /* 2.設置爲cover */
            /* 會自動調整縮放比例，保證圖片始終填充滿背景區域，如有溢出部分則會被隱藏 */
            /* background-size: cover;  */

            /* 3.設置爲contain */
            /* 會自動調整縮放比例，保證圖片始終完整顯示在背景區域，部分背景區域裸露 */
            background-size: contain;
        }

1.7 多背景圖片

        div {
            width: 1500px;
            height: 1500px;
      
            background: url(images/test01.jpg) no-repeat left top,
                 blue url(images/test02.jpg) no-repeat right bottom;
        }

1.8 凹凸文字效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        div {
            color: #ccc;
            font: 700 80px "微軟雅黑";
        }
        
        /* 凸起的文字 */
        div:first-child {
            text-shadow: 1px 1px 1px #000,
                    -1px -1px 1px #fff;
        }

        /* 凹下的文字 */
        div:last-child {
            text-shadow: 1px 1px 1px #fff,
                    -1px -1px 1px #000;            
        }
    </style>
</head>
<body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
</body>
</html>

1.9 導航欄案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #000;
        }
        a {
            display: inline-block;
            width: 200px;
            height: 50px;         

            text-align: center; /*文字水平居中*/
            line-height: 50px; /*文字垂直居中 行高=div高*/

            text-decoration: none; /*取消下劃線*/

            font-size: 22px;
            color: #fff;
        }
        a:hover {
            background-color: orange;
        }
    </style>
</head>
<body>
    <a href="#">專區說明</a>
    <a href="#">申請資格</a>
    <a href="#">兌換獎勵</a>
    <a href="#">下載遊戲</a>
</body>
</html>

二、CSS三大特性

2.1 CSS層疊性

        div {
            color: red;
        }
        div {     /*執行後面這一個*/
            color: blue;
            font-weight: 700;
        }

2.2 CSS繼承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
            font-size: 18px;
        }      
    </style>
</head>
<body>
    <div>
        <p>CSS繼承性</p>
    </div>
</body>
</html>

2.3 CSS優先級

!important > 內聯樣式 > ID選擇器 > 類選擇器 > 標籤選擇器

2.4 權重疊加

2.5 繼承的權重爲0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .daohanglan {   /* 0,0,1,0 是nav的，不是li的 */
            color: red;
        }
        li { /* 0,0,0,1 */
            color: pink;
        }
    </style>
</head>
<body>
    <nav class="daohanglan">
        <ul>
            <li>繼承的權重爲0</li>
        </ul>
    </nav>
</body>
</html>

三、CSS盒模型及應用

3.1 盒子模型的組成

3.2 盒子邊框

        div {
            width: 200px;
            height: 200px;
            border-width: 3px;             
            border-style: double;
            border-color: pink;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            border: 0;
        }          
        /* 邊框綜合寫法 */
        .email {
            border-top: 1px solid deeppink;
            border-bottom: 1px solid deeppink;
            border-left: 1px solid deeppink;
            border-right: 1px solid deeppink;
        }
        .tel {
            border: 1px solid skyblue;
        }
    </style>
</head>
<body>    
    郵 箱：<input type="text" class="email"><br><br>
    手 機：<input type="tel" class="tel">
</body>
</html>

3.3 合併表格細線邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       table {
           width: 350px;
           height: 150px;
           border: 1px solid red;   
           border-collapse: collapse;  /*合併表格細線邊框*/     
       }
       td {
           border: 1px solid red;
       }
    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="5">
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>           
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>      
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>          
        </tr>
    </table>
</body>
</html>

3.4 圓角矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        div:first-child {
            border-radius: 20px; /*一個數值表示4個角都是相同的弧度*/            
        }
        div:nth-child(2) {
            border-radius: 50% ; /*取寬度和高度的一半 圓形*/
        }
        div:nth-child(3) {
            border-radius: 20px 40px; /*左上角=右下角=20px；右上角=左下角=40px*/            
        }
        div:nth-child(4) {
            border-radius: 10px 40px 80px;/*左上角10、右上角40、右下角80、左下角40*/
        }
        div:nth-child(5) {
            border-radius: 10px 40px 80px 100px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>  
</body>
</html>

有趣的形狀：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }              

        /* 膠囊形狀 */
        div:first-child {
            border-radius: 50px;
            height: 50px;
        }
        /* 檸檬形狀 */
        div:nth-child(2) {
            border-radius: 50px 0;

        }
        /* 圓形 */
        div:nth-child(3) {
            border-radius: 50%;
        }
    </style>
</head>
<body>      
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>
</html>

3.5 盒子內邊距

3.6 導航欄案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        nav {
            height: 41px;
            background-color: #fcfcfc;
            border-top: 3px solid #ff8500; /*上邊框*/
            border-bottom: 1px solid #edeef0; /*下邊框*/
        }
        nav a {
            font-size: 14px;
            color: #4c4c4c;
            text-decoration: none;                     

            display: inline-block;       
            height: 41px;
            padding: 0 15px; /*利用padding值，水平居中*/ 
            line-height: 41px; /*垂直居中*/            
        }
        a:hover {
            background-color: orange;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#">首頁</a>
        <a href="#">手機新浪網</a>
        <a href="#">網站導航</a>
        <a href="#">三個字</a>
    </nav>
</body>
</html>

3.7 外邊距

        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 外邊距 */            
            margin: 30px;
        }

3.7.1 外邊距實現盒子居中對齊

        /* 盒子居中對齊 */
        div {
            width: 200px; /* 指定盒子的寬度 */
            height: 200px;
            background-color: pink;

            /* 帶有寬度的盒子，水平居中對齊 */            
            margin: 30px auto;
        }

3.7.2 文字水平居中與盒子水平居中

        div {
            height: 100px;
            width: 300px;
            border: 1px solid pink;
            
            text-align: center; /*文字水平居中*/
            margin: 10px auto; /*盒子水平居中*/
        }

3.7.3 插入圖片與背景圖片

①插入圖片

        section img {
            /* 更改插入圖片的大小 */
            width: 200px;
            height: 200px;
            /* 更改插入圖片的位置 */
            margin-top: 30px;
            margin-left: 50px;
        }

<section>
        <img src="images/test04.jpg">
    </section>

②背景圖片

        aside {
            width: 400px;
            height: 400px;
            border: 1px solid purple;                       
            background: #fff url(images/test04.jpg) no-repeat scroll center;
            /* 更改背景圖片大小 */
            background-size: 200px 210px; 
        }

Notes：
一般情況下，背景圖片適合做一些小圖標使用；
產品展示之類的就用插入圖片。

3.8 清除內外邊距

        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p {
            padding: 0;
            margin: 0;
        }

3.9 外邊距合併

3.9.1 相鄰塊元素垂直外邊距的合併

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        div:first-child {
            margin-bottom: 100px;
        }
        div:last-child {
            margin-top: 50px;
            background-color: purple;
        }

3.9.2 嵌套塊元素垂直外邊距的合併

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            /*margin-top: 100px;*/
            
            /* 解決外邊距合併 */
            /* border: 1px solid red; */
            /* padding: 1px; */
            overflow: hidden;

        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

3.10 盒子模型的寬度和高度（盒子的計算尺寸）


        div {
            width: 59px; /* width=74-15 */
            height: 33px;
            border: 1px solid #c1c1c1;

            margin: 50px;
            line-height: 33px;
            font-size: 16px;
            color: #666;            

            border-radius: 3px 0 0 3px;
            padding-left: 15px;
        }

    <div>新聞</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 30px;
            border: 1px solid red;
            /* 盒子沒有給定寬度，padding左右不會影響盒子大小 */         
            padding-left: 20px;                      
        }

        /* 盒子寬度，繼承了父親的寬度，padding左右不會影響盒子大小 */
        nav {
            width: 300px;
            height: 40px;
            border: 1px solid pink;
        }
        p {           
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <div>哈哈哈，小光光</div>
    <nav>
        <p>Hello World</p>
    </nav>
</body>
</html>

3.11 盒子模型佈局穩定性

3.12 CSS盒模型

3.13 文字陰影 && 盒子陰影

3.13.1 文字陰影

        h1 {
            font-size: 100px;
            text-shadow: 6px 3px 3px rgba(0,0,0,0.5);
        }

    <h1>穩住，我們能贏！</h1>

3.13.2 盒子陰影

        div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); 
        }

Web前端基礎 —— 【02】CSS和CSS3 ②

文章目錄

一、CSS背景及應用

1.1 背景顏色圖片及其平鋪

1.2 背景位置

1.3 背景附着（固定）

1.4 背景簡寫形式☆☆

1.5 背景半透明

1.6 背景圖片縮放

1.7 多背景圖片

1.8 凹凸文字效果

1.9 導航欄案例

二、CSS三大特性

2.1 CSS層疊性

2.2 CSS繼承性

2.3 CSS優先級

2.4 權重疊加

2.5 繼承的權重爲0

三、CSS盒模型及應用

3.1 盒子模型的組成

3.2 盒子邊框

3.3 合併表格細線邊框

3.4 圓角矩形

3.5 盒子內邊距

3.6 導航欄案例

3.7 外邊距

3.7.1 外邊距實現盒子居中對齊

3.7.2 文字水平居中 與 盒子水平居中

3.7.3 插入圖片 與 背景圖片

3.8 清除內外邊距

3.9 外邊距合併

3.9.1 相鄰塊元素垂直外邊距的合併

3.9.2 嵌套塊元素垂直外邊距的合併

3.10 盒子模型的寬度和高度（盒子的計算尺寸）

3.11 盒子模型佈局穩定性

3.12 CSS盒模型

3.13 文字陰影 && 盒子陰影

3.13.1 文字陰影

3.13.2 盒子陰影

3.7.2 文字水平居中與盒子水平居中

3.7.3 插入圖片與背景圖片