Python自動化開發學習14-html和css

時間 2021-01-30

標籤 css html 前端 html5 python web chrome 數據庫瀏覽器服務器欄目 Python 简体版

原文原文鏈接

插曲

以前已發佈了一次了。在編寫和發佈的過程當中一直有一個BUG困擾着我。最後被我找到了，只能暫時避開這個BUG從新發布一篇了。以前那篇就被我刪掉了，瀏覽和收藏的也沒了。css

那個問題我也記錄下來了：https://blog.51cto.com/steed/2071264html

Web的三個層次

網頁設計思路是把網頁分紅三個層次，即：結構層(HTML)、表示層(CSS)、行爲層(Javascript)。
形象的比喻，先是HTML捏了一我的，而後CSS則是給人穿上衣服，最後經過JS讓人動起來。前端

Web服務的本質

對於全部的Web應用，本質上其實就是一個socket服務端，用戶的瀏覽器其實就是一個socket客戶端。用戶向服務器發送一個請求。而後服務器響應，將數據和格式發回給客戶端，而後斷開這個鏈接。客戶端收到返回的數據後，經過瀏覽器將數據按照必定的格式呈現出來。整個過程就是一個socket的短鏈接。
下面是一個服務端的python代碼，實現一個簡單的Hello World：html5

import socket

def handle_request(conn):
    data = conn.recv(1024)  # 接收數據，隨便收到啥咱們都回復Hello World
    conn.send('HTTP/1.1 200 OK\r\n\r\n'.encode('utf-8'))  # 這是什麼暫時不須要知道，客戶端瀏覽器會處理
    conn.send('Hello World'.encode('utf-8'))  # 回覆的內容，就是網頁的內容

def main():
    # 先起一個socket服務端
    server = socket.socket()
    server.bind(('localhost', 8000))
    server.listen(5)
    # 而後持續監聽
    while True:
        conn, addr = server.accept()  # 開啓監聽
        handle_request(conn)  # 將鏈接傳遞給handle_request函數處理
        conn.close()  # 關閉鏈接

if __name__ == '__main__':
    main()

在本機啓動上面的socket以後，直接使用瀏覽器做爲客戶端鏈接。在地址欄輸入 http://127.0.0.1:8000/ 或 http://localhost:8000/ 以後，瀏覽器上就會顯示服務端返回的內容了。
這裏顯示的內容比較low，實際應用中，要返回給客戶端的網頁內容比較大。並且除了數據，還會包括格式（html標籤）。實際應用中會將全部的內容寫成一個html文件，而後再返回數據的時候調用這個文件。
先寫一個簡單的帶一點標籤的html文件，index.html:python

<h1 style="background-color: red">Hello World</h1>
<a href="http://www.51cto.com">51CTO</a>
<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
</table>

而後咱們的socket再也不發送簡單的數據，而是讀取文件，將文件中的數據發送給客戶端。
在上面代碼的基礎上修改一下handle_request函數的內容：web

def handle_request(conn):
    data = conn.recv(1024)  # 接收數據，隨便收到啥咱們都回復Hello World
    conn.send('HTTP/1.1 200 OK\r\n\r\n'.encode('utf-8'))  # 這是什麼暫時不須要知道，客戶端瀏覽器會處理
    # conn.send('Hello World'.encode('utf-8'))  # 回覆的內容
    # 讀取html文件，將文件內容返回給客戶端
    with open('index.html' , encoding='utf-8') as file:
        html = file.read()
        conn.send(html.encode('utf-8'))

如今已經將html和咱們的socket服務分離了，須要返回給客戶端什麼樣的頁面，咱們只須要編輯修改咱們的html文件便可。而咱們的socket服務器代碼則負責和客戶端的數據交換。
以後學習Web暫時只須要關注html的部分就行了，直接使用瀏覽器打開本地的html文件就能夠查看實現的效果。chrome

html

使用pycharm直接建立一個html文件，內容以下（HTML5的模板）：數據庫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html> ：這是一個聲明，聲明下面html的版本。這裏是一個html5的聲明。這個不是html標籤，下面的都是。
<html lang="en"> ：這是一個html標籤，裏面的 lang="en" 是標籤內部的屬性。通常html標籤這麼寫就好了。這個屬性也用不着。
<head> ：head標籤，html的頭，後面詳講
<body> ：body標籤，html的主體，後面詳講
最後補充一個
註釋：瀏覽器

標籤的分類

