WEB開發 HTML\CSS基礎
WEB開發 HTML\CSS基礎
網頁最主要由3部分組成：結構、表現和行爲。網頁如今新的標準是W3C，目前模式是HTML、CSS和JavaScript。javascript
HTML,CSS,JavaScript分別是什麼？css
HTML，全稱「Hyper Text Markup Language（超文本標記語言）」，簡單來講，網頁就是用HTML語言製做的。HTML是一門描述性
語言，是一門很是容易入門的語言。 CSS，全稱「（層疊樣式表）」。之後咱們在別的地方看到「層疊樣式表」、「CSS樣式」，指的就是CSS。 JavaScript，是一門腳本語言。 HTML是網頁的結構，CSS是網頁的外觀，而JavaScript是頁面的行爲
HTML
HTML是一個網頁的主體部分，也是一個網頁的基礎。由於一個網頁能夠沒有樣式，能夠沒有交互，可是必需要有網頁須要呈現的內容。因此HTML部分是整個前端的基礎。html
1，HTML簡介
HTML，全稱是超文本標記語言（HyperText Markup Language），它是一種用於建立網頁的標記語言。標記語言是一種將文本（Text）以及文本相關的其餘信息結合起來，展示出關於文檔結構和數據處理細節的計算機文字編碼。與文本相關的其餘信息（包括例如文本的結構和表示信息等）與原來的文本結合在一塊兒，可是使用標記（markup）進行標識。前端
html是一種標記語言
標記語言既描述了文檔自己所要展示的信息，也描述了文檔的結構和各部分的做用。而HTML則是世界通用的、用於描述一個網頁的信息的標記語言，咱們使用的瀏覽器具備將HTML文檔渲染並展現給用戶的功能（當你訪問知乎網站的時候，實際上你得到了一份由知乎提供給你的HTML文檔。瀏覽器將根據HTML文檔渲染出你看到的網頁）。java
2，開發環境
經常使用的HTML編輯器：Hbuild、Sublime Text、Dreamweare均可以用來開發HTML。 固然PyCharm也支持HTML開發。python
文件後綴名規範：
文件後綴通常使用.html或.htm。二者均是靜態網頁後綴名，沒有本質上的區別。linux
3，HTML標籤
HTML做爲一門標記語言，是經過各類各樣的標籤來標記網頁內容的。程序員
何爲標籤？
1. 在HTML中規定標籤使用英文的的尖括號即`<`和`>`包起來，如<html>、<p>都是標籤。
2. HTML中標籤**一般**都是成對出現的，分爲開始標籤和結束標籤，結束標籤比開始標籤多了一個`/`，如`<p>標籤內容</p>`和`<div>標籤內容</div>`。開始標籤和結束標籤之間的就是標籤的內容。
3. 標籤之間是能夠嵌套的。例如：div標籤裏面嵌套p標籤的話，那麼`</p>`必須放在`</div>`的前面。
4. HTML標籤不區分大小寫，`<h1>`和`<H1>`是同樣的，可是咱們一般建議使用小寫，由於大部分程序員都以小寫爲準。web
4，HTML文檔結構
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
代碼解釋：canvas
首先，<!DOCTYPE HTML>是文檔聲明，必須寫在HTML文檔的第一行，位於<html>標籤以前，代表該文檔是HTML5文檔。
1，<html></html> 稱爲根標籤，全部的網頁標籤都在<html></html>中。
2，<head></head> 標籤用於定義文檔的頭部，它是全部頭部元素的容器。常見的頭部元素有<title>、<script>、<style>、<link>和<meta>等標籤。
3，在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在<body>標籤中的內容（圖中淡綠色部份內容）最終會在瀏覽器中顯示出來。
5，HTML註釋
html中註釋的格式：
<!--這裏是註釋的內容-->
HTML註釋中能夠直接使用回車換行，而且習慣用註釋的標籤把HTML代碼包裹起來，可是不支持嵌套，也不能寫在HTML標籤中。
6，head標籤
<!DOCTYPE html> <!-- 表示能夠進行翻譯操做,這裏設置默認爲翻譯成英文 lang="en" --> <html lang="en"> <head> <!-- 文檔的標題、編碼方式及URL等信息,這些信息大部分是用於提供索引,辯認或其餘方面的應用（移動端） --> <!-- 文檔的標題 --> <title>鳴人</title> <!-- 經常使用兩個屬性 http-equiv:它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。 --> <!--指定文檔的內容類型和編碼類型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- 2秒以後 重定向 到博客園的網站 --> <!--<meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/wuqiuming/"/>--> <!--告訴IE瀏覽器以最高級模式渲染當前網頁--> <meta http-equiv="x-ua-compatible" content="IE=edge"> <!-- 爲了咱們的SEO優化(搜索引擎優化) 下面這兩句 要寫--> <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="鳴人"> <!-- 定義咱們的網站圖標 --> <link rel="icon" href="./fav.ico"> <!-- 引入外部樣式表 --> <link rel="stylesheet" type="text/css" href="./index.css"> <!-- 定義內部樣式表 --> <style type="text/css"> </style> <!-- 定義內部腳本文件 --> <script type="text/javascript"> </script> <script src="./index.js"></script> </head> <body> </body> </html>
head標籤的主要內容和做用：
文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題、編碼方式及URL等信息,這些信息大部分是用於提供索引,辯認或其餘方面的應用（移動端）的等。
如下標籤是能夠用在head標籤中的：
<head lang='en'>
<title>標題信息</title>
<meta charset='utf-8'>
<link>
<style type='text/css'></style>
<script type='text/javascript'></script>
</head>
①title標籤
<title>標籤：在<title>和</title>標籤之間的文字內容是網頁的標題信息，它會顯示在瀏覽器標籤頁的標題欄中。能夠把它當作是一個網頁的標題。主要用來告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速的判斷出當前網頁的主題。
②meta標籤
Meta標籤介紹：
元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
標籤位於文檔的頭部，不包含任何內容。
提供的信息是用戶不可見的。 meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。
經常使用的meta標籤：
1，http-equiv屬性
它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。
<!--重定向 2秒後跳轉到對應的網址，注意分號--> <meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> <!--指定文檔的內容類型和編碼類型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告訴IE瀏覽器以最高級模式渲染當前網頁--> <meta http-equiv="x-ua-compatible" content="IE=edge">
2，name屬性
主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字能夠有多個用 ‘,’號隔開，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="鳴人">
③其餘標籤
<!--標題--> <title>鳴人</title> <!--icon圖標（網站的圖標）--> <link rel="icon" href="fav.ico"> <!--定義內部樣式表--> <style></style> <!--引入外部樣式表文件--> <link rel="stylesheet" href="mystyle.css"> <!--定義JavaScript代碼或引入JavaScript文件--> <script src="myscript.js"></script>
7，body標籤
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>經常使用標籤一</title> </head> <body> 帶你逐步提高技能 豐富多彩的體驗 <!--class顯示類，好比段落p1，標註了class p1，都是屬於這個區域--> <div class="p1"> <p style="height: 500px" id="p1">頂部</p> </div> <!-- body相關標籤 --> <!-- heading :標題 h1~h6 沒有h7標題--> <div class="heading"> 對我來講<h3>我熱愛python</h3>，豐富多彩的體驗 <!-- 塊級元素 ： 1.獨佔一行 2.能夠設置寬高--> <h1>我但是很帥的</h1><h2>我但是很帥的</h2> <h3>我但是很帥的</h3> <h4>我但是很帥的</h4> <h5>我但是很帥的</h5> <h6>我但是很帥的</h6> <h7>我但是很帥的</h7> </div> <div class="p1"> <!-- 段落標籤 --> <p><strong>鳴人</strong>好好學習每天向上<br>金融分析,<span>人工智能</span>這些都是很實用的技術</p> <hr> <p>韓流喊樓 ,<s>金融分析</s>,的重要性</p> </div> <div class="anchor"> <!-- a標籤屬於行內標籤： 在一行內顯示 設置寬高 不起做用--> <!-- _self:默認值：在當前網站打開資源 _blank:在新的網站打開資源 title: 鼠標移上去顯示的提示--> <a href="https://www.cnblogs.com/wuqiuming/" target="_blank" title="鳴人二號">鳴人</a> <a href="./a.zip">下載壓縮包</a> <a href="mailto:wqmcr@foxmail.com" style="width: 1000px;height: 100px">聯繫咱們</a> <!-- 返回頁面頂部的內容 --> <a href="#">跳轉到頂部</a> <!-- 返回每一個id --> <a href="#p1">跳轉頂部的段落標籤</a> <!-- javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼，而 javascript:; 表示什麼都不執行，這樣點擊<a>時就沒有任何反應。把a的默認動做取消了 --> <a href="javascript:alert(123344)">內容</a> <a href="javascript:;">內容</a> </div> <div class="lists"> <!-- 無序列表 --> <ul type="disc" > <li>個人帳戶 ></li> <li>個人訂單 ></li> <li>個人優惠券 ></li> <li>個人收藏 ></li> <li>退出 ></li> </ul> <!-- ol有序列表 --> <ol style="list-style:none"> <li>個人帳戶></li> <li>個人訂單></li> <li>個人優惠券></li> <li>個人收藏></li> <li>退出></li> </ol> </div> a <div class="image"> <!-- 1.可設寬高 2.在一行內顯示 它叫行內塊標籤 1. alt表示圖片加載失敗顯示的內容 2，不標明width和heigth則顯示默認寬高度--> <img src="./homesmall.png" alt="python的圖片" style="width: 200px;height: 200px"> <img src="./homesmall2.png" alt="python2的圖片" > </div> <!-- 三種： 1.塊級元素（h1標籤，） 獨佔一行，可設寬高 若是不設置寬度 瀏覽器的寬度 2.行內元素(a標籤，) 在一行內展現 不能設置寬高 它的寬高根據內容去填充 3.行內塊元素（img標籤，） 在一行內展現 可設寬高 展現兩張圖片 獨佔一行 鼠標移上去顯示小手的狀態 --> <div class="anchor"> <a href="https://www.cnblogs.com/wuqiuming/"><img src="./homesmall2.png" alt="python2的圖片" style="width: 200px;height: 200px"></a> <a href="https://www.cnblogs.com/wuqiuming/"><img src="./homesmall2.png" alt="python2的圖片" style="width: 200px;height: 200px"></a> </div> </body> </html>
想要在網頁上展現出來的內容必定要放在body標籤中。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鳴人</title>
</head>
<body>
<h1>海燕</h1>
<p>在蒼茫的大海上，</p>
<p>狂風捲集着烏雲。</p>
<p>在烏雲和大海之間，</p>
<p>海燕像黑色的閃電，</p>
<p>在高傲地飛翔。</p>
</body>
</html>
①h1-h6 標題標籤
<h1> - <h6> 標籤可定義標題。<h1> 定義最大的標題。<h6> 定義最小的標題。 因爲 h 元素擁有確切的語義，所以請您慎重地選擇恰當的標籤層級來構建文檔的結構。所以，請不要利用標題標籤來改變同一行中的字體大小。相反，咱們應當使用css來定義來達到漂亮的顯示效果。 標題標籤一般用來製做文章或網站的標題。
h1~h6標籤的默認樣式：
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鳴人</title>
</head>
<body>
<h1>一級標題</h1><h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
</html>
文本樣式標籤
主要用來對HTML頁面中的文本進行修飾，好比加粗、斜體、線條樣式等...
1. <b></b>：加粗
2. <i></i>：斜體
3. <u></u>：下劃線
4. <s></s>：刪除線
5. <sup></sup>：上標
6. <sub></sub>：下標
7.<em></em>:弱強調，斜體表示
8.<strong></strong>:更強烈一點的強調，加粗
②p 段落標籤
<p>,paragraph的簡寫。定義段落
<body>
<p>程序員都好帥</p>
<p>好比像我這樣的</p>
</body>
③a 超連接標籤
超級連接<a>標記表明一個連接點，是英文anchor（錨點）的簡寫。它的做用是把當前位置的文本或圖片鏈接到其餘的頁面、文本或圖像
<!DOCTYPE html>
<html>
<head>
<!-- 聲明頭部的元信息 對咱們文檔 規定編碼格式 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- 包含頭部的信息 是一個容器 包含 style title meta script link等 -->
</head>
<body>
<!-- a連接 超連接
target:_blank 在新的網站打開連接的資源地址
_self 在當前網站打開連接的資源地址
title: 鼠標懸停時顯示的標題
-->
<a href="http://www.baidu.com" target="_blank" title="baidu">百度</a>
<a href="a.zip">下載包</a>
<a href="mailto:wqmcr@foxmail.com">聯繫咱們</a>
<!-- 返回頁面頂部的內容 -->
<a href="#">跳轉到頂部</a>
<!-- 返回某個id -->
<a href="#p1">跳轉到p1</a>
<!-- javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼，而 javascript:;
表示什麼都不執行，這樣點擊<a>時就沒有任何反應。 -->
<a href="javascript:alert(1)">內容</a>
<a href="javascript:;">內容</a>
</body>
</html>
target:_blank 在新的網站打開連接的資源地址
target：_self 在當前網站打開連接的資源地址
title: 表示鼠標懸停時顯示的標題
連接其餘表現形式：
- 目標文檔爲下載資源 例如：href屬性值，指定的文件名稱，就是下載操做(rar、zip等)
- 電子郵件連接 前提：計算機中必須安裝郵件客戶端，而且配置好了郵件相關信息。 例如：
<a href="mailto:wqmcr@foxmail.com">聯繫咱們</a> - 返回頁面頂部的空連接或具體id值的標籤 例如：
<a href="#">內容</a>或<a href="#id值">內容</a> - javascript:是表示在觸發
<a>默認動做時，執行一段JavaScript代碼。 例如：<a href="javascript:alert()">內容</a> - javascript:;表示什麼都不執行，這樣點擊
<a>時就沒有任何反應 例如：<a href="javascrip:;">內容</a>
④ul，ol 列表標籤
網站頁面上一些列表相關的內容好比說物品列表、人名列表等等均可以使用列表標籤來展現。一般後面跟<li>標籤一塊兒用，每條li表示列表的內容。
<ul>:unordered lists的縮寫 無序列表
<ol>:ordered listsde的縮寫 有序列表
<!-- 無序列表 type能夠定義無序列表的樣式-->
<ul type="circle">
<li>個人帳戶</li>
<li>個人訂單</li>
<li>個人優惠券</li>
<li>個人收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 type能夠定義有序列表的樣式 -->
<ol type="a">
<li>個人帳戶</li>
<li>個人訂單</li>
<li>個人優惠券</li>
<li>個人收藏</li>
<li>退出</li>
</ol>
ul 標籤的屬性：（無序）
type：列表標識的類型
- disc：實心圓(默認值)
- circle：空心圓
- square：實心矩形
- none：不顯示標識
ol 標籤的屬性：（有序）
type：列表標識的類型
- 1：數字
- a：小寫字母
- A：大寫字母
- i：小寫羅馬字符
- I：大寫羅馬字符
列表標識的起始編號
- 默認爲1
⑤div 盒子標籤
<div>可定義文檔的分區 division的縮寫 譯：區 <div> 標籤能夠把文檔分割爲獨立的、不一樣的部分,請看下面代碼咱們將他們進行分區
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" >
<title>經常使用標籤一</title>
</head>
<body>
<div id="wrap">
<div class="para">
<p style="height: 1000px" id="p1">段落</p>
</div>
<div class="anchor">
我是普通的文本
<h1>
<a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
<a href="a.zip">下載包</a>
<a href="mailto:wqmcr@foxmail.com">聯繫咱們</a>
<a href="#">跳轉到頂部</a>
<a href="#p1">跳轉到p1</a>
<a href="javascript:alert(1)">內容</a>
<a href="javascript:;">內容</a>
</h1>
</div>
<!-- <h2>百度</h2>
<h3>百度</h3>
<h4>百度</h4>
<h5>百度</h4>
<h6>百度</h6> -->
<div class="para">
<!-- 定義段落 一般指文章一段內容 -->
<p>我但是很帥的!</p>
<p>我但是很帥的!</p>
<p>我但是很帥的!</p>
</div>
<div class="lists">
<!-- 無序列表 -->
<ul type="circle">
<li>個人帳戶</li>
<li>個人訂單</li>
<li>個人優惠券</li>
<li>個人收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 -->
<ol type="a">
<li>個人帳戶</li>
<li>個人訂單</li>
<li>個人優惠券</li>
<li>個人收藏</li>
<li>退出</li>
</ol>
</div>
</div>
</body>
</html>
分析上面代碼能夠下面的層次結構
<div id='wrap'>
<div class='para'></div>
<div class='anchor'></div>
<div class='para'></div>
<div class='lists'></div>
</div>
咱們將文檔放在一個父級的區（div）中，它裏面包含四塊區（div）域，瀏覽器查看效果,你會發現每小塊區域都是獨佔一行的，因此div是塊級元素。另外，每塊區域表示獨立的一塊，id屬性和class屬性其實很簡單，你能夠當作給這個區域起個名字。id是惟一的，一個頁面中不能有兩個重複的id，跟身份證號碼同樣，class能夠設置一樣的屬性值，而且能夠設置多個，例如class=’para n1‘
⑥<img/> 圖片標籤
一個網頁除了有文字，還會有圖片。咱們使用<img/>標籤在網頁中插入圖片。
語法：<img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "提示信息" />
注意：
1，src設置的圖片地址能夠是本地的地址也能夠是一個網絡地址。
2，圖片的格式能夠是png、jpg和gif。
3，alt屬性的值會在圖片加載失敗時顯示在網頁上。
4，還能夠爲圖片設置寬度(width)和高度(height)，不設置就顯示圖片默認的寬度和高度
<div>
<span>與行內元素展現的標籤<span>
<span>與行內元素展現的標籤<span>
<img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px">
<img src="./finance-right.png" alt="人工智能實戰" style="width: 200px;height: 200px">
</div>
5，瀏覽器查看效果：行內塊元素
6，與行內元素在一行內顯示
7，能夠設置寬度和高度
8，span標籤能夠單獨摘出某塊內容，結合css設置相應的樣式
<p>我是最帥的<span>金融分析</span>,<span>人工智能</span>等互聯網最前沿技術,開啓職業生涯新可能</p>
⑦其餘標籤
換行標籤 <br>
<br>標籤用來將內容換行，其在HTML網頁上的效果至關於咱們平時使用word編輯文檔時使用回車換行。
分割線 <hr>
<hr>標籤用來在HTML頁面中建立水平分隔線，一般用來分隔內容
特殊符號
瀏覽器在顯示的時候會移除源代碼中多餘的空格和空行。 全部連續的空格或空行都會被算做一個空格。須要注意的是，HTML代碼中的全部連續的空行（換行）也被顯示爲一個空格。
舉個例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鳴人</title>
</head>
<body>
<p>我是最帥的
一個
很帥的 一個 寶寶！</p>
</body>
</html>
上面代碼在瀏覽器上面顯示的效果：
因此HTML代碼對縮進的要求並不嚴格，咱們一般使用縮進來讓咱們的代碼結構更清晰，僅此而已。
⑧特殊字符
要想輸入空格，須要用特殊符號 -- 。
經常使用的特殊字符：
⑨標籤分類
1.塊狀元素（h1標籤等） 獨佔一行，可設寬高 若是不設置寬度 瀏覽器的寬度
2.行內元素(a標籤，i 加粗等) 在一行內展現 不能設置寬高 它的寬高根據內容去填充
3.行內塊狀元素（img標籤等） 在一行內展現 可設寬高
經常使用的塊狀元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
經常使用的行內元素
<a> <span> <br> <i> <em> <strong> <label>
經常使用的行內塊狀元素：
<img> <input>
塊級元素特色：display:block;
一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。獨佔一行
二、元素的高度、寬度、行高以及頂和底邊距都可設置。
三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。
行內元素特色：display:inline;
一、和其餘元素都在一行上；
二、元素的高度、寬度及頂部和底部邊距不可設置；
三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
行內塊狀元素的特色：display:inline-block;
一、和其餘元素都在一行上；
二、元素的高度、寬度、行高以及頂和底邊距都可設置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標籤分類</title> </head> <body> <div class="wrapper"> <!-- 塊級元素 ：div p h1~h6 ol ul table form li 1.獨佔一行 2.能夠設置寬度和高度，若是設置了寬度和高度，則就是當前的寬高，若是寬度和高度沒有設置，寬度是父盒子的寬度，高度根據內容填充 --> <div class="left"> 這是python的戰場 <div>這是個人區域 <!-- <div style="width: 500px;height: 100px">這是個人愛好</div> --> <ul> <li> <h2>抽菸</h2> </li> <li> <ol> <li>喝酒</li> <li>燙頭</li> </ol> </li> </ul> </div> </div> <div class="right"> <!-- a span br i em strong label 行內元素：在一行內展現，不能設置寬度和高度，寬度和高度根據內容填充 --> <a href="#" style="width: 200px;height: 100px">百度</a> <a href="#">飛機場</a> <span style="width: 100px;height: 200px">一些文本</span> <span>一些文本</span> </div> <div class="inline-block"> <!-- 行內塊 : 1.在一行內展現 2.可設置寬高 --> <img src="./homesmall.png" alt="一張圖片"> <input type="text" name="username" style="width: 200px;height: 50px"> </div> <!-- 標籤嵌套規則 塊元素能夠包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是h1~h6 p --> </div> </body> </html>
⑩標籤嵌套規則
塊元素能夠包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素，例如：
<div><div></div><h1></h1><p><p></div> ✔️
<a href=」#」><span></span></a> ✔️
<span><div></div></span> ❌
塊級元素不能放在p標籤裏面，好比
<p><ol><li></li></ol></p> ❌
<p><div></div></p> ❌
有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是：
h一、h二、h三、h四、h五、h六、p
li元素能夠嵌入ul，ol，div等標籤
<ul> <li> <ul> <li> <div> </div> </li> <li> <ol> <li></li> <li></li> <li></li> <li></li> </ol> </li> </ul> </li> </ul>
8，body標籤-table
表格由<table> 標籤來定義。每一個表格均有若干行（由 <tr> 標籤訂義），每行被分割爲若干單元格（由<td>標籤訂義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等
table-表格 thead-表格頭(tr, th) tbody-表格主體(tr, td) tfoot-表格底部(tr, td) tr-表格行 th-表格頭裏的單元格（默認加粗而且居中顯示） td-表格主體裏的單元格 rowspan 合併行(豎着合併) colspan 合併列(橫着合併)
主題結構：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 表格 border：邊框，cellspacing：單元格間隙--> <table border="1" cellspacing="0"> <!-- 表格頭 --> <thead> <!--表格行--> <tr> <!--表格列，【注意】這裏使用的是th--> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!-- 表格主體 --> <tbody> <!-- 表格主體的每一行 --> <tr> <td rowspan="3">上午</td> <!--表格列，【注意】這裏使用的是td--> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td rowspan="2">下午</td> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> </tbody> <!--表格底部--> <tfoot> <tr> <td colspan="6">課程表</td> </tr> </tfoot> </table> </body> </html>
效果圖
9，body標籤-form
<!DOCTYPE html> <!--<html lang="en">--> <head> <meta charset="UTF-8"> <title>表單控件</title> </head> <body> <div class="form"> <!-- form標籤是一個塊級元素 被提交 --> <form action="https://www.baidu.com" method="get"> <p> <!-- label標籤行內元素 input是行內塊元素 name屬性就是網址中&後那個key對象--> <label for='user'>用戶名:</label> <input type="text" name="username" id="user" placeholder="請輸入用戶名"> </p> <p> <label for="password">密碼：</label> <input type="password" name="password" id="password" placeholder="請輸入密碼"> </p> <!-- 單選框 checked會被默認選中，產生互斥的效果 name值要相同--> <p> 用戶性別： <input type="radio" name="sex" value="男" checked="">男 <input type="radio" name="sex" value="女">女 </p> <!-- 複選框 --> <p> 用戶的愛好: <input type="checkbox" name="checkfav" value="吃" checked="check">吃 <input type="checkbox" name="checkfav" value="喝">喝 <input type="checkbox" name="checkfav" value="玩">玩 <input type="checkbox" name="checkfav" value="樂">樂 </p> <p> <!-- 文件上傳 --> <input type="file" name="textFile"> </p> <p> <!-- 文本域 --> 自我介紹： <textarea cols="20" rows="5" name="txt" placeholder="請作自我介紹"></textarea> </p> <p> <!-- 下拉列表 --> <select name="sel" size="3" multiple=""> <option value="深圳" selected>深圳</option> <option value="北京">北京</option> <option value="沙河">沙河</option> <option value="山東">山東</option> <option value="福建">福建</option> </select> </p> <p> <!-- 顯示普通的按鈕 --> <input type="button" name="btn" value="提交" disabled="disabled"> <!-- 重置按鈕 --> <input type="reset" name=""> <!-- 提交form表單使用 type=submit按鈕 --> <input type="submit" name="btn" value="submit"> </p> </form> <button type="button">按鈕</button> </div> </body> </html>
表單是一個包含表單元素的區域
表單元素是容許用戶在表單中輸入內容，好比：文本域(textarea)、輸入框(input)、單選框（）
代碼集合效果圖
1，表單的做用
表單用於顯示、手機信息，並將信息提交給服務器
語法
<form>容許出現表單控件</form>
2，表單的屬性 見下圖：
3，表單控件分類 見下圖
CSS
1，css簡介
①css的出現解決了下面兩個問題：
1，將html頁面的內容與樣式分離
2，提升web開發的工做效率
②何爲css
CSS是指層疊樣式表(Cascading Style Sheets)，樣式定義如何顯示HTML元素，樣式一般又會存在於樣式表中。也就是說把HTML元素的樣式都統一收集起來寫在一個地方或一個CSS文件裏。
③css的優點
1.內容與表現分離
2.網頁的表現統一，容易修改
3.豐富的樣式，使頁面佈局更加靈活
4.減小網頁的代碼量，增長網頁瀏覽器速度，節省網絡帶寬
5.運用獨立頁面的css,有利於網頁被搜索引擎收錄
④如何使用css？
咱們一般會把樣式規則的內容都保存在CSS文件中，此時該CSS文件被稱爲外部樣式表，而後在HTML文件中經過link標籤引用該CSS文件便可。這樣瀏覽器在解析到該link標籤的時候就會加載該CSS文件，並按照該文件中的樣式規則渲染HTML文件。
⑤css語法
聲明+選擇器
css註釋：/*這是註釋*/
2，css引入方式
- 內接樣式
- 行內樣式表
- 外部樣式表
- 連接式
- 導入式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*寫咱們的css代碼*/ /*選擇器 標籤選擇器 共性*/ span{ color: pink; } </style> <!-- <style type="text/css"> @import url('./index.css'); </style> --> <!-- 連接式 --> <link rel="stylesheet" href="./index.css"> </head> <body> <!-- 1.行內樣式 2.內接樣式 3.外接樣式 3.1連接式 3.2導入式 --> <!--行內樣式--> <div> <p style="color: red">我是一個段落</p> </div> <!--內接樣式--> <div> <div> <span>我是另外一個段落</span> <span>我是另外一個段落</span> <span>我是另外一個段落</span> <a href="#">陌上花開</a> </div> </div> </body> </html>
內接樣式
style標籤
<!doctype html>
<html>
<head>
<meta charset="utf8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>這是一個p標籤！</p>
</body>
</html>
行內樣式
<!doctype html> <html> <head> <meta charset="utf8"> </head> <body> <p style="color: blue;">這是一個p標籤！</p> </body> </html>
外聯樣式表-連接式（最經常使用）
link標籤
index.css
p {
color: green;
}
而後在HTML文件中經過link標籤引入：
<!doctype html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>這是一個p標籤！</p>
</body>
</html>
外聯樣式表-@import url()方式 導入式
瞭解便可。
index.css
@import url(other.css)
注意：
@import url()必須寫在文件最開始的位置。
連接式與導入式的區別
一、<link/>標籤屬於XHTML,@import是屬性css2.1
二、使用<link/>連接的css文件先加載到網頁當中，再進行編譯顯示
三、使用@import導入的css文件，客戶端顯示HTML結構，再把CSS文件加載到網頁當中
四、@import是屬於CSS2.1特有的，對於不兼容CSS2.1的瀏覽器來講就是無效的
3，css的選擇器
基本選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的選擇器</title> <style type="text/css"> body{ color:gray; font-size: 12px; } /*標籤選擇器*/ /*p{ color: red; font-size: 20px; } span{ color: yellow; }*/ #box{ background:green; } #s1{ color: red; } #s2{ font-size: 30px; } .title{ color: yellowgreen; font-size: 12px; } .alex{ color: red; } .active{ color: yellow; } </style> </head> <body> <!-- css的選擇器：1.基本選擇器 2.高級選擇器 1.標籤選擇器 標籤選擇器能夠選中全部的標籤元素，好比div，ul，li ，p等等 無論標籤藏的多深，都能選中 選中的是全部的，而不是某一個，因此說 "共性" 而不是 」特性「 2.id選擇器 # 選中id 同一個頁面中id不能重複。 任何的標籤均可以設置id id命名規範 要以字母 能夠有數字 下劃線 - 大小寫嚴格區分 aa和AA 3.類選擇器 1.所謂類 就是class，表示符號爲.，class與id很是類似 任何的標籤均可以加類 可是類是能夠重複 歸類 2.同一個標籤中能夠攜帶多個類，多個類中間用空格隔開，且當有相同設置時，層疊後只能看到後面的那個 類的使用 可以決定前端工程師的css水平到底有多牛逼？ 必定要有」公共類「的概念 總結： 1.不要去試圖用一個類將咱們的頁面寫完。這個標籤要攜帶多個類，共同設置樣式 2.每一個類要儘量的小，有公共的概念，可以讓更多的標籤使用 玩好了類 就等於玩好了css中的1/2 到底使用id仍是用class？ 答案：儘量的用class。除非一些特殊狀況能夠用id 緣由：id通常是用在js的。也就是說 js是經過id來獲取到標籤 --> <div> <p>我是一個段落</p> <ul> <li> <p>1</p> <span> 哈哈哈 </span> </li> </ul> <p>路飛</p> </div> <div> <div> <div> <div> <div> <p>我是另外一個段落</p> </div> </div> </div> </div> </div> <div id="box"> <span id="s1">123</span> <span id="s2">234</span> </div> <div class="box2"> <h3 id="h" class="title xiaoma egon alex">我是一個三級標題</h3> <h3>我是一個三級標題</h3> <h3 class="title">我是一個三級標題</h3> <h3>我是一個三級標題</h3> <h3>我是一個三級標題</h3> </div> </body> </html>
①標籤選擇器
顧名思義就是經過標籤名來選擇元素
特色：
標籤選擇器能夠選中全部的標籤元素，好比div，ul，li ，p等等
無論標籤藏的多深，都能選中
選中的是全部的，而不是某一個，因此說 "共性" 而不是 」特性「
以下將p標籤中的字體變爲20px，紅色
p{
color: red;
font-size: 20px;
}
②id選擇器（少用，通常用在js中較多）
經過元素的id值選擇元素
特色：
# 選中id
同一個頁面中id不能重複。
任何的標籤均可以設置id
id命名規範 要以字母 能夠有數字 下劃線 - 大小寫嚴格區分 aa和AA
<head>
#s1{
color: red;
}
</head>
<body>
<span id="s1">123</span>
</body>
③類選擇器（重點，經常使用）
經過樣式類選擇元素
特色：
1.所謂類 就是class，表示符號爲.，class與id很是類似 任何的標籤均可以加類可是類是能夠重複 歸類
2.同一個標籤中能夠攜帶多個類，多個類中間用空格隔開，且當有相同設置時，層疊後只能看到後面的那個
將全部含.c1的元素設置字體顏色爲紅色。
.c1 {
color: red;
}
使用style時，儘量的用class，除非一些特殊狀況能夠用id。id通常時用在js中的，也就是說時用過id來獲取標籤的。
高級選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高級選擇器</title> <style type="text/css"> /*後代選擇器 在css中使用很是頻繁*/ /*div p{ color: red; } div div p{ color: yellow; } .container div p{ color: green; }*/ /*子代選擇器*/ .container>p{ color: yellowgreen; } /*交集選擇器*/ h3{ width:300px; color: red; } .active{ font-size: 30px; } h3.active{ background-color: yellow; } /*並集選擇器 （組合） 設置多個標籤中的統同樣式*/ a,h4{ color: #666; font-size: 20px; text-decoration: none; } /* * 通配符選擇器 選擇全部標籤 */ /* 性能有點差*/ html,body,div,p,span,a{ color: #6bff09; } </style> </head> <body> <div class="container"> <p>我是另外一個段落</p> <div> <p>我是個段落</p> <a href="#">luffy</a> </div> <p>我是另一個段落2</p> <ul> <li class="item"> <h3 class="active">我是一個H3</h3> <h4>我是一個h4標題</h4> </li> <li> <h4>我是一個h4標題01</h4> <a href="#">BAT</a> </li> </ul> </div> </body> </html>
①後代選擇器
<head>
div p{
color: red;
}
div div p{
color: yellow;
}
.container div p{
color: green;
}
</head>
<body>
<div>
<p>我是另外一個段落</p>
<div>
<p>我是個段落</p>
</div>
</p>
</div>
<body>
②子代選擇器
<head>
.container>p{
color: yellowgreen;
}
</head>
<body>
<div class="container">
<p>我是另外一個段落</p>
<div>
<p>我是個段落</p>
</div>
<p>我是另一個段落2</p>
</div>
</body>
/*第一個div下面的p，兩個我是另外一個段落以及我是另一個段落2回改變顏色，我是個段落不會改變顏色*/
③交集選擇器
<head>
h3{
width:300px;
color: red;
}
.active{
font-size: 30px;
}
h3.active{
background-color: yellow;
}
</head>
<body>
<div>
<ul>
<li class="item">
<h3 class="active">我是一個H3</h3>
<h4>我是一個h4標題</h4>
</li>
</ul>
</div>
</body>
④並集選擇器
<head>
a,h4{
color: #666;
font-size: 20px;
text-decoration: none;
}
</head>
<body>
<div>
<ul>
<li class="item">
<h4>我是一個h4標題</h4>
<a href="#">BAT</a>
</li>
</ul>
</div>
</body>
⑤通配符選擇器
通配符選擇器，選擇全部標籤，可是性能有點差
以下，將全部的未選擇字體顏色的字體設置爲 #6bff09 色號。
*{
color: #6bff09;
}
⑥屬性選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>屬性選擇器</title> <style type="text/css"> label[for]{ color: red; font-size: 20px; } label[for='pwd']{ color: yellow; } /*以...開頭*/ label[for^='vip']{ font-size: 30px; } /*以...結尾*/ label[for$='p2']{ font-size: 20px; } label[for*='ser']{ color: green; } input[type='text']{ background-color: purple; } </style> </head> <body> <!-- 屬性選擇器 一般在 表單控件中 使用比較頻繁--> <div class="box"> <form action=""> <label for="user">用戶名：</label> <input type="text" name="" id="user"> <label for="pwd">密碼：</label> <label for="vip1">vip1</label> <label for="vip2">vip2</label> <label for="user2">用戶名2：</label> <label for="user3">用戶名3：</label> </form> </div> </body> </html>
屬性選擇器 一般在 表單控件中 使用比較頻繁
除了HTML元素的id屬性和class屬性外，還能夠根據HTML元素的特定屬性選擇元素。
1，根據屬性查找
label[title] {
color: red;
}
2，根據屬性和值查找
找到全部title屬性等於hello的元素：
label[title="hello"] {
color: red;
}
找到全部title屬性以hello開頭的元素：
label[title^="hello"] {
color: red;
}
找到全部title屬性以hello結尾的元素：
label[title$="hello"] {
color: red;
}
找到全部title屬性中包含（字符串包含）hello的元素：
label[title*="hello"] {
color: red;
}
找到全部title屬性(有多個值或值以空格分割)中有一個值爲hello的元素：
label[title~="hello"] {
color: red;
}
表單經常使用
input[type="text"] {
backgroundcolor: red;
}
⑦分組選擇器
當多個元素的樣式相同的時候，咱們沒有必要重複地爲每一個元素都設置樣式，咱們能夠經過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。
例如：
div,p {
color: red;
}
爲div標籤和p標籤統一設置字體爲紅色的樣式。
一般，咱們會分兩行來寫，更清晰:
div,
p {
color: red;
}
僞類選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>僞類選擇器</title> <style type="text/css"> /*'愛恨原則' love hate*/ /*沒有被訪問的a標籤的樣式*/ .box ul li.item1 a:link{ color: #666; } /*訪問事後的a標籤的樣式*/ .box ul li.item2 a:visited{ color: #093dff; } /*鼠標懸停時a標籤的樣式*/ .box ul li.item3 a:hover{ color: green; } /*鼠標點住的時候a標籤的樣式*/ .box ul li.item4 a:active{ color: yellowgreen; } /*選中第一個元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*選中最後一個元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*選中當前指定的元素 數值從1開始*/ div ul li:nth-child(3){ font-size: 30px; color: purple; } /*n表示選中全部 從0開始的 0的時候表示沒有選中*/ div ul li:nth-child(n){ font-size: 40px; color: red; } /*偶數*/ div ul li:nth-child(2n){ font-size: 50px; color: gold; } /*奇數*/ div ul li:nth-child(2n-1){ font-size: 50px; color: yellow; } /*隔幾換色 隔行換色*/ div ul li:nth-child(5n+1){ font-size: 50px; color: red; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> 1 <a href="#">張三</a> </li> <li class="item2"> 2 <a href="#">李四</a> </li> <li class="item3"> 3 <a href="#">王八</a> </li> <li class="item4"> 4 <a href="#">趙六</a> </li> <li class="item4"> 5 <a href="#">趙六</a> </li> <li class="item4"> 6 <a href="#">趙六</a> </li> <li class="item4"> 7 <a href="#">趙六</a> </li> <li class="item4"> 8 <a href="#">趙六</a> </li> <li class="item4"> 9 <a href="#">趙六</a> </li> <li class="item4"> 10 <a href="#">趙六</a> </li> </ul> </div> </body> </html>
常見的幾種僞類選擇器（‘愛恨原則’ love hate）
沒有訪問的超連接a標籤樣式：
a:link {
color: blue;
}
訪問過的超連接a標籤樣式：
a:visited {
color: gray;
}
鼠標懸浮在元素上應用樣式：
a:hover {
background-color: #eee;
}
鼠標點擊瞬間的樣式：
a:active {
color: green;
}
input輸入框獲取焦點時樣式：
input:focus {
outline: none;
background-color: #eee;
}
hover選擇器
hover選擇器在網頁中很是好用，若是是我鼠標懸浮的是父盒子，想讓父盒子的子盒子顯示出來，這種效果其實也能夠用hover選擇器。可是咱們要將hover選擇器和後代選擇器結合起來一塊兒用,下面是個例子，你們copy看效果，瞬間就明白,鼠標懸浮alex上 會顯示一張圖片。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul{ list-style: none; } ul li{ position: relative; } ul li img{ display: none; position: absolute; top: -16px; left: 36px; } ul li:hover img{ display: block; } </style> </head> <body> <ul> <li> alex <img class="original-img" src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png" > </li> </ul> </body> </html>
僞類選擇器：nth-child用法
/*選中第一個元素*/
div ul li:first-child{
font-size: 20px;
color: red;
}
/*選中最後一個元素*/
div ul li:last-child{
font-size: 20px;
color: yellow;
}
/*選中當前指定的元素 數值從1開始*/
div ul li:nth-child(3){
font-size: 30px;
color: purple;
}
/*n表示選中全部 從0開始的 0的時候表示沒有選中*/
div ul li:nth-child(n){
font-size: 40px;
color: red;
}
/*偶數*/
div ul li:nth-child(2n){
font-size: 50px;
color: gold;
}
/*奇數*/
div ul li:nth-child(2n-1){
font-size: 50px;
color: yellow;
}
/*隔幾換色 隔行換色 這裏爲隔4換1，要求插入數字爲所想數字比所想數字大於1便可*/
div ul li:nth-child(5n+1){
font-size: 50px;
color: red;
}
去除下劃線
text-decoration: none;
僞元素選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>僞元素選擇器</title> <style type="text/css"> /*設置第一個首字母的樣式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....以前 添加內容 這個屬性使用不是很頻繁 瞭解 使用此僞元素選擇器必定要結合content屬性*/ span:before{ content:'qiuma'; } /*在....以後 使用很是頻繁 一般與我們後面要講到佈局 有很大的關聯（清除浮動）*/ span:after{ content:'&'; color: red; font-size: 40px; } </style> </head> <body> <p> 我是<span>帥哥 </span>一個段落 </p> </body> </html>
first-letter
用於爲文本的首字母設置特殊樣式。
例如：
p:first-letter {
font-size: 48px;
}
before
用於在元素的內容前面插入新內容。
例如：
p:before {
content: "*";
color: red;
}
在全部p標籤的內容前面加上一個紅色的*。
after
用於在元素的內容後面插入新內容。
例如：
p:after {
content: "?";
color: red;
}
在全部p標籤的內容後面加上一個藍色的?。
4，css的繼承性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>繼承性</title> <style type="text/css"> .father{ font-size: 30px; background-color: green; } .child{ color: purple; } </style> </head> <body> <!-- 繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是咱們的css中的繼承 有一些屬性是能夠繼承下來 ： color 、 font-*、 text-*、line-* 文本元素 像一些盒子元素，定位的元素（浮動，絕對定位，固定定位）不能繼承 --> <div class="father" id="egon"> <div class="child"> <p>qiuma</p> </div> </div> <p>小球</p> </body> </html>
繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是咱們的css中的繼承
有一些屬性是能夠繼承下來 ： color 、 font-*、 text-*、line-* 文本元素
像一些盒子元素，定位的元素（浮動，絕對定位，固定定位）不能繼承
5，css的層疊性（權重比較）
層疊性： 權重大的標籤覆蓋掉了權重小的標籤。
權重： 誰的權重大，瀏覽器就會顯示誰的屬性
誰的權重大？
若是是經過繼承過來的屬性，則權重爲0。肯定不是繼承而是選中（選中內部標籤），就能夠比較權重的大小了。
權重大小經過style標籤內id，class，標籤的數量的表示。id > class > 標籤
當權重同樣的時候 是之後設置的屬性爲準。 前提權重同樣 ，後來者居上
繼承來的屬性 權重爲0
總結：
1.先看標籤元素有沒有被選中，先看選中了的，若是選中了，就數數 （id,class,標籤的數量） 誰的權重大 就顯示誰的屬性。權重同樣大，後來者居上
2.若是沒有被選中標籤元素，權重爲0。若是屬性都是被繼承下來的 權重都是0 。權重都是0:"就近原則" ： 誰描述的近，就顯示誰的屬性
3，若是都是沒有被選中的，那就比較沒有被選中的裏面的權重大小了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*1 1 1 */ /*#box2 .wrap3 p{ color: yellow; }*/ /*1 1 1*/ /*#box1 .wrap2 p{ color: red; }*/ /* 0*/ /*繼承來的*/ #box1 #box2 .wrap3{ color: red; } .wrap1 #box2 .wrap3{ color: green; } /*選中來的*/ /*1 1 1*/ /*#box2 .wrap3 p{ color: green; }*/ </style> </head> <body> <!-- 當權重同樣的時候 是之後設置的屬性爲準。 前提權重同樣 ，後來者居上 繼承來的屬性 權重爲0 總結： 1.先看標籤元素有沒有被選中，若是選中了，就數數 （id,class,標籤的數量） 誰的權重大 就顯示誰的屬性。權重同樣大，後來者居上 2.若是沒有被選中標籤元素，權重爲0。 若是屬性都是被繼承下來的 權重都是0 。權重都是0:"就近原則" ： 誰描述的近，就顯示誰的屬性 --> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再來猜猜我是什麼顏色？</p> </div> </div> </div> </body> </html>
還有一種不講道理的!important方式來強制讓樣式生效，可是不推薦使用。由於大量使用!important的代碼是沒法維護的。
!important:設置權重爲無限大 ，!important 不影響繼承來的權重，隻影響選中的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ color: red !important; font-size: 30px; } .spe1{ color: yellow ; font-size: 40px; } .spe2{ color: green; font-size: 40px; } ul{ color: red; } .list{ color: purple !important; } </style> </head> <body> <!-- ！important:設置權重爲無限大 !important 不影響繼承來的權重，隻影響選中的元素 --> <div> <p class="spe1 spe2">我是什麼顏色</p> <p class="spe2 spe1">我是什麼顏色</p> </div> <div class="list"> <ul> <li> 我是一個li標籤 </li> </ul> </div> </body> </html>
6，盒模型
盒模型有兩種：標準模型和IE模型。咱們在這裏重點講標準模型。
width：內容的寬度，不是整個盒子真實的寬度
height: 內容的高度，不是整個盒子真實的高度
padding：內邊距，邊框到內容的距離
border: 邊框，就是指的盒子的寬度
margin：外邊距，盒子邊框到附近最近盒子的距離
盒模型計算：
盒子的真實寬度=width+2*padding+2*border
盒子的真實寬度=height+2*padding+2*border
①padding
邊框到內容之間的距離。
padding有四個方向，能夠分別進行描述。
padding的區域是有背景顏色。而且背景顏色和內容區域顏色同樣
也就是說background-color這個屬性將填充全部的border之內的區域
對於通常狀況能夠直接寫padding: 30px;
一、寫小屬性,分別設置不一樣方向的padding
padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;
二、寫綜合屬性，用空格隔開
/* 上 右 下 左 */ padding: 20px 30px 40px 50px ; /* 上 左右 下 */ padding: 20px 30px 40px; /* 上下 左右 */ padding: 20px 30px; /* 上下左右 */ padding: 20px;
3，一些標籤有默認的padding
好比ul標籤，有默認的padding-left值。
那麼咱們通常在作站的時候，是要清除頁面標籤中默認的padding和margin。以便於咱們更好的去調整元素的位置。
簡單一點，直接可使用通配符選擇器
*{
padding:0;
margin:0;
}
爲了提高效率，咱們也可使用並集選擇器來選中頁面中應有的標籤：點擊進入連接
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
②border
描述盒子的邊框，邊框有三個要素：粗細（不寫默認不顯示，只寫solid，默認3px寬度，黑色），線性樣式，顏色（默認黑色）
線條種類有四種，solid, dotted, double, dashed.分別是直實線，圓點連成的實線，雙實線，矩形方塊連成的直線（虛線）。
按照三要素來寫border：
border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px; 這裏能夠像padding同樣進行方向上面的線條寬度設置。
border-style: solid dotted double dashed; 線條類型。
border-color: red green yellow; 同時也能夠分別設置顏色。
*/
按照方向劃分：
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left-width: 10px;
border-left-color: red;
border-left-style:solid;
上面12條語句，至關於 bordr: 10px solid red;
另外還能夠這樣：
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
清除邊框的默認樣式，好比input輸入框：
border:none; border:0; /*當不須要border的哪個方向時：*/ border-top:0; border-top:none;
利用border來製做小三角：
*小三角 箭頭指向下方*/
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
③margin
margin：外邊距的意思。表示邊框到最近盒子的距離。(兄弟之間)
/*表示四個方向的外邊距離爲20px*/
margin: 20px;
/*表示盒子向下移動了30px*/
margin-top: 30px;
/*表示盒子向右移動了50px*/
margin-left: 50px;
margin-bottom: 100px;
7，標準文檔流概念
當用咱們使用的設計軟件（好比ps）和web頁面進行比較，設計軟件能夠隨意擺放設計元素的位置
可是web網頁的製做是一個「流」，從上而下，更像是一種織毛衣
標準文檔流下 有哪些微觀現象？
1.空白摺疊現象。一個或者多個空格會摺疊成爲一個空格顯示在瀏覽器中。
2.高矮不齊，底邊對齊。好比插入不少大小不一的圖片，高矮可能不同，可是底邊會對齊顯示。
3.自動換行，一行寫不滿，換行寫。插入不少的圖片，一行擺不了，就會換行顯示了。
8，行內元素和塊級元素的轉換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ /*將塊元素轉化成行內元素*/ display: inline; width: 200px; height: 40px; border: 1px solid red; } .box2{ margin-top: 20px; width: 200px; height: 40px; font-size: 40px; border: 1px solid green; } span{ background-color: yellow; width: 100px; height: 40px; /*將行內元素轉化成塊級元素*/ display: block; /*隱藏當前的標籤 不佔位置*/ /*display: none;*/ /*隱藏當前的標籤，佔位置*/ visibility: hidden; } img{ width: 300px; height: 300px; /*隱藏當前的標籤*/ /*display: none;*/ } </style> </head> <body> <div class="box1">內容</div> <div class="box1">內容</div> <div class="box2">內容</div> <span>qiuma</span> <span>qiuma</span> <!-- form表單中 input textarea select --> <img src="./images/企業1.png" alt=""> <img src="./images/企業2.png" alt=""> </body> </html>
經過display來進行轉換，能夠自由變換，獲得不一樣的效果
display: inline; 轉換成行內元素
display: inline-block; 轉換成行內塊元素
display: block; 轉換成塊元素
兩種隱藏效果：
兩種隱藏效果，分別是佔位置和不佔位置： /*隱藏當前的標籤 不佔位置*/ display: none; /*隱藏當前的標籤，佔位置*/ visibility: hidden;
9，浮動
浮動是css裏面佈局最多的一個屬性
float：表示浮動的意思。它有三個值。
- none: 表示不浮動，默認
- left: 表示左浮動
- right：表示右浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box1{ width: 300px; height: 300px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: green; float:right; } span{ float: left; width: 100px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <span>qiuma</span> </body> </html>
效果： 兩個元素並排了，而且兩個元素都可以設置寬度和高度
浮動想學好：必定要知道它的四個特性：
1.浮動的元素脫標
2.浮動的元素互相貼靠
3.浮動的元素有「字圍」效果
4.收縮的效果
浮動的四個特性
①浮動的元素脫標：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; float: left; } .box2{ width: 400px; height: 400px; background-color: yellow; } span{ background-color: green; float: left; width: 300px; height: 50px; } </style> </head> <body> <!-- 脫標： 脫離了標準文檔流 小紅盒子浮動了，脫離了標準流，此時小黃這個盒子就是標準文檔流中的第一個盒子。因此就渲染到了左上方。 浮動元素 「飄起來了」 --> <div class="box1">小紅</div> <div class="box2">小黃</div> <!-- span標籤不須要轉成塊級元素，也可以設置寬高。 全部的標籤一旦設置浮動，可以並排，都不區分行內、塊狀元素，能夠進行設置寬高 --> <span>span標籤</span> <span>span標籤</span> </body> </html>
元素脫標，也即元素脫離了標準流。
第一特色：當設置兩個盒子小盒子A和大盒子B時，盒子A進行了左浮動設置，盒子B沒有，而後A盒子將脫離了標準流
而此時盒子B仍是標準流中的一個盒子，在瀏覽器中渲染時，盒子A渲染到了左上方，浮動飄起來了。
第二特色：全部的標籤一旦設置浮動，可以並排，都不區分行內、塊狀元素，能夠進行設置寬高
②浮動元素相互貼靠
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ background-color: red; float: left; } .box1{ width: 100px; height: 400px; float: left; background-color: red; } .box2{ width: 150px; height: 450px; float: left; background-color: yellow; } .box3{ width: 300px; height: 300px; float: left; background-color: green; } </style> </head> <body> <!-- <span>文字</span> <span>文字</span> --> <!-- 若是父元素有足夠的空間，那麼3哥緊靠着2哥，2哥緊靠着1哥，1哥靠着邊。 若是沒有足夠的空格，那麼就會靠着1哥，若是沒有足夠的空間靠着1哥，本身往邊靠 --> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </body> </html>
效果發現：
若是父元素有足夠的空間，那麼3哥緊靠着2哥，2哥緊靠着1哥，1哥靠着邊。
若是沒有足夠的空間，那麼就會靠着1哥，若是再沒有足夠的空間靠着1哥，本身往邊靠
③浮動元素字圍效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ float: left; } p{ background-color: #666; } </style> </head> <body> <!-- 所謂字圍效果： 當div浮動，p不浮動 div擋住了p，div的層級提升，可是p中的文字不會被遮蓋，此時就造成了字圍效果 關於浮動咱們強調一點，浮動這個元素，咱們初期必定要遵循一個原則 永遠不是一個盒子單獨浮動，要浮動就要一塊兒浮動。 --> <div> <img src="./images/企業1.png" alt=""> </div> <p> 123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </p> </body> </html>
當一個盒子div設置了左浮動，設置另一個沒有浮動的 p 段落時，此時div脫標，遮住了p，且層級比p更大，可是p中的文字不會被遮蓋，此時就造成了字圍效果。
所遵循的一個原則：永遠不是一個盒子單獨浮動，要浮動就要一塊兒浮動。
④浮動元素緊湊效果
收縮：一個浮動元素。若是沒有設置width，那麼就自動收縮爲文字的寬度（這點跟行內元素很像）
若是想製做一個網頁，就是經過浮動來並排。
清除浮動
①浮動帶來的負面影響
當有脫標元素以及未脫標元素在一塊兒時，會產生重合現象。
②如何清除浮動
第一種：給父盒子設置高度。通常出如今導航條中。
缺點：當盒子內內容增長時，可能溢出，影響佈局
第二種：內牆法。clear: both
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul li { float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } .clear{ clear: both; } </style> </head> <body> <div> <ul> <li>Python</li> <li>web</li> <li>linux</li> <!-- 給浮動元素最後面加一個空的div 而且該元素不浮動 ，而後設置clear:both 清除別人對個人浮動影響--> <!-- 內牆法 --> <!-- 平白無故加了div元素 結構冗餘 --> </ul> <div class="clear"></div> </div> <div class="box"> </div> </body> </html>
給浮動元素最後面加一個空的div 而且該元素不浮動
而後設置在該div中的style裏添加clear: both 清除別人對個人浮動影響
還有clear: right 以及 clear: left ，能夠分別清除右邊和左邊的元素不浮動
缺點：平白無故加了div元素，形成結構冗餘
第三種（經常使用）：僞元素選擇器清除法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>僞元素清除法（經常使用）</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul li { float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } /*僞元素選擇器*/ .clearfix:after{ /*必需要寫這三句話*/ content: '.'; clear: both; display: block; height: 0; visibility: hidden; /* 新浪首頁清除浮動僞元素方法 content: "."; display: block; height: 0; clear: both; visibility: hidden */ } </style> </head> <body> <div class="clearfix"> <ul> <li>Python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="box"> </div> </body> </html>
利用僞元素選擇器中的after，在元素的最後面添加新的內容。
<head>
<style type="text/css">
.clearfix:after{
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="clearfix">
</div>
</body>
第四種（經常使用）：overflow: hidden
使用該屬性，內容會被修剪，而且其他內容是不可見的。也就是說，當內容超出盒子界限時，自動隱藏超出的部分。
使用時，直接在這個盒子之中加入這條屬性便可。
.box{
width: 400px;
overflow: hidden;
}
10，margin細講
①margin塌陷問題
當給兩個上下垂直的兄弟盒子，設置垂直方向上面對面上面的的margin，那麼實際的margin值會以較大的爲準，那麼咱們稱這種現象叫塌陷 。並且只有垂直方向上面纔會產生這種問題，水平上面不會產生塌陷問題
可是，浮動的盒子垂直方向 不塌陷
②margin: 0 auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin:0 auto</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 780px; height: 50px; background-color: red; /*水平居中盒子*/ margin: 0 auto; /*margin: 0 auto; 至關於下面代碼*/ /*margin-left: auto; margin-right: auto;*/ text-align: center; float: left; } </style> </head> <body> <!-- 1.使用margin: 0 auto;水平居中盒子 必須有width，要有明確width，文字水平居中使用text-align: center; 2.只有標準流下的盒子 才能使用margin:0 auto; 當一個盒子浮動了，固定定位，絕對定位了，margin:0 auto; 不能用了 3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center; --> <div> 文字 </div> </body> </html>
1.使用margin: 0 auto; 水平居中盒子，前提是必須有width，要有明確width，文字水平居中使用text-align: center;
2.只有標準流下的盒子，才能使用margin:0 auto;
當一個盒子浮動了，固定定位，絕對定位了，margin:0 auto; 也不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
③善於使用父padding，而不是使用margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 270px; height: 270px; background-color: blue; padding-top: 30px; padding-left: 30px; /*border: 1px solid red;*/ } .xiongda{ width: 100px; height: 100px; background-color: orange; /*margin-left: 30px; margin-top: 30px;*/ } </style> </head> <body> <!-- 由於父親沒有border，那麼兒子margin實際上踹的是「流」 踹的是行 因此父親就掉下來 --> <div class="father"> <div class="xiongda"> </div> </div> </body> </html>
當父盒子包含子盒子時，想要調整子盒子在父盒子中的位置，咱們使用父padding，而不是使用子盒子的margin。
由於父盒子沒有border，當子盒子利用margin調整與父盒子垂直上面的距離時，那麼子盒子margin實際上踹的是「流」，踹的是行
因此使用子盒子的margin時，在這種狀況下，會致使父盒子一併移動位置。達不到效果。
11，文本屬性和字體屬性
font: 14px/30px "宋體"; /* 等價於下面： font-size: 14px; line-height: 30px; font-famliy: '宋體'; 這裏字體也能夠帶多個備選字體，之間逗號隔開 */
①font-family：字體
使用font-family注意幾點：
1.網頁中不是全部字體都能用哦，由於這個字體要看用戶的電腦裏面裝沒裝，
好比你設置： font-family: "華文彩雲"; 若是用戶電腦裏面沒有這個字體，
那麼就會變成宋體
頁面中，中文咱們只使用： 微軟雅黑、宋體、黑體。
若是頁面中，須要其餘的字體，那麼須要切圖。 英語：Arial 、 Times New Roman
2.爲了防止用戶電腦裏面，沒有微軟雅黑這個字體。
就要用英語的逗號，隔開備選字體，就是說若是用戶電腦裏面，
沒有安裝微軟雅黑字體，那麼就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體能夠有無數個，用逗號隔開。
3.咱們要將英語字體，放在最前面，這樣全部的中文，就不能匹配英語字體，
就自動的變爲後面的中文字體：
font-family: "Times New Roman","微軟雅黑","宋體";
4.全部的中文字體，都有英語別名，
咱們也要知道： 微軟雅黑的英語別名：
font-family: "Microsoft YaHei";
宋體的英語別名： font-family: "SimSun";
font屬性可以將font-size、line-height、font-family合三爲一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高能夠用百分比，表示字號的百分之多少。
通常來講，都是大於100%的，由於行高必定要大於字號。
font:12px/200% 「宋體」 等價於 font:12px/24px 「宋體」;
反過來，好比： font:16px/48px 「宋體」;
等價於 font:16px/300% 「宋體」
font-family 能夠把多個字體名稱做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。
body {
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}
/*若是設置成 inherit，則表示繼承父元素的字體*/
如上會依次向瀏覽器申請給出的字體樣式。
②font-weight：字體粗細
normal: 默認值，標準粗細 bold: 粗體 bolder: 更粗 lighter: 更細 100~900: 設置具體粗細，400等同於normal，而700等同於bold inherit: 繼承父元素字體的粗細值
③font-size: 字體大小
p {
font-size: 14px;
}
若是設置成了 inherit 表示繼承父元素的字體大小
④color：顏色
- 十六進制值 如: ＃FF0000
- 一個RGB值 如: RGB(255,0,0)
- 顏色的名稱 如: red
⑤text-align：文本對齊
left：左邊對齊 默認值 right：右對齊 center：居中對齊 justify：兩端對齊
⑥line-height：行高
⑦text-decoration：文字修飾
none：默認。定義標準的文本。能夠用來去除a標籤下的橫線 underline：定義文本下的一條線。 overline：定義文本上的一條線。 line-through：定義穿過文本下的一條線。 inherit：繼承父元素的text-decoration屬性的值。
⑧一些特殊表示：
1，cursor: pointer; 定義像a標籤同樣可顯示小手形狀
2，設置單行文本的垂直中間對齊，同時將 height 與 line-height 設置相同等高的數值。也即 行高=盒子的高度時。
若是要進行多行進行設置，先肯定字體大小。調節 line-height 行高以及盒子的 padding 值，能夠達到那種效果。
3，文本首字縮進：text-indent: 2em; 通常縮進大小設置em單位，一個em至關於所處環境一個字體大小。
4，設置導航欄圓角：border-radius: 5px; 這裏設置切掉了5px的圓角。
⑨案例示例：
超連接導航欄美化案例代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超連接美化</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } /*設置背景圖片*/ body{ background-image: url(./images/timg2.jpeg); } .nav{ width: 960px; /*height: 40px;*/ overflow: hidden; margin: 100px auto ; background-color: purple; /*設置圓角*/ border-radius: 5px; } .nav ul li{ float: left; width: 160px; height: 40px; line-height: 40px; text-align: center; } .nav ul li a{ display: block; width: 160px; height: 40px; color: white; font-size: 20px; text-decoration: none; font-family: 'Hanzipen SC'; } /*a標籤除外，不繼承父元素的color,若是須要改變a標籤中的字體顏色，須要另設置一個類表示*/ .nav ul li a:hover{ background-color: red; font-size: 22px; } </style> </head> <body> <div class="nav"> <ul> <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> <li> <a href="">網站導航</a> </li> </ul> </div> </body> </html>
12，backgroud屬性
①backgroud-color
如何使用顏色：
顏色表示方法有哪些？
一共有三種：單詞、rgb表示法、十六進制表示法
rgb:紅色 綠色 藍色 三原色
光學顯示器，每一個像素都是由三原色的發光原件組成的，靠明亮度不一樣調成不一樣的顏色的。
用逗號隔開，r、g、b的值，每一個值的取值範圍0~255，一共256個值。
若是此項的值，是255，那麼就說明是純色：
黑色：
background-color: rgb(0,0,0);
光學顯示器，每一個元件都不發光，黑色的。
白色：
background-color: rgb(255,255,255);
顏色能夠疊加，好比黃色就是紅色和綠色的疊加：
background-color: rgb(255,255,0);
再好比：
background-color: rgb(111,222,123);
就是紅、綠、藍三種顏色的不一樣比例疊加。
16進製表示法
紅色：
background-color: #ff0000;
全部用#開頭的值，都是16進制的。
#ff0000：紅色
16進製表示法，也是兩位兩位看，看r、g、b，可是沒有逗號隔開。
ff就是10進制的255 ，00 就是10進制的0，00就是10進制的0。因此等價於rgb(255,0,0);
怎麼換算的？咱們介紹一下
咱們如今看一下10進制中的基本數字（一共10個）:
0、一、二、三、四、五、六、七、八、9
16進制中的基本數字（一共16個）:
0、一、二、三、四、五、六、七、八、九、a、b、c、d、e、f
16進制對應表：
十進制數 十六進制數
0 0
1 1
2 2
3 3
……
10 a
11 b
12 c
13 d
14 e
15 f
16 10
17 11
18 12
19 13
……
43 2b
……
255 ff
十六進制中，13 這個數字表示什麼？
表示1個16和3個1。 那就是19。 這就是位權的概念，開頭這位表示多少個16，末尾這位表示多少個1。
小練習：
16進制中28等於10進制多少？
答：2*16+8 = 40。
16進制中的2b等於10進制多少？
答：2*16+11 = 43。
16進制中的af等於10進制多少？
答：10 * 16 + 15 = 175
16進制中的ff等於10進制多少？
答：15*16 + 15 = 255
因此，#ff0000就等於rgb(255,0,0)
background-color: #123456;
等價於：
background-color: rgb(18,52,86);
因此，任何一種十六進制表示法，都可以換算成爲rgb表示法。也就是說，兩個表示法的顏色數量，同樣。
十六進制能夠簡化爲3位，全部#aabbcc的形式，可以簡化爲#abc;
好比：
background-color:#ff0000;
等價於
background-color:#f00;
好比：
background-color:#112233;
等價於
background-color:#123;
只能上面的方法簡化，好比
background-color:#222333;
沒法簡化！
再好比
background-color:#123123;
沒法簡化！
要記住：
#000 黑
#fff 白
#f00 紅
#333 灰
#222 深灰
#ccc 淺灰
②backgroud-img
div{
width: 1500px;
height: 1600px;
background-image: url(./bojie.jpg);
/*平鋪*/
background-repeat
/*不平鋪*/
background-repeat: no-repeat;
/*顯示x，y一個方向上的平鋪*/
background-repeat: repeat-x;
}
③backgroud-repeat
表示設置該元素平鋪的方式
應用：可使用左右上下對稱的圖片進行平鋪後設置爲網站的背景圖片
④backgroud-position
屬性設置背景圖像的起始位置。這個屬性設置背景原圖像（由 background-image 定義）的位置
能夠在style中設置背景圖片的位置
width: 1500px; height: 1600px; background-image: url(./bojie.jpg); background-repeat: no-repeat; /*正值 第一個值表示往右偏移 第二個值表示往下 負值則相反*/ background-position: 100px 100px;
雪碧圖技術（精靈圖技術）具體定位圖片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0 } /*首先肯定好圖片的大小，而後利用backgroud-positon進行圖片定位，便可顯示所須要展現的內容*/ .box1{ width: 48px; height: 48px; background-image: url(./images/1.png); background-repeat: no-repeat; background-position: 0 -528px; } .box2{ width: 48px; height: 48px; background-image: url(./images/1.png); background-repeat: no-repeat; background-position: 0 -440px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分，減小了網頁向服務器發送請求的次數，加快加載速度。
⑤background-attach
將背景圖片固定下來，當瀏覽一個盒子中的文字時，能夠直接固定背景圖片，而文字能夠滾動。
background-attachment: fixed;
水平居中通天banner圖
當圖片的寬度很大時，咱們直接能夠直接顯示圖片的中間位置
background-position: center top;
backgroud綜合屬性設置
相對於逐個對屬性進行設置，也能夠綜合進行設置，效果是同樣的
background: red url('./images/banner.jpg') no-repeat center top fixed;
13，定位
相對定位(relative)
①做用：微調咱們元素的位置
若是對當前元素僅僅設置相對定位，那麼和標準流下的盒子沒有什麼區別
設置相對定位，咱們就可使用四個方向的屬性，top left right bottom
.box1{
width: 200px;
height: 200px;
background-color: red;
/*下面爲相對定位：若是對當前元素僅僅設置相對定位，那麼與標準流下的盒子沒有什麼區別*/
position: relative;
top: 20px;
left: 30px;
}
②相對定位的三大特性：（不脫標，形影分離，老家留坑）
也即不脫離標準流，自己和影子是分不開的，保留在原來的位置上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; } .box1{ background-color: red; } .box2{ background-color: green; position: relative; top: 50px; left: 100px; } .box3{ background-color: blue; } </style> </head> <body> <!-- 相對定位三大特性： 1.不脫標 2.形影分離 3.老家留坑 :佔着茅房不拉屎，噁心人 。 因此說 相對定位 在頁面中沒有什麼太大的做用。影響咱們頁面的佈局。可是咱們不要使用相對定位來作壓蓋效果--> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
絕對定位(absolute)
①絕對定位三個特性
1，脫標 2，作遮蓋效果，提高層級 3.設置絕對定位以後，不區分行內元素和塊級元素，相對定位後都能設置寬高。
②絕對定位參考點（top，bottom）（重要）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ width: 100%; height: 2000px; border: 10px solid green; } .box{ width: 200px; height: 200px; background-color: red; /*絕對定位參考點： 1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置 2.當我使用bottom屬性描述的時候。是以首屏頁面左下角爲參考點來調整位置。能夠嘗試拖動瀏覽器下邊框改變瀏覽器大小來查看效果 */ position: absolute; /*top:30px;*/ bottom: 100px; left: 18px; } </style> </head> <body> <div class="box"> </div> </body> </html>
1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角爲參考點來調整位置。
③父相子絕定位屬性（重要）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border: 5px solid red; margin: 100px; /*父盒子設置相對定位*/ position: relative; padding: 50px; } .box2{ width: 300px; height: 300px; background-color: green; position: relative; } .box p{ width: 100px; height: 100px; background-color: pink; /*子元素設置了絕對定位*/ position: absolute; top: 0; left: 0; } /*父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點 這個父輩元素不必定是爸爸，它也能夠是爺爺，曾爺爺。 若是父親設置了定位，那麼以父親爲參考點。那麼若是父親沒有設置定位，那麼以父輩元素設置定位的爲參考點 */ </style> </head> <body> <div class="box"> <div class="box2"> <p></p> </div> </div> </body> </html>
父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點
這個父輩元素不必定是爸爸，它也能夠是爺爺，曾爺爺。相對來講，子元素以最近一級設置了相對定位元素的位置爲參考點
注意：
當否則僅僅只有父相子絕，還有父絕子絕，父固子絕，都是以父輩元素爲參考點的。而父絕子絕，沒有實戰意義，作站的時候不會出現父絕子絕。由於絕對定位脫離標準流，影響頁面的佈局。相反‘父相子絕’在咱們頁面佈局中，是經常使用的佈局方案。由於父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整位置信息。還要注意的是，絕對定位的盒子，無視父輩的padding。
④絕對定位盒子居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 100%; height: 69px; background: #000; } .box .c{ width: 960px; height: 69px; background-color: pink; margin: 0 auto; /*position: relative;*/ position: absolute; left: 50%; margin-left: -480px; /*設置絕對定位以後，margin:0 auto;不起任何做用，若是想讓絕對定位的盒子居中。 先設置子元素絕對定位，而後left:50%; margin-left等於元素寬度的負一半，實現絕對定位盒子居中*/ } </style> </head> <body> <div class="box"> <div class="c"></div> </div> </body> </html>
正常狀況下，咱們使用margin: 0 auto; 可使盒子水平居中，可是這只是存在於標準流當中的盒子當一個盒子浮動了，固定定位，絕對定位了，margin: 0 auto; 不能用了，這時咱們須要使用其餘方式來對絕對定位的盒子居中。
咱們能夠將絕對定位子元素left:50%; margin-left等於元素寬度的負一半，達到實現絕對定位盒子居中
固定定位(fixed)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } p{ width: 100px; height: 100px; background-color: red; position: fixed; bottom: 30px; right: 40px; } </style> </head> <body> <div> <p></p> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> </div> </body> </html>
固定定位：固定當前的元素不會隨着頁面滾動而滾動，
特性：1.脫標 2.提高層級 3.固定不變 不會隨頁面滾動而滾動
參考點：設置固定定位，用top描述。那麼是以瀏覽器的左上角爲參考點若是用bottom描述，那麼是以瀏覽器的左下角爲參考點
做用： 1.返回頂部欄 2.固定導航欄 3.小廣告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定導航欄</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } a{ text-decoration: none; } body{ /*給body設置導航欄的高度，來顯示下方圖片的整個內容*/ padding-top: 49px; } .wrap{ width: 100%; height: 49px; background-color: #000; /*設置固定定位以後，必定必定要加top屬性和left屬性*/ position: fixed; top: 0; left: 0; } .wrap .nav{ width: 960px; height: 49px; margin: 0 auto; } .wrap .nav ul li{ float: left; width: 160px; height: 49px; text-align: center; } .wrap .nav ul li a{ width: 160px; height: 49px; display: block; color: #fff; font: 20px/49px "Hanzipen SC"; background-color: purple; } .wrap .nav ul li a:hover{ background-color: red; font-size: 22px; } </style> </head> <body> <div class="wrap"> <div class="nav"> <ul> <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> <li> <a href="#">網頁開發</a> </li> </ul> </div> </div> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> </body> </html>
14，z-index
四大特性
- z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
- 只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index
- z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
- 從父現象：父親慫了，兒子再牛逼也沒用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0 } .tianliang{ width: 200px; height: 200px; background-color: red; position: relative; z-index: 3; } .tianliang .sendie{ width: 100px; height: 100px; background-color: pink; position: absolute; top: 240px; left: 300px; z-index: 333; } .lzy{ width: 200px; height: 200px; background-color: yellow; position: relative; z-index: 4; } .lzy .brother{ width: 100px; height: 100px; background-color: green; position: absolute; top: 100px; left: 320px; z-index: 111; } </style> </head> <body> <div class="tianliang"> <p class="sendie"></p> </div> <div class="lzy"> <p class="brother"></p> </div> </body> </html>
最後，能夠參考小米商城並用所學將大體部分作出來，說明你掌握就能夠到位了
- 1. HTMLCSS學習之CSS基礎
- 2. Web 開發基礎
- 3. HTMLCSS學習筆記（十三）-- HTML5基礎
- 4. 基礎10-Web開發基礎
- 5. 三維Web開發基礎
- 6. web開發基礎知識
- 7. Web開發基礎-Tomcat
- 8. Web開發基礎總結
- 9. Web開發（一）基礎
- 10. Web開發——HTML基礎
- 更多相關文章...
- • Rust 基礎語法 - RUST 教程
- • R 語言基礎 - R 語言教程
- • PHP開發工具
- • JDK13 GA發佈：5大特性解讀
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
- 1. HTMLCSS學習之CSS基礎
- 2. Web 開發基礎
- 3. HTMLCSS學習筆記（十三）-- HTML5基礎
- 4. 基礎10-Web開發基礎
- 5. 三維Web開發基礎
- 6. web開發基礎知識
- 7. Web開發基礎-Tomcat
- 8. Web開發基礎總結
- 9. Web開發（一）基礎
- 10. Web開發——HTML基礎