3、第九周 - WEB框架應用 - HTML中CSS的應用

阿新 • • 發佈：2018-09-10

底部 web 樣式 play 復制。 ade blue 外部 input

HTML中的CSS應用方式

一、CSS的選擇器

HTML中常用的CSS方式，有兩種：標簽中的style屬性；把樣式在head頭中定義，style標簽樣式。

1、標簽的style屬性（設置比較簡單）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 80%;width: 60%;background-color: blue">chen1203</div>
    <!--  style="height: 80%;width: 60%;background-color: blue" 就是在標簽中定義的用樣式-->
</body>
</html>

2、寫在head裏面，style 標簽中的樣式。

- ID選擇器
	#i1 {
	}

- class 選擇器（推薦使用）
	.cl{
		定義名字
	}
	<標簽 class=‘名稱‘> </標簽>
- 標簽選擇器
	div{
	 ....
	}
    所有div 設置此樣式
	
- 層級選擇器（關聯選擇器，都是空格）
	.cl .c2 div{
	}
- 組合選擇器（逗號）
	#i1,#i2,#i3{
	}   
        .i1,.i2,.i3{
	}
- 屬性選擇器
	對選擇到的標簽在通過屬性在進行一次篩選
	.cl[n=‘alex‘]{屬性}

如看效果，直接代碼復制。

A 、ID選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id_set1{
            height: 80%;width: 60%;background-color: blue
        }
    </style>   
</head>
<body>
    <div id="id_set1">chen1203</div>
</body>
</html>

<!--在body中，ID 是唯一的值，不能設置重復 -->

B、class 選擇器（因為ID是唯一的值，body中不能設置重復。但class可以）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cl_set_1 {
            height: 80%;width: 60%;background-color: blue
        }
    </style>
</head>
<body>
    <div class="cl_set_1">chen1203</div>
    <div class="cl_set_1">chen</div>    
</body>
</html>
<!-- class 選擇器與ID選擇器，具體的區別就是，head中把#換.; 且class支持的標識不是唯一，可以寫多個 -->

C、標簽選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            height: 80%;width: 60%;background-color: blue
        }
    </style>
</head>
<body>
    <div class="cl_set_1">chen1203</div>
    <div class="cl_set_1">chen</div>
    <span>fasdfasdfasf</span>
</body>
</html>
<!-- 只針對span標簽，進行樣式渲染，其他的div 標簽並沒有發現改變-->

D、層級選擇器（也叫關聯選擇器）

h1 b: 說明h1標簽下與b標簽才生效
h1>b: 說明h1下面的b標簽全部生效
h1+b: 說明h1標簽相連的b標簽才會生效
h1~b: 說明h1類下面的所有b都生效

<!--  層級選擇器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
         h1 b {
             color: red;
         }
    </style>
</head>
<body>
    <h1>
        <b>chen1203</b>
    </h1>
    <h2>
        <b>chen1204</b>
    </h2>
</body>
</html>

<!-- 子元素選擇器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1 b { color:blue; }
        h1 > b { color:red; }
    </style>
</head>
<body>
    <h1>
        <b>chen1203</b>
    </h1>
    <h1>
        <i>chen
            <b>chen</b>
        </i>
    </h1>
</body>
</html>

<!-- 相鄰選擇器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1+b { color:blue; }
    </style>
</head>
<body>
    <h1>OK</h1>
    <b>chen1203</b>
    <h1>
        <i>chen
            <b>chen</b>
        </i>
    </h1>
</body>
</html>

E、組合選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id_1,#id_2,#id_3{
            height: 80%;width: 60%;background-color: #57ff82
        }
<!-- 對應ID選擇器 -->
        .cl_set_1,.cl_set_2,.cl_set_3{
            height: 80%;width: 60%;background-color: blue
        }
<!-- 對應class 選擇器 -->
    </style>
</head>
<body>
    <div id="id_1">chen_1</div>
    <div id="id_2">chen_2</div>
    <span id="id_3">chen_3</span>
    <div class="cl_set_1">chen1203</div>
    <div class="cl_set_2">chen</div>
    <span class="cl_set_3">chenqinq</span>
</body>
</html>

F、屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[id=‘username‘]{height: 80%;width: 60%;}<!-- 只針對id為username的input標簽進行調整-->
    </style>

</head>
<body>
    <label for="username">用戶名：</label>
    <input id=‘username‘ type="text" name="user">
    <label for="pwd">密碼：</label>
    <input id=‘pwd‘ type="text" name="user">