主動閉合標籤：大多數的標籤都是這種形式。標籤有兩部分，好比上面的<html>、<head>、<body>，後面都有一個對應的</html>、</head>、</body>來主動閉合這個標籤。
自閉合標籤：像上面 head 中的 meta 標籤，就是一個自閉合標籤。這類標籤比較少。另外也能夠這樣寫<meta />，加上一個/符號，不影響瀏覽器的識別，可是能夠直觀的讓人看明白各個標籤已經閉合了。推薦加上表示閉合的/。服務器

head內標籤

特殊符號

有些特殊符號瀏覽器可能沒法直接識別，須要轉義。下面列舉幾個經常使用的，更多的只能到時候再去查了：

HTML源代碼	顯示符號	描述
		空格
`<`	<	小於號或顯示標記
`>`	>	大於號或顯示標記
`&`	&	可用於顯示其它特殊字符
`"`	「	雙引號
`®`	®	已註冊
`©`	©	版權
`™`	™	商標

上面的源碼可能會被翻譯成符號，若是顯示有問題，就去別處查吧

body內標籤-入門

先了解一下下面幾個簡單的標籤
<p> ：段落標籤，段落和段落直接會有行間距
<br> ：換行標籤，自閉合，也能夠這麼寫<br />
<h1> - <h6> ：標題標籤，只有6個級別

塊級標籤和行內標籤

<br> 這種是自閉和的，標籤之間沒有內容，因此都不屬於
塊級標籤：標籤之間的內容會佔一整行，上面的幾個都是塊級標籤
行內標籤：也叫內聯標籤，標籤之間的內容接着前面的內容顯示，不會換行
<span> ：這就是一個行內標籤。這個標籤自己沒有任何格式就是一個白板，可是能夠經過定義標籤的屬性，來定義標籤之間內容的格式。
<div> ：也是一個白板，可是是一個塊級標籤。這個標籤很重要，作前端最重要的就是要掌握div+css，作頁面佈局的。
<form> ：表單標籤，在下面的input裏面講。

body內標籤-提交數據

下面的這些標籤都是用於客戶端向服務器提交數據的

input標籤

經過登陸表單來說一下input標籤，還有一個form標籤會用到，順便也講了
<input> ：根據不一樣的type屬性，會有多種形式。
下面的body中有4種input，能夠在瀏覽器中打開。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action=" ">
    <input type="text" />
    <input type="password" />
    <input type="button" value="登陸1" />
    <input type="submit" value="登陸2" />
</form>
</body>
</html>

type="text" ：能夠輸入文本，
type="password" ：能夠輸入密碼，
type="button" ：是一個按鈕，如今點下去沒效果，還須要其餘東西。
type="submit" ：提交表單，是另一種按鈕。一樣沒效果，直接將form表單的內容提交到form的action屬性指定的url。
不過上面的input內容還沒法識別，須要加上name屬性：

<input type="text" name="username" />
<input type="password" name="pwd" />

這樣就會把數據組織成一個字典的形式提交出去，name就是字典的key，你在前端文本框輸入的數據就是字典的value。這樣提交以後，就能夠經過name屬性的值也就是字典的key獲取到前端文本的內容。這部分還得後面再講了，暫時只要會以這樣的形式提交，以後再學怎麼獲取到值以及處理。
<form> 標籤還有一個method屬性，指定提交的形式，默認是GET。一共就2個可選值GET和POST。指定的話就是這麼寫：
<form action=" " method="get">或<form action=" " method="post"> 。
以GET形式提交，會把表單的內容拼接到url後面，而後發送出去。放在http的請求頭中。
以POST形式提交，會把表單的內容放在內容中發送出去。放在http的請求體中。
HTTP請求報文：HTTP請求報文由3部分組成（請求行+請求頭+請求體）。具體這裏就不研究了。
如今還不會寫web服務，不過有現成的服務器能夠測試提交表單。打開瀏覽器，在瀏覽器中輸入這樣的url：「https://www.baidu.com/s?wd=你要搜索的內容「 ，就能夠直接打開搜索結果的頁面。因而本身編輯一個網頁，內容以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="https://www.baidu.com/s">
    <input type="text" name="wd" />
    <input type="submit" value="搜索" />
</form>
</body>
</html>

如今用瀏覽器打開咱們本身的網頁，在文本框輸入你要搜索的內容，而後點擊搜索按鈕查看效果。
<input type="text" name="wd" value="默認值" /> ：這裏也能夠加上value屬性，這樣打開的頁面中文本框中再也不是空白，而是會有一個默認值。
type="radio" ：單選框，相同的name屬性表示是一個選擇項的，定義不一樣的value值能夠獲取到你的選擇
type="checkbox" ：複選框，相同的name屬性表示是一個選擇項的，每一個選項給不用的value值，能夠判斷你選中了哪些，沒選中哪些。