</body>
</html>

二、CSS的優先級及外部調用的方式

1、 CSS在HTML中執行的優先級

優先級：標簽上的style優先，編寫順序，就近原則

測試代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: red;
        }
        .c2 {
            background-color: blue;
        }
    </style>
</head>
<body>
    <span class="c1 c2" style="background-color: green">chen1203</span>
</body>
</html>

谷歌調出：開發者工具進行檢測，如圖,可以點擊大框裏面的進行點。驗證，執行的順序。

技術分享圖片

2、 CSS在外部調用的方式

A、CSS樣式，可以寫在單獨的文件中，外部需要用 <link rel="stylesheet" href="comm.css"> 調用。過程如下：

編寫CSS文件，命名為comm.css ,註意在編寫css文件時，不需要<style>標簽。

#set_1 {
            background-color: #5655ff;
        }
.c1,span{
            background-color: #804668;
}

編寫css.html文件，並引用外部的css樣式。head 中添加 <link rel="stylesheet" href="comm.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="comm.css"> <!-- 外部引用css文件 -->
</head>
<body>
    <div id="set_1">1</div>
    <div class="c1">af</div>
    <div >2</div>
    <div class="c1">3</div>
    <span >4</span>
</body>
</html>

如圖：

技術分享圖片

B 、訪問看樣式加載的效果

技術分享圖片

三、CSS的邊框及其他常用樣式

邊框的設置：

寬度，樣式，顏色 (border: 4px dotted red;)---- 設置邊框虛線
border-left;只設置邊框的左邊
border-right;只設置邊框的右邊
border-top;只設置邊框的頂部

邊框的樣式：

height 高度，百分比
wight 寬度，百分比，像素
text-align:center 水平方向居中
line-height 垂直方式根據標簽高度自動居中
color 設置字體顏色
font-size 字體大小
font-weight 字體加粗

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<div style="border: dotted;height: 20px;width: 200px ">chen1203</div>-->
    <div style="border: 1px solid red ">chen1203</div>
    <p></p>
    <div style="
    height: 48px;
    width: 80%;
    border: 1px solid red;
    text-align:center;
    line-height: 48px;
    color: green;
    font-size: large;
    font-weight: bold"
    >qing</div>
</body>
</html>

效果：

技術分享圖片

四、CSS的float樣式

　　float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
　　如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
　　float樣式在頁面的導航條上，使用的比較廣，比較常用。讓標簽浪起來，塊級標簽也可以堆疊。

可定的值：

left 元素向左浮動
right 元素向右浮動。
none 默認值。元素不浮動，並會顯示在其在文本中出現的位置。
inherit 規定應該從父元素繼承 float 屬性的值。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width:30%;background-color: red; float:left">1</div>
    <div style="width:60%;background-color: blue;float:right">2</div>
</body>
</html>

效果：（兩個div中，可以堆疊起來使用）

技術分享圖片

補充：（ <div style="clear: both"></div> ）的功能點，不好描述請看圖吧

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0 auto">
    <div class="pg_header">
        <div style="float: left">收藏本站</div>
        <div style="float: right">
            <a>登錄</a>
            <a>註冊</a>
        </div>
    </div>
    <br />
    <div style="width: 300px;border: 1px solid red">
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="clear: both"></div>  <!--  主要把紅色邊框調整出來 -->
    </div>
</body>
</html>

效果：

技術分享圖片

五、CSS的display樣式

　　display 屬性規定元素應該生成的框的類型。

display 可用參考值：

display: none -- 讓標簽消失(可以設置彈出對話框、關閉對話框)
display: inline;
display: block;
display: inline-block;

解析：

inline-block 兩者兼有
具有inline, 默認自己有多少，占用多少
具有block ，可以設置高度、寬度，padding 、margin

++++ +++ ++ ++ ++ +++ +++ ++ +++ ++ +++ ++ ++ +++
行內標簽：無法設置高度、寬度，padding margin
塊級標簽: 設置高度，寬度 padding margin

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: red;display: inline-block"> fadfafaf </div>
    <span style="background-color: red;display: block">fnnnnn</span>
    <a style="background-color: red;display: inline-block"> fadfafaf </a>
    <span style="background-color: red;display: none">chen1203</span>
</body>
</html>

效果：(第4行被隱藏掉了)

技術分享圖片

補充：padding\margin