<body>
    <p>請選擇性別：<br /></p>
    男：<input type="radio" name="sex" value="M" />
    女：<input type="radio" name="sex" value="F" />
    <p>愛好：</p>
    足球：<input type="checkbox" name="favor" value="football" />
    藍球：<input type="checkbox" name="favor" value="basketball" />
    排球：<input type="checkbox" name="favor" value="volleyball" />
    棒球：<input type="checkbox" name="favor" value="baseball" />
</body>

經過屬性 checked="checked" 能夠設置選項默認被選中。
上傳文件
<input type="file" name="filename" /> ：能夠用於上傳文件。要上傳文件，須要將這個input放到form標籤中，而且在form標籤中要定義 enctype="multipart/form-data" 。由於還須要服務器端處理，在講到web框架的時候再細講了。
<input type="reset" value="重置" /> ：能夠重置form中的全部內容，還原到打開時候的默認值。

多行文本-textarea標籤

textarea標籤，用於實現輸入多行文本，主動閉合標籤，在標籤之間的部分能夠寫上默認值。通常會加上name屬性，用於取數據。
這個就不貼代碼了。並且就是這個標籤會被頁面識別爲代碼，即便你放在代碼塊中，感受是個BUG。致使後面的內容都會有問題。

下拉列表-select標籤

簡單的下拉列表代碼以下：

<select name="city1">
    <option value="BJ">北京</option>
    <option value="SH">上海</option>
    <option value="GJ">廣州</option>
    <option value="SZ">深圳</option>
</select>

在select標籤裏設置name屬性，用於取數據
每一個option標籤裏設置value屬性，用於確認該選項是否被選中
size屬性：能夠設置size屬性，將列表自動展開必定的項目
selected屬性：設置 selected="selected" ，將該選項設爲默認
multiple屬性：設置 multiple="multiple" ，將列表定義爲多選。能夠經過Ctrl選中多個，也能夠經過Shift或者拖拽來連續選中多個

<select name="city2" size="3">
    <option value="BJ">北京</option>
    <option value="SH" selected="selected">上海</option>
    <option value="GJ">廣州</option>
    <option value="SZ">深圳</option>
</select>
<select name="city3" size=6 multiple="multiple">
    <option value="BJ">北京</option>
    <option value="SH" selected="selected">上海</option>
    <option value="GJ">廣州</option>
    <option value="SZ">深圳</option>
</select>

另外還有一個分組的下拉列表，代碼以下：

<select name="city1">
    <optgroup label="直轄市">
        <option value="BJ">北京</option>
        <option value="SH">上海</option>
    </optgroup>
    <optgroup label="江蘇省">
        <option value="NJ">南京</option>
        <option value="SZ">蘇州</option>
        <option value="WX">無錫</option>
    </optgroup>
</select>

小結

以上，可以把數據提交給服務器的標籤就講完了。
以後的標籤就是用來點綴，用來頁面佈局等等這類功能了。

body內標籤-佈局

下面是一些經常使用的功能性的或者是頁面佈局的標籤

超連接-a標籤

經過a標籤能夠定義超連接，經過超連接咱們能夠實現頁面的跳轉：

<body>
<a href="http://www.baidu.com">百 度</a>
<a href="http://www.163.com/" target="_blank">網易</a>
</body>

標籤之間的內容是你的超連接顯示的內容，而後定義href的屬性，指向你要跳轉的頁面。
另外還能夠定義target屬性，這裏用了「_blank」，能夠在新的標籤頁打開。另外target還有別的屬性，反正不是很重要，有興趣就本身再去試了。
另外a標籤還有一個做用，就是錨。我理解爲頁面內的跳轉。
爲了讓頁面內容足夠大（須要滾動），定義一下div的高度，這個之後會講。
另外這裏不能用name屬性定位了，須要用id屬性。

<body>
<a href="#chapter_1">第一章</a>
<a href="#chapter_2">第二章</a>
<a href="#chapter_3">第三章</a>
<a href="#chapter_4">第四章</a>
<div style="height: 600px" id="chapter_1">第一章節的內容</div>
<div style="height: 600px" id="chapter_2">第二章節的內容</div>
<div style="height: 600px" id="chapter_3">第三章節的內容</div>
<div style="height: 600px" id="chapter_4">第四章節的內容</div>
</body>

a標籤中的href屬性在定位錨點的時候須要在前面加上"/#"號，後面跟上id的值。另外，若是在瀏覽器中直接輸入url，後面跟上"#chapter_3"的話，也是打開頁面而且直接定位到錨點。

圖片-img標籤

先準備好出的圖片的路徑，能夠是本地的圖片，也能夠是網上的圖片。本地圖片貌似不能是絕對路徑，不過應該能夠用 ..\ 表示上一級目錄。我這裏都把圖片放到html文件的同級目錄裏測試了。
另外，還能夠爲圖片加上超連接。只須要將圖片包在一個a標籤裏面就好了（以前放的是文字，這裏只是換成了圖片）。

<body>
<body>
<img src="1.jpg">
<a href="http://www.baidu.com">
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png">
</a>
</body>
</body>

圖片的大小也能夠調整，在img標籤中設置style屬性（這個還得後面講）：

<img src="2.jpg" style="height: 100px">

alt屬性：爲img加上alt屬性，若是圖片不存在，則會顯示alt的值。
title屬性：爲img加上title屬性，鼠標懸停在圖片上的時候，會顯示title的值。

<body>
<img src="123.jpg" alt="圖沒了">
<img src="1.jpg" title="這是一張測試圖">
</body>

列表-ul標籤、ol標籤、dl標籤

ul是無序列表，ol是有序列表。效果直接上代碼試：

<ul>
    <li>薩爾</li>
    <li>沃金</li>
    <li>希爾瓦娜斯</li>
</ul>
<ol>
    <li>耐奧祖</li>
    <li>阿爾薩斯</li>
    <li>伯瓦爾·弗塔根</li>
</ol>

還有一個是分組的列表：

<dl>
    <dt>部落：</dt>
    <dd>獸人</dd>
    <dd>巨魔</dd>
    <dd>牛頭人</dd>
    <dd>被遺忘者</dd>
    <dt>聯盟：</dt>
    <dd>人類</dd>
    <dd>矮人</dd>
    <dd>侏儒</dd>
    <dd>暗夜精靈</dd>
</dl>

表格-table標籤

table標籤包住一張表格，設置一下border屬性，能夠顯示幾種邊框效果。
table內嵌tr標籤包住一行，tr內嵌td標籤是每一列。
簡單的表格，就這樣：

<table border="1">
    <tr>
        <td>瑪法里奧</td>
        <td>伊利丹</td>
        <td>泰蘭德</td>
    </tr>
    <tr>
        <td>吉安娜</td>
        <td>烏瑟爾</td>
        <td>安度因</td>
    </tr>
</table>

這裏還缺乏表頭，通常第一行是標題行，咱們用thead標籤包起來，而且這一行裏都是標題，因此不用td標籤，而是用th標籤。
而後，後面的行都內嵌在tbody標籤中。另外，若是須要，每行的第一列，也能夠用th標籤，或者也能夠不要行標題，那就全用td標籤
這麼作主要是爲了規範，下面是更加規範完整的表格：

<table border="1">
    <thead>
    <tr>
        <th>種族</th>
        <th>英雄1</th>
        <th>英雄2</th>
        <th>英雄3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>暗夜精靈</th>
        <td>瑪法里奧</td>
        <td>伊利丹</td>
        <td>泰蘭德</td>
    </tr>
    <tr>
        <th>人類</th>
        <td>吉安娜</td>
        <td>烏瑟爾</td>
        <td>安度因</td>
    </tr>
    </tbody>
</table>

colspan 和 rowspan 屬性能夠實現合併單元格的效果。下面把標題行和標題列都合併了。
合併效果的表格能夠這麼寫：

<table border="1">
    <thead>
    <tr>
        <th></th>
        <th colspan="3">英雄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th rowspan="2">名字</th>
        <td>瑪法里奧</td>
        <td>伊利丹</td>
        <td>泰蘭德</td>
    </tr>
    <tr>
        <td>吉安娜</td>
        <td>烏瑟爾</td>
        <td>安度因</td>
    </tr>
    </tbody>
</table>

提示-lable標籤

典型的用法，通常lable標籤會結合input標籤一塊兒使用。
"for" 屬性可把 label 綁定到另一個元素。請把 "for" 屬性的值設置爲相關元素的 id 屬性的值。
建議使用的時候在lable中設置一個for屬性，指向input的id，這樣點擊lable的內容的時候，光標也會出如今指向的input框內。代碼以下，能夠比較一下差異（點一下用戶名看看有沒有效果，點一下暱稱看看有沒有效果）：

<body>
<p>
<label>姓名：</label>
<input type="text" />
</p>
<p>
<label for="nickname">暱稱：</label>
<input id="nickname" type="text" />
</p>

元素分組-fieldset標籤