觀察兩個工具中，樣式的具體標變化

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>margin</h2>
    <div style="border: 1px solid red;height: 70px ">
        <div style="background-color: green;height: 50px;
        margin-top: 0px"></div>
    </div>

    <h3>padding</h3>
    <div style="border: 1px solid red;height: 70px ">
        <div style="background-color: green;height: 50px;
        padding-top: 0px"></div>
    </div>

</body>
</html>

效果：

技術分享圖片　
　　兩者區別在於：padding 與margin 根據開發者代碼裏面去看。用鼠標調整padding-top、margin-top像素，就可以知道margin的綠色塊是整體往下移動，而padding就向下擴大，就想瀑布一樣，調整像素，越來越大。

六、CSS的postion樣式

postion 幾種常用的屬性：

absolute

生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

fixed

生成絕對定位的元素，相對於瀏覽器窗口進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

relative

生成相對定位的元素，相對於其正常位置進行定位。
因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。

static 默認值。

沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

inherit 規定應該從父元素繼承 position 屬性的值。

這裏重點介紹一下，fixed 的定位元素。postion 為fixed 把元素固定頁面的某個地方

1、舉例，（頂部導航固定、在滑動頁面的情況下，不會進行收縮。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg_header{
            height: 48px ;
            background-color: cornflowerblue;
            color: black;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            margin-top:0px;
            margin-left:10px;
            margin-right: 10px;
        }
        .pg_body{
            height: 500px ;
            background-color: #dddddd;
            margin-top: 50px;
            margin-left:2px;
            margin-right: 2px;
        }
    </style>
</head>
<body>
    <div class="pg_header">頭部</div>
    <div class="pg_body">內容</div>
    <div class="pg_bottom">底部</div>
</body>
</html>

效果，如下：

技術分享圖片

2、舉例，（右下角，生成按鈕，點擊返回頂部。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .return_top_header{
            width: 50px;
            height: 50px;
            background-color: #5655ff;
            color: white;
            position: fixed;
            right: 20px;
            bottom:20px;

        }
    </style>

</head>
<body>
    <div onclick="TOP()" class="return_top_header">返回頂部</div>
    <div style="height: 5000px;background-color: #dddddd;">數據</div>
    <script>
        function TOP() {
            document.body.scrollTop = 0;
        }
    </script>
<!-- onclick="TOP()" 的名稱定義要跟 script 標簽中的function TOP() 名字對應 -->
</body>
</html>

效果，如下:

技術分享圖片

驗證：瀏覽器點擊不了的話，註意清楚緩存。

3、第九周 - WEB框架應用 - HTML中CSS的應用

底部 web 樣式 play 復制。 ade blue 外部 input HTML中的CSS應用方式一、CSS的選擇器 HTML中常用的CSS方式，有兩種：標簽中的style屬性；把樣式在head頭中定義，style標簽樣式。 1、標簽的style屬性（設置比較簡單）。

3、第九周 - WEB框架應用 - HTML中CSS的應用

補充：padding\margin

3、第九周 - WEB框架應用 - HTML中CSS的應用

2、第九周 - WEB框架應用 - HTML的初步認識及標簽的使用

3、第八周 - 網絡編程進階 - Redis消息緩存

第九周web作業：history of grammar

第九周專案一複數類中的運算子過載（續）

第九周專案三-分數類中的運算子過載（續）

6、第八周 - 網絡編程進階 - Python語言下的SqlAlchemy ORM框架應用

Python自動化開發學習的第十一周----WEB框架--Django基礎

web應用、HTTP協議及web框架簡介

Web第九周作業：History of Program（1950--2020）

第九周學習筆記：ADO.Net中DataSet的應用

第九周【專案3

web第九周作業——program發展史及 forecast program發展史及 forecast

第九周專案三：稀疏矩陣的三元組表示的實現及應用（2）

《C++第九周實驗報告3-1》----接第8周任務3，定義分數類中運算子過載，實現分數的輸入輸出

第九周【專案3-分數類中的運算子過載（續）】

3月第4周業務風控關註 |9款違規App曝光：涉及惡意扣費、隱私竊取、×××

機器學習公開課筆記第九周之大數據梯度下降算法

機電傳動控制作業第九周作業補充

1、移動端 2、後臺 3、移動端，Web 端 4、 PC端

3、第九周 - WEB框架應用 - HTML中CSS的應用

補充：padding\margin

相關推薦