首先這個標籤不經常使用，不過仍是知道一下。效果就是繪製一個邊框，邊框上面能夠加個標題。把其餘標籤都放在一個fileset標籤裏實現分組。
內部寫一個legend標籤，定義一個標題，若是什麼內容的沒有，那麼就一直一個邊框，邊框上部邊緣有一個標題：

<fieldset>
    <legend>
        標題
    </legend>
</fieldset>

固然使用的時候，內部添加一些相關的內容，如今只能粗糙的弄一個：

<fieldset>
    <legend>登陸</legend>
    <label for="username">用戶名：</label>
    <input id="username" type="text" name="username" />
    <br />
    <label for="pwd">密碼：</label>
    <input id="pwd" type="password" name="passwd" />
</fieldset>

html總結

上面總共也就講了20個左右標籤，去掉那幾個不經常使用的，基本只要掌握15個左右的標籤就OK了。

css

在標籤上能夠設置style屬性，style屬性的值寫在引號內。
每個樣式都是一個key:value的形式，樣式之間用";"分號隔開。
寫前端，通常是先用div標籤把頁面進行分塊，而後對每一塊分別設置css即style屬性：

<body>
<div style="background-color: red;height: 48px">紅色</div>
<div style="background-color: rgb(0,255,0);height: 48px">綠色</div>
<div style="background-color: #0000FF;height: 48px">藍色</div>
</body>

上面的代碼，寫了3個div，設置了一個背景色，和一個高度。

顏色設置-RGB顏色對照表

看前面的例子，分別用了3中方式表示顏色。3種方式都是同樣的，可是顏色和代碼的對應關係能夠去搜索一下rgb，有一個叫作RGB顏色對照表的東西，能夠查詢到顏色和對應的編碼。

css選擇器

咱們能夠在head標籤內事先設置好style標籤，而後在body裏須要應用該樣式的標籤內引用這個樣式，即選擇對應的css樣式。
有多種方式來選擇css。

id選擇器

以#id設置樣式，對應的id的標籤就會應用該樣式。上面的代碼也能夠這樣實現：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color: red;
            height: 48px;
        }
        #i2{
            background-color: rgb(0,255,0);
            height: 48px;
        }
        #i3{
            background-color: #0000FF;
            height: 48px;
        }
    </style>
</head>
<body>
<div id="i1">第一塊</div>
<div id="i2">第二塊</div>
<div id="i3">第三塊</div>
</body>

body中的標籤只要id正確，就是應用上對應的style樣式了。
這樣貌似看着更復雜了，可是body內的結果更加清晰了，並且這只是由於咱們的web頁面還不是太複雜。
另外若是多個標籤的樣式實際上是同樣的，可是id只能用一次，咱們能夠爲一個樣式定義多個id，就是這樣，如此也解決的代碼重用的問題：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color: green;
            height: 48px;
        }
    </style>
</head>
<body>
<div id="i1">第一塊</div>
<div id="i2">第二塊</div>
<div id="i3">第三塊</div>
</body>

class選擇器

由於id不能重複，上面的方式應用起來不方便。最經常使用的是這裏的方式。
如今以 .class 來設置sytle，標籤中只要設置對應項class屬性，就會應用該樣式。關鍵是class屬性是能夠重複使用的：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 48px;
        }
        .c2{
            background-color: rgb(0,255,0);
            height: 48px;
        }
    </style>
</head>
<body>
<div class="c1">第一塊</div>
<div class="c2">第二塊</div>
<div class="c1">第三塊</div>
</body>

標籤選擇器

就是標籤選擇器。以標籤的名字來設置style，這樣全部的標籤都會應用這個樣式：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: green;
            height: 48px;
        }
        span{
            background-color: red;
            height: 48px;
        }
        p{
            background-color: blue;
            color: red;
        }
    </style>
</head>
<body>
<div class="c1">第一塊
    <span>紅色的內容</span>
</div>
<div class="c2">第二塊</div>
<p>2.1</p>
<div class="c1">第三塊</div>
</body>

關聯選擇器

也能夠理解爲層級選擇器，每個層級關係之間用空格分隔。如今咱們以 "div span" 來設置style。如此，全部div標籤下的span標籤就都會應用這個樣式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div span{
            background-color: red;
            height: 48px;
        }
    </style>
</head>
<body>
<div class="c1">第一塊
    <span>第一模塊的內容</span>
</div>
<div class="c2">第二塊
    <span>第二模塊的內容</span>
</div>
<div class="c1">第三塊
    <span>第三模塊的內容</span>
</div>
</body>

另外，這裏的層級也可使用class，好比以 ".c1 spen" 來設置style：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 span{
            background-color: red;
            height: 48px;
        }
    </style>
</head>
<body>
<div class="c1">第一塊
    <span>第一模塊的內容</span>
</div>
<div class="c2">第二塊
    <span>第二模塊的內容</span>
</div>
<div class="c1">第三塊
    <span>第三模塊的內容</span>
</div>
</body>

這樣c2這個class下的pan就會應該到這個樣式。
使用#id也是同樣的道理。

組合選擇器

和層級關係相似，組合之間用","逗號分隔。在id選擇器後面的例子裏，其實就是組合了。因此就不試了。
如今咱們知道，不僅是id，class和標籤均可以用來組合。
另外，組合是一個或的關係，上面的層級是一個與的關係。

屬性選擇器

這裏先用 input[type='text'] 來舉例，前面是一個選擇器，後面中括號是判斷屬性，若是有這個屬性，就應該改樣式。
對於前半部分，一樣可使用 #id 或 .class 。
對於後半部分，咱們還可使用自定義的屬性，好比下面例子用自定義了一個myattr屬性，來應用了一個樣式：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type='text']{
            background-color: blue;
        }
        #password[type='password']{
            background-color: green;
        }
        label[for="username"]{
            background-color: yellow;
        }
        label[myattr="pink"]{
            background-color: pink;
        }
    </style>
</head>
<body>
<label for="username">姓名：</label>
<input id="username" type="text" />
<p>
<label myattr="pink" for="password">暱稱：</label>
<input id="password" type="password" />
</p>
</body>

css的優先級

咱們能夠在標籤內設置有限級，還能夠在head裏設置優先級模板，按幾個選擇器的規則應用其中的樣式。全部可能出現符合多個要求而會應用到多個要是的狀況。這裏就有了一個優先級的概念。
對於不重複的樣式，要麼會所有應用上。
對於重複的要是，會應用最下面的那個樣式。即body中的樣式優先級高於head中的樣式。同在body或head中，那麼下面的樣式優先級高。
總結，按個人理解，應該就是最新加載的樣式會覆蓋以前的樣式。不衝突就追加上是，有衝突就替代掉。
上一個例子：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: blue;
        }
        .c2{
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
<div class="c1 c2">優先級測試1</div>
<div class="c2 c1">優先級測試2</div>
<div class="c2 c1" style="color: gold">優先級測試3</div>
</body>

這裏標籤中的字體顏色屬性就覆蓋掉了 .c2 中的字體顏色。
而前2個div都是同時屬於 c1 和 c2 這2個class，背景色的樣式應用的都是處於下面的 c2 的樣式。
class屬性賦予多個值 ：這裏的class屬性同時賦了2個值，注意一下這個賦值的格式。

css寫到獨立的文件

若是有多個頁面文件，但用的是同一套css樣式。咱們目前只能在每一個頁面文件的head裏都寫上所有的css代碼。這樣又有代碼重複的問題了。
能夠建立一個css文件（pycharm裏選擇New->Stylesheet），將 <style> 標籤中的內容（不包含標籤），寫到這個css文件裏。好比建立一個文件名是 "commons.css" ，文件內容以下：

.c1{
    background-color: blue;
}
.c2{
    background-color: red;
    color: white;
}

而後就是在html文件的head裏，導入這個這個樣式文件就能夠應用上文件中的樣式。這須要用到link標籤，用href屬性指定文件路徑，用rel屬性指定文件的內容是stylesheet：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css" />
</head>
<body>
<div class="c1 c2">優先級測試1</div>
<div class="c2 c1">優先級測試2</div>
<div class="c2 c1" style="color: gold">優先級測試3</div>
</body>

導入css文件後，本地的head裏依然能夠寫style標籤。這個style應該如今link的下面。而後優先級的問題就是位於下面的style的樣式優先級高於css文件中的樣式。

邊框-border

style="border: 1px solid red;" ：這裏的border有3個屬性。
第一個是邊框線的寬度，這裏是1像素；
第二個是線的樣式，這裏是soild實線，還有dotted虛線等等其餘樣式；
第三個是邊框線的顏色。
這裏3個屬性沒有順序的問題

<body>
<div style="border: 1px solid red;">邊框測試1</div>
<br />
<span style="border: dotted blue 2px;">邊框測試2</span>
</body>

另外還能夠經過這4個屬性 border-top、border-left、border-right、border-bottom 分別設置每一邊的樣式。就是能夠作出4邊不一樣的邊框。

高度-height和寬度-width

style="height: 48px;width: 80%;" ：高度和寬度能夠用像素px表示，也能夠用百分比表示。
注意1，瀏覽器的高度是無限的（內容多了會有滾動條），因此高度用不了百分比。不過若是內嵌在一個有高度的標籤裏，就能夠用百分比了。
注意2，div因爲是塊級標籤，雖然咱們指定了寬度，可是實際出佔了整行的，以後的標籤仍是隻能在下一行顯示。設置的背景色是隻顯示80%，可是後面的部分依然用不了。

<body>
<div style="height: 48px;width: 80%;background-color: yellow">高度和寬度</div>
</body>

字體設置

font-size: 16px ：字體大小。
text-align: center ：水平居中，也能夠設置靠左或靠右。
line-height: 48x ：有水平居中，天然也會有垂直居中。可是垂直居中很差用。能夠經過設置行高來達到相似的效果。具體數值參考height的值，設置的和height的值同樣，就能實現垂直居中的效果。
font-weight: bold ：字體加粗
color: red ：字體顏色

<body>
<div style="height: 48px;
width: 80%;
background-color: yellow;
font-size: 16px;
text-align: center;
line-height: 48px;
font-weight: bold;
color: red;"
>字體的設置</div>
</body>

浮動-float

float設置後，元素就會浮動起來。浮動以後即便是塊級標籤（好比div），也不會像以前那樣佔滿一整行了。沒有float的效果：

<body>
<div style="width: 30%;background-color: yellow;">浮動</div>
<span>佔位</span>
</body>

上面的div標籤雖然設置了30%的寬度，可是做爲塊級標籤，他要佔1整行。後面的內容只能換行。
如今給div加上float：

<body>
<div style="width: 30%;background-color: yellow;float: left;">浮動</div>
<span>佔位</span>
</body>

如今的div就真的只佔30%的寬度了，後面的內容會繼續接在後面顯示，而不是以前那樣要換行。
下面設置2個浮動的標籤，而且都是往一個方向飄：

<body>
<div style="width: 30%;background-color: yellow;float: left;">浮動1</div>
<div style="width: 40%;background-color: red;float: left;">浮動2</div>
</body>

這裏，2個div是接着的。第1個div先把位置佔住以後，剩餘的空間再放置第2個div。
若是空間夠，就會在剩餘的空間放置。若是空間不夠，就會另起一行放置：

<body>
<div style="width: 70%;background-color: yellow;float: left;">浮動1</div>
<div style="width: 40%;background-color: red;float: left;">浮動2</div>
<div style="width: 40%;background-color: blue;float: left;">浮動3</div>
</body>

內嵌的float

標籤嵌套的狀況，若是父級標籤沒有float，而子標籤float的話，可能會有一點問題。如今把上面的代碼中的3個div內嵌到一個沒有float的div中：

<div style="border: 1px solid black">
    <div style="width: 70%;background-color: yellow;float: left;">浮動1</div>
    <div style="width: 40%;background-color: red;float: left;">浮動2</div>
    <div style="width: 40%;background-color: blue;float: left;">浮動3</div>
    <!--<div style="clear: both;"></div>-->
</div>

最後一句先註釋掉，如今外層的div的邊框效果是有問題的。能夠這麼理解，子標籤浮點起來以後，和父標籤不在同一個層級了。如今父標籤的邊框內什麼內容都沒有。咱們須要的效果是邊框包圍在子標籤的外面，如今能夠把最後那一句的註釋去掉，看看效果是否知足。
<div style="clear: both;"></div>" ：在最後加上這麼一句，至關於把本來浮動起來的子標籤再拉回來。
固然也能夠把外層的標籤也設置成float，一樣能夠達到效果。不過浮動起來以後，就再也不像以前那樣做爲塊級標籤能佔滿一行了，這裏加上了寬度的設置：

<div style="border: 1px solid black;float: right;width: 100%">
    <div style="width: 70%;background-color: yellow;float: left;">浮動1</div>
    <div style="width: 40%;background-color: red;float: left;">浮動2</div>
    <div style="width: 40%;background-color: blue;float: left;">浮動3</div>
</div>

元素類型-display

以前講過有塊級標籤和行內標籤，可是其實這個也不是絕對的。display就是來定義這個屬性的。便可以經過設定display的屬性將塊級標籤變成行內標籤，反之亦然。

display: inline ：設爲行內標籤
dispaly: block ：設爲塊級標籤

<body>
<div style="display: inline;background-color: red;">DIV</div>
<span style="display: block;background-color: red;">SPAN</span>
</body>

如今div變成了一個行內標籤，而span卻變成了塊級標籤了。

塊級標籤和行內標籤的差異

行內標籤：沒法設置高度、寬度、邊距（邊距後面立刻會講）。而且默認只佔本身內容的部分
塊級標籤：能夠設置。而且默認佔父級的100%
另外若是須要一個能夠設置的行內標籤，還能夠採用以下設置。
display: inline-block ：默認只佔本身內容部分（inline屬性），可是同時能夠設置高度、寬度等屬性（block屬性）。

讓標籤消失

display: none ：只要把標籤訂義上這個屬性，這個標籤就再也不顯示了。之後能夠作個開關（經過JS），讓某些元素顯示出來或者不顯示。

邊距-padding和margin

邊距份內邊距（padding）和外邊距（margin）。
沒有設置邊距是這樣的效果：

<div style="border: 1px solid black;">
    <div style="background-color: yellow;">邊距的效果</div>
</div>

如今給外層的那層div設置一個內邊距，即padding：

<div style="border: 1px solid black;padding: 10px">
    <div style="background-color: yellow;">邊距的效果</div>
</div>

設置了邊距後，兩個div標籤的內容之間就會有空隙。若是換作是給內層的div設置一個外邊距，顯示的效果也是同樣的。
另外，邊距還能夠爲上、下、左、右分別設置。

設置4個方向的屬性

以前也有別的屬性能夠分別設置4個方向的屬性，這裏就拿margin來舉例說明：
margin: 10px ：同時設置4個方向的屬性值
margin: 10px 20px ：上下設爲10px，左右設爲20px
margin: 10px 20px 30px ：上下同樣是10px，左邊是20px，右邊是30px
margin: 10px 20px 30px 40px ：分別對應上、右、下、左
能夠這麼理解，第4個值是左，若是沒有，就和右同樣；下若是沒有設置，就同上；右若是也沒有設置，那麼也同上。
能夠用下面的例子測試：

<body style="margin: 0">
<div style="border: 1px solid black;margin: 10px 20px 30px 40px">上面的框</div>
<div style="border: 1px solid black">下面的框</div>
</body>

另外還能夠經過margin-top、margin-bottom、margin-left、margin-right來設置4個方向的屬性。若是這麼設置，那麼沒有設置的幾個方向就都是0.

bady的邊距

可能都沒注意，以前的代碼在設置了背景色後，其實頁面的最上面並非你的背景色，而是有一條白色（就是body的邊距）。仔細看看：

<body>
<div style="background-color: yellow">看看上面有沒有縫</div>
</body>

這裏要給body設置一個內邊距（margin）屬性：

<body style="margin: 0">
<div style="background-color: yellow">看看上面有沒有縫</div>
</body>

去掉了邊距以後，如今是真正的處於最上面了。再仔細看看，其實以前缺的不是頂上一層，而是周圍一圈。而且看了看別的網站，貌似都是把給body的margin設爲0的。

auto屬性值的意義

在設置body屬性的時候，老師推薦是這麼寫的： style="margin: 0 auto" ，這裏就看看auto的意思看意思就是自動設置，可是怎麼個自動法呢？這裏auto的值對應的左右的邊距，實現的效果就是左右2邊邊距同樣，即水平居中了。
上下彷佛也能夠設成auto，效果看上去就是0，也就是說貌似所有設置成auto也行。

總結

知識點暫時就掌握這些就夠了。頁面佈局就是要把頁面分隔成一個一個的div。有拼接，也有嵌套，並且若是須要，還要嵌套多層。最後還要寫上css，設置好格式。下面是課上的示例代碼，做業能夠參考一下：

<body style="margin: 0 auto">
<div style="height: 38px;line-height: 38px;background-color: #dddddd;">
    <div style="width: 980px;margin: 0 auto">
        <div style="float: left;">收藏本站</div>
        <div style="float: right;">
            <a>登陸</a>
            <a>註冊</a>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>
<div>
    <div style="width: 980px;margin: 0 auto">
        <div style="float: left">Logo</div>
        <div style="float: right">購物車</div>
        <div style="clear: both;"></div>
    </div>
</div>
<div style="background-color: red;">
    <div style="width: 980px;margin: 0 auto;">
        商品分類
    </div>
</div>
<div style="width: 300px;border: 1px solid black;padding: 2px;margin: 1px">
    <div style="width:96px;height: 96px;border: 1px solid green;float: left;"></div>
    <div style="width:96px;height: 96px;border: 1px solid green;float: left;"></div>
    <div style="width:96px;height: 96px;border: 1px solid green;float: left;"></div>
    <div style="width:96px;height: 96px;border: 1px solid green;float: left;"></div>
    <div style="width:96px;height: 96px;border: 1px solid green;float: left;"></div>
    <div style="width:96px;height: 96px;border: 1px solid green;float: left;"></div>
    <div style="clear: both;"></div>
</div>
</body>