HTML+CSS
WEB概述：
一、什麼是WEB
一、WEB就是互聯網上的一種應用程序（網頁程序）
二、程序結構：
一、C/S: C：Client 客戶端， S：Server 服務器
一、缺點：須要常常更新
二、B/S：B：Browser 瀏覽器，S：Server 服務器
三、WEB的組成和運行流程
一、web組成：瀏覽器，服務器，和 通訊協議組成
一、瀏覽器：代替用戶向服務器發送請求（User Agent）
二、服務器：接收用戶請求並給出響應
三、通訊協議：規範了請求和響應數據是如何打包以及傳遞的（http協議）
HTTP：Hyper Text Transfer Protocal（超文本傳輸協議）
四、web服務器：
一、服務器的做用：
一、用於接收用戶的請求並給出響應
二、存儲web的信息（視頻等）
三、具有安全性能功能（密碼須要加密等）
二、產品：
一、Apache
二、Tomcat
三、IIS
四、Nginx
三、技術：
一、Python Web
二、JSP
三、PHP
四、ASP.NET
五、WEB瀏覽器：
一、做用：
一、代替用戶向服務器發送求情
二、做爲響應數據的解釋和執行引擎
二、主要瀏覽器產品：
一、Microsoft IE（Internet Explorer）
二、Google Chrome
三、Mozilla Firefox
四、Apple Safari
五、Opera Opera
三、瀏覽器靠內核處理數據，內核包括如下兩個部分：
一、內容排版引擎——HTML，CSS
二、腳本解釋引擎——JavaScript
四、瀏覽器技術
一、HTML
二、CSS
三、JavaScript
HTML概述
一、HTML介紹 和 基礎語法
一、什麼是HTML
Hyper Text Markup Language（超級本文標記語言）
一、超文本：具備特殊功能的文本
示例：
一、普通文本 a：普通字符a ；b：普通字符b
二、超級文本 a：表示超級鏈接功能；b：表示加粗功能
二、標記：超文本的組成形式
示例：
一、普通文本 a：a
二、超級文本 a：<a></a>
三、HTML是由W3C負責制定和推廣規範的
一、W3C：World Wide Web Consortium（萬維網聯盟）
二、HTML在計算機中的表現
一、HTML在計算機中以.html 或者.htm 爲結尾的文件存在的
二、開發工具：全部的文本編輯軟件
一、Windows 記事本
二、Editplus，Sublime
三、Webstorm，Dreamweaver，...
三、運行工具：瀏覽器
三、標記的語法規範
一、什麼是標記
在網頁中用於表示功能的符號稱爲‘標記’/'標籤'/‘元素’
二、語法
一、標記在使用過程當中，須要用<>括起來
二、標記分爲雙標記和單標記
一、雙標記
一、雙標記是有顯示的開始 和結束標記組成的，<標記>內容</標記>
二、示例：
一、<s>刪除線</s>
二、<b>加粗</b>
三、注意：有開始，必須有結束，不然會產生意想不到的效果
二、單標記
一、只有一個標記，既要表示開始，也能表示結束
二、語法：<標記> 或者 <標記/>
三、示例
一、<br> 或 <br/>：換行
二、<hr> 或 <hr/>：一條水平線
三、<img> 或 <img/>:圖片
四、<input> 或 <input/>:表單空間
三、標記的嵌套
一、在一對標記中，又出現了其餘的標記，至關於就是功能的嵌套
二、示例：
<s>
<b>文本內容</b>
</s>
三、注意：標記嵌套時必定要注意格式問題：
一、被嵌套的內容必定要加縮進
四、標記的屬性 和 值
一、什麼是屬性
一、在標記中，屬性是用來修飾標記的顯示效果的
二、語法：
一、屬性必需要聲明在開始標記中
二、屬性和標記之間要用空格隔開
三、屬性和值之間要使用=號鏈接，值要用‘’或者「」號引發來
四、一個元素容許設置多個屬性，而且排名不分前後，多屬性之間用 空格 隔開
五、HTML中的註釋：
一、<!--備註內容-->
二、注意：
一、註釋不能出如今<>中
二、註釋不能嵌套
二、HTML文檔結構
一、文檔類型聲明
一、出如今網頁最頂端的第一個標記
二、做用：告訴瀏覽器使用的是HTML的哪一個版本
示例：<!doctype html>:h5的文本聲明，不區分大小寫
二、html頁面：
一、在文檔類型聲明之下，使用一對<html></html>根標記來表示頁面
二、html根標記要包含兩對子標記：
一、<head></head>:表示網頁頭部信息
二、<body></body>:表示網頁的主體，顯示給用戶看的內容
三、<head></head>元素
一、<title>標題</title>
二、<meta charset='utf-8'/>:指定網頁內容的編碼格式,此處須要與html文件保存的編碼一致
三、指定網頁的關鍵字——面向搜索引擎(用戶看不到)，營銷網站必須有的
<meta name='keywords' contnet='關鍵字1，關鍵字2，關鍵字3'>
四、指定網頁的描述文本——面向搜索引擎
<meta name='description' content='描述的內容通常大概100字以內字以內'>css
<!doctype html> <html> <head> <meta charset="utf-8"/> <meta name='keywords' content="減肥，減肥妙招，一天瘦十斤"/> <meta name='description' content='還在爲肥胖而感到苦惱嗎？'/> <title>個人第一個網頁</title> </head> <body> </body> </html>
HTML標記
一、文本
一、HTML中的特殊字符
一、 ：表示一個空格，多個 之間用；分號分開
二、<：表示一個<
三、>：表示一個>
四、©：表示一個©（copyright）
五、¥：表示￥html
六、注意：使用<和>生成的尖括號將失去原有標籤的功能web
<p></p>  ：在網頁中表示的是一個段落元素©版權全部：¥:9999
<p></p> ：在網頁中表示的是一個段落元素©版權全部：¥:9999
二、文本樣式標記
一、做用：改變文本在網頁中的表現形式
二、標記：
一、<i></i>：斜體
二、<u></u>：下劃線
三、<s></s>：刪除線
四、<b></b>：加粗
五、<sup></sup>：上標
六、<sub></sub>：下標
七、特色：以上標記容許與其餘文本內容在一行內顯示瀏覽器
這是一段有<b>加粗</b>，<i>斜體</i>，<s>刪除線</s>，<u>下劃線</u>，上<sup>標</sup>，下<sub>標</sub>的文本標
這是一段有加粗，斜體，刪除線，下劃線， 上
，下標
的文本
三、標題標記
一、語法：<h#></h#> ,#表示1-6
二、特色：
一、改變文字的大小以及加粗效果
二、每一個標題都具有垂直的空白距離
三、每一個標題獨佔一行
四、每一個標題都具備一個屬性
一、屬性：align
二、值：
一、left:居左顯示（默認）
二、center：居中顯示
三、right：居右顯示安全
<h1 align='center'>靜夜思</h1> <h2 align="center">李白</h2> <h3 align="right">牀前明月光</h3> <h4 align="left">疑是地上霜</h4> <h5>舉頭望明月</h5> <h6>低頭思故鄉</h6>
四、段落元素：
一、做用：突出顯示一段文本
二、特色：
一、獨佔一行
二、每一個元素有具有垂直空白距離
三、語法：<p></p>
一、屬性：alig
二、值：left/center/right
三、特色：不能嵌套塊級元素
五、換行元素：<br> 或者 <br/>
六、水平線元素：<hr> 或者 <hr/>
七、分區元素：
一、塊分區元素
標記：<div></div>
特色：獨佔一行，能夠嵌套任何內容
屬性：align（取值：left/center/right）
做用：佈局
二、行內分區元素
標記：<span></span>
特色：能在一行中顯示多個，只能嵌套文本，i，u，s，b，等元素
做用：設置同一行文本的不一樣樣式
八、行內元素 與 塊級元素
一、按照元素不一樣的表現形式，對元素進行一個類別的劃分
二、塊級元素：
一、在網頁中能獨佔一行的元素都是塊級元素
二、好比：p，div， h1～h6，
三、特色：塊級元素都有align屬性
三、行內元素：
一、多個元素可以在一行內顯示的，都是行內元素
二、好比：span，i，b，s，u，sup，sub等元素服務器
一、列表標記
一、列表的組成
一、列表的類型
一、有序列表：<ol></ol> (Order List)
二、無序列表：<ul></ul>（Unorder List）
二、列表項：<li></li>（List Item）
二、列表的屬性
一、<ol></ol>
屬性：type
取值：
一、1:按數字方式顯示標識，默認值
二、A：按大寫英文字母方式顯示標識，Z以後是AA，AB....
三、a：按小寫英文字母方式顯示標識
四、I：按大寫羅馬數字方式顯示標識
五、i：按小寫羅馬數字方式顯示標識
二、<ul></ul>
屬性：type
取值：
一、disc：默認值，實心圓點
二、circle：空心圓點
三、square：實心方塊
四、none：不顯示任何符號網絡
<ol> <li>西遊記</li> <li>紅樓夢</li> <li>三國演義</li> <li>水滸傳</li> </ol> <ol type="1"> <li>西遊記</li> <li>紅樓夢</li> <li>三國演義</li> <li>水滸傳</li> </ol> <ol type="A"> <li>西遊記</li> <li>紅樓夢</li> <li>三國演義</li> <li>水滸傳</li> </ol> <ol type="a"> <li>西遊記</li> <li>紅樓夢</li> <li>三國演義</li> <li>水滸傳</li> </ol> <ol type="I"> <li>西遊記</li> <li>紅樓夢</li> <li>三國演義</li> <li>水滸傳</li> </ol> <ol type="i"> <li>西遊記</li> <li>紅樓夢</li> <li>三國演義</li> <li>水滸傳</li> </ol> <ul> <li>金毛獅王</li> <li>青翼蝠王</li> <li>紫衫龍王</li> <li>白眉鷹王</li> </ul> <ul type="disc"> <li>金毛獅王</li> <li>青翼蝠王</li> <li>紫衫龍王</li> <li>白眉鷹王</li> </ul> <ul type="circle"> <li>金毛獅王</li> <li>青翼蝠王</li> <li>紫衫龍王</li> <li>白眉鷹王</li> </ul> <ul type="square"> <li>金毛獅王</li> <li>青翼蝠王</li> <li>紫衫龍王</li> <li>白眉鷹王</li> </ul> <ul type="none"> <li>金毛獅王</li> <li>青翼蝠王</li> <li>紫衫龍王</li> <li>白眉鷹王</li> </ul>
三、列表的嵌套
一、被嵌套的內容必須放在li中app
<ol> <li> 水滸傳 <ol type='a'> <li>西門慶</li> <li>潘金蓮</li> <li>武大郎</li> </ol> </li> <li> 三國演義 <ol type='i'> <li>呂布</li> <li>貂蟬</li> <li>董卓</li> </ol> </li> </ol>
二、圖形 和 連接
一、URL
一、什麼是URL
一、Uniform Resource Locator（統一資源定位符），主要用於標識網絡中資源的位置，俗稱路徑
二、URL分類
一、絕對路徑
一、從一個固定的位置處去查找資源文件的地址
二、網絡資源：
一、協議名稱（https）
二、主機名稱/域名/IP地址（www.baidu.com）
三、目錄路徑（文件所在的文件夾）（img）
四、文件名稱（bd_logo1.png）
https://www.baidu.com/img/bd_logo1.png
二、相對路徑
一、從當前的文件位置處開始查找資源文件所通過的路徑就是相對路徑
三、根相對路徑
一、以‘/’做爲開始來標識的路徑
二、圖像
一、標記：<img/>
二、屬性：
一、src：要顯示的圖片的URL（相對/絕對/根相對）
二、width：設置圖片的寬度，以px爲單位的數值（容許省略px）
三、height：設置圖片的高度，同上ssh
四、title：表示沒有刷新出來圖片的時候顯示的
五、注意：width和height，若是隻設置一個屬性值，那麼另一個屬性值也會跟着等比縮放ide
<img src="https://www.baidu.com/img/bd_logo1.png" title="百度" width="270" />
三、超連接
一、什麼是超連接
容許經過鼠標的點擊完成頁面跳轉的行爲就是超連接
一、標記：<a>內容</a>
二、屬性：
一、href:標識要連接到的文件的地址,href='#'表示連接到本頁
二、target：指定打開新網頁的方式
取值：
一、_self：默認值，在自身標籤頁中打開新網頁
二、_blank：在新標籤頁中打開新網頁
<a href="https://www.baidu.com/img/bd_logo1.png" target="_blank">百度</a>
三、表格
一、什麼是表格
一、表格是按照必定的結構來展現數據的，表格是按照從上到下，從左到右的方式來展現數據的，數據所有都存在單元格中
二、表格的語法：
一、標記
一、表格：<table></table>
二、錶行:<tr></tr>（Table Row）
三、單元格（列）：<td></td>(Table Data)
二、屬性
一、表格
一、border：指定表格的邊框寬度，以px爲單位（px能夠省略）
二、width：指定表格的寬度，以px爲單位
三、height：指定表格的高度
四、align：指定表格在父元素中的水平對齊方式
取值：（left，center，right）
五、cellpadding：單元格內邊距
六、cellspacing：單元格外邊距
二、tr屬性
一、align：控制當前行的文本的水平對齊方式
取值：left/center/right
二、valign:控制當先列的文本的垂直對齊方式
取值：top/middle/bottom
三、bgcolor：控制當前行的背景顏色
一、取值：表示顏色的英文單詞
三、td屬性：
一、width:單元格的寬度，改變一個單元格的寬度將改變該列的寬度
二、height：單元格的高度，改變一個單元格的高度將改變該行的高度
三、align：
四、valign：
五、bgcolor
六、colspan：跨列
七、rowspan：跨行
三、不規則表格的建立
一、單元格的跨列
一、從指定單元格位置開始，橫向向右合併幾個單元格（包括本身），須要手動刪除被合併掉的單元格
二、語法：colspan=‘n’
二、單元格的跨行
一、從指定單元格位置開始，縱向向下合併幾個單元格（包括本身），須要手動刪除被合併掉的單元格
二、語法：rowspan=‘n’
四、行分組
一、語法
一、表頭行分組：<thead></thead>
二、表尾行分組：<tfoot></tfoot>
表格的最後一行若是要分組的話，放在表尾行分組
三、表主題行分組：<tbody></tbody>
除表頭和表尾分組以外，剩餘的放在表主題分組
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" width="400" align="center" cellpadding="10" cellspacing="0"> <thead bgcolor='blue'> <tr align="center"> <td bgcolor="red">姓名</td> <td>身高</td> <td>體重</td> <td>年齡</td> </tr> </thead> <tr> <td bgcolor="red" width="600" height="60" align="center" valign="bottom">范冰冰</td> <td colspan="2" align="center">158</td> <td>58</td> </tr> <tr> <td>李冰冰</td> <td>166</td> <td rowspan="2">92</td> <td>40</td> </tr> <tr> <td>孫冰冰</td> <td>172</td> <td>24</td> </tr> </table> </body> </html>
四、表單
一、做用：收集用戶信息並提交給服務器
二、特色：表單在網頁中是不可見的，可是功能是不能忽略的
三、表單中的兩個要素：
一、form元素：收集用戶的信息
二、表單控件：可以與用戶進行數據交互的可視化組件
四、form元素
一、做用：就是表單，收集信息並提交給服務器
二、語法：<form></form>
注意：只有放在form中的表單控件，才能被提交
三、屬性：
一、action：指定要提交給服務器上處理程序的地址，默認提交給本頁
二、method：提交方法/方式
取值：
一、get：默認值，向服務器要數據的時候使用get
特色：
一、提交的數據會顯示在地址欄上
二、安全性較低
三、有提交數據的大小限制（在2KB以內）
二、post：要提交數據給服務器處理時，使用post
特色：
一、隱式提交，看不到提交的數據
二、安全性較高
三、無提交數據的大小限制
三、enctype（encoding type）：指定表單數據進行編碼的方式，即容許將什麼樣的數據提交給服務器
取值：
一、application/x-www-form-urlencoded：默認值，容許將全部的文本數據提交給服務器
二、multipart/form-data：容許將文件提交給服務器
三、text/plain：容許將普通字符（[0-9A-Za-z_]）提交給服務器，特殊字符不能提交
五、表單控件
一、做用：可視化的組件，用於與用戶進行數據交互，表單控件只有放在<form>中才容許被提交
二、表單控件詳解
一、文本框 與 密碼框
一、文本框：<input type='text'>
二、密碼框：<input type='password'>
三、屬性：
一、name：爲控件起名，在服務器上使用，若是不聲明name屬性，則沒法提交
二、value：值，控件上所顯示的值
三、maxlength：限制輸入的最大數字數,不能限制value值的默認值的長度
四、palceholder：提示佔位符，該值不會被提交，若是不設置value值，則輸入框中顯示該值，不受maxlength的限制
二、按鈕
一、提交按鈕：<input type='submit'>或者<button type='submit'>按鈕上的文字</button>
二、重置按鈕：<input type='reset'>或者<button type='reset'>按鈕上的文字</button>
三、普通按鈕：<input type='button'>或者<button type='button'>按鈕上的文字</button>
四、屬性：
一、value：控制按鈕上面的文字
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表單</title> </head> <body> <form action="login" method="GET"> <p> 用戶名稱：<input type="text" name="username" value='123456785' maxlength='5' placeholder="請輸入用戶名稱"> </p> <p> 用戶密碼：<input type="password" name="userpwd" maxlength="6" placeholder="請輸入用戶密碼"> </p> <p> <input type="submit" name="" value="提交按鈕"> </p> <p> <input type="reset" name="" value="重置按鈕"> </p> <p> <input type="button" name="" value="普通按鈕"> </p> </form> </body> </html>
三、單選按鈕 和 複選框
一、單選框：<input type='radio'>
二、複選框：<input type='checkbox'>
三、屬性：
一、name：爲控件定義名稱，除了定義名稱以外，name屬性也起到了分組的做用，
注意：一組的單選按鈕和複選框，名稱必須一致
二、value：定義控件的值，當用戶選中控件的時候，則將該控件的value值提交給服務器
三、checked：設置預選中，該屬性無值
四、隱藏域 和 文件選擇框
一、隱藏域
一、做用：想提交給服務器可是不想給用戶看的數據要放在隱藏域中
二、語法：<input type='hidden'>
屬性：
一、name：定義控件的名稱
二、value：定義控件的值
二、文件選擇框：用於向服務器發送文件
一、語法：<input type='file'>
屬性：name：定義控件的名稱
二、注意：
一、表單的method必須爲post
二、表單的enctype必須爲multipart/form-data
五、多行文本域：
一、標記：<textarea></textarea>
二、屬性：
一、name：定義控件的名稱
二、cols：指定文本域的列數（一行中最多能顯示多少個英文字符，中文減半）,滾動條佔一列
三、rows：指定文本域的默認行數（超過這個行數將出現滾動條）
六、下拉選項框：
一、語法：
<select name=''>
<option value='值1'>顯示內容1</option>
<option value='值2'>顯示內容2</option>
<option value='值3'>顯示內容3</option>
...
</select>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表單</title> </head> <body> <form action="login" method="post" enctype="multipart/form-data"> <p> 性別: <input type="radio" name="gender" value="0">男 <input type="radio" name="gender" value="1" checked>女 </p> <p> 愛好： <input type="checkbox" name="hobby" checked>吃 <input type="checkbox" name="hobby" checked>和 <input type="checkbox" name="hobby">玩 <input type="checkbox" name="hobby">樂 </p> <p> <input type="hidden" name="uid" value="123456"> </p> <p> 用戶頭像： <input type="file" name="uImg"> </p> <p> 自我介紹： <textarea name="into" cols="10" rows="5">fsfsdfsdfsdfsdfsdfdsfdsfsdfdsfsdfdsfsd</textarea> </p> <P> 所在地址： <select name='addr'> <option value="1">北京市</option> <option value="2">上海市</option> <option value="3">重慶市</option> <option value="4">天津市</option> </select> </P> </form> </body> </html>
CSS
一、CSS介紹
CSS：Cascading Style Sheets 級聯樣式表
HTML：搭建網頁結構
CSS：在網頁結構基礎上進行網頁的美化
二、CSS的使用方式（重點）
一、內聯方式：將CSS內容定義在單獨的HTML元素中
一、語法：<ANY style='樣式聲明'>
一、樣式聲明：
一、每一個樣式聲明都是由樣式屬性名稱和樣式屬性值來組成的
二、屬性名稱和屬性值之間使用：冒號鏈接
三、在一個style中容許出現多個樣式聲明，多個樣式聲明之間使用；分號分割
四、示例：<ANY style='屬性1：值1；屬性2：值2；屬性3：值3...'>
五、經常使用的屬性和值
一、文字大小
屬性：font-size
取值：以px爲單位的數值,px不能省略
二、文本的顏色
屬性：color
取值：表示顏色的英文單詞
三、背景顏色
屬性：background-color
取值：表示顏色的英文單詞
二、內部樣式表
一、做用：讓定義好的樣式使用在多個元素中
二、語法：
<head>
<style>
樣式規則1
樣式規則2
...
樣式規則n
</style>
</head>
樣式規則：
一、由選擇器 和 樣式聲明組成
二、選擇器：規範了頁面中哪些元素可以使用聲明好的樣式
三、示例：
選擇器{
樣式聲明1；
樣式聲明2；
...
}
三、註釋：在<style>中使用/* */來表示註釋
三、外部樣式表
一、做用：讓聲明好的樣式適用於多個網頁中
將樣式規則聲明在獨立的css文件中（xxx.css）
在使用的網頁上對xxx.css文件進行引用
<head>
<link rel='stylesheet' href='css文件路徑'>
</head>
三、CSS樣式表的特徵
一、繼承性：大部分的CSS屬性是能夠由父元素繼承給子元素的
二、層疊性：
容許爲一個元素定義多種使用方式（內聯，內部樣式表，外部樣式表）。若是定義的屬性不衝突的話，那麼全部的屬性均可以應用到元素上
三、優先級：若是樣式聲明衝突的話，則按照不一樣的優先級來應用樣式
一、瀏覽器缺省設置：最低
二、內部或外部樣式表：中
一、就近原則：後定義者優先
三、內聯方式：最高
四、能夠在樣式後面添加 !import表示優先級最高
四、調錯：
一、Unknown property name：樣式屬性名稱寫錯了
二、Invalid property value：樣式屬性值寫錯了
四、css選擇器（重難點）
一、CSS選擇器的做用
一、規範了頁面中哪些元素可以使用聲明好的樣式
二、爲了匹配頁面中的元素
二、選擇器詳解
一、元素選擇器
一、特色：由元素名稱做爲選擇器，目的是爲了匹配頁面中指定元素名稱的全部標記
二、語法：
元素名{
樣式聲明1
...
}
二、類選擇器：
一、特色：容許被頁面上任意一個元素所引用
二、語法：
.類選擇器名稱{
樣式聲明1
....
}
三、命名規範：字母，數字下劃線組成，數字不能開頭
四、引用類選擇器：
<ANY class='類名'>
五、特殊用法：
一、分類選擇器的定義方式
一、特色：容許將元素選擇器或類選擇器結合到一塊兒使用
二、目的：爲了實現對某種元素不一樣樣式的細分控制
三、語法：
元素選擇器.類選擇器{
...
}
二、多 類選擇器的引用方式：
一、特色：讓一個元素引用多個類選擇器，多個類選擇器名稱之間用空格分開
二、<ANY class='類名1 類名2'>
三、id選擇器
一、id：在HTMl中，每一個元素均可以聲明一個id屬性，取值在網頁中必須是獨一無二的，不能重複的
二、id選擇器的做用：爲了匹配頁面中指定id值的元素
三、語法：
#id選擇器名{...}
四、羣組選擇器
一、做用：定義多個選擇器們共有的樣式
二、聲明方式是一個以，逗號隔開的選擇器列表
三、語法：選擇器1，選擇器2，選擇器3...{...}
五、後代選擇器：（只要具有層級關係，無論是幾層層級關係，子代也屬於後代）
一、做用：
依託於元素的後代關係來匹配某元素的後代元素（不限制層級）
二、語法：
選擇器1 選擇器2{}
三、示例：
一、div span{
匹配全部的div中全部的span元素
}
二、#top .important{
匹配id爲top中全部class爲important的元素
}
六、子代選擇器：（具備一層層級關係）
一、做用：
依託於元素的子代關係來匹配元素（只有一層層級）
二、語法：選擇器1>選擇器2>選擇器3...{....}
三、示例：
一、#main>.important{
匹配id爲main中子代class爲important的元素
}
七、僞類選擇器
一、做用：爲了匹配元素不一樣狀態的選擇器，一般會配合其餘選擇器一塊兒使用（選擇器:僞類狀態{...}）
二、語法：:僞類狀態
一、鏈接僞類
一、:link：匹配超連接未被訪問時的狀態
二、:visited：匹配超連接被訪問事後的狀態
二、動態僞類
一、:hover：匹配當鼠標懸停在元素上時的狀態
二、:active：匹配當元素被激活是的狀態（點擊時的狀態）
三、:focus：匹配元素獲取焦點時的樣式（在輸入框內顯示光標時）
五、選擇器的優先級
一、選擇器的優先級看權值
| 選擇器 | 權值 |
| 元素選擇器 | 1 |
| 僞類/類選擇器 | 10 |
| id選擇器 | 100 |
| 內聯方式 | 1000 |
二、說明：
一、複雜的選擇器，權值進行累加計算
二、當權值相同時，且屬性有相同的，則按就近原則進行選擇
一、尺寸 與 邊框
一、CSS單位
一、尺寸單位
一、px：像素
二、%： 百分比
三、in：英寸 1 in = 2.54cm，對角線
四、pt：磅 1 pt = 1/72in
ppi:Pixel Per Inch = 72(一英寸中含有72個點)
五、mm：毫米
六、cm：釐米
七、注意：在CSS中，尺寸的單位是不能省略的
二、顏色單位（取值）
一、rgb（R，G,B）
r：red（0-255）
g：green（0-255）
b：blue(0-255)
rgb（0，0,0）：黑色
二、rgba（r，g，b，alpha）
alpha：0-1的小數，0：徹底透明，1：徹底不透明
rgba（0,0,0,0.3）：黑色加0.3的透明度
三、#rrggbb
由6位16進制數字表示一種顏色
#000000：黑色
#111111：白色
四、#rgb
#rrggbb的縮寫，每兩位數字相同時，能夠採用縮寫
#000：黑色
#111：白色
二、尺寸：
一、做用：改變元素的寬度和高度
二、屬性：
一、width：改變元素的寬度
二、height：改變元素的高度
塊級元素的默認尺寸：
一、寬度：佔父元素的100%
二、高度：之內容爲準
行內元素的默認尺寸
一、寬度：之內容爲準
二、高度：之內容爲準
三、容許修改尺寸的元素：
一、全部的塊級元素均可以修改
二、全部的行內塊（表單控件）元素均可以修改
三、table（不是塊級，行內，行內快元素）容許修改尺寸
四、除img之外的行內元素們，不容許修改尺寸
四、溢出處理
一、什麼是溢出
當使用尺寸屬性限制元素的尺寸時，若是內容所須要的空間大於元素尺寸時，就會產生溢出效果
二、溢出處理屬性：
屬性：overflow
取值：
一、visible：默認值，可見的
二、hidden：隱藏
三、scroll：顯示滾動條，溢出時可用，沒溢出時不可用
四、auto：自動，溢出方向會產生滾動條，沒溢出時不顯示滾動條
三、邊框：
一、邊框的實現
一、簡寫方式
經過一個屬性設置4個方向邊框的全部效果（寬度，樣式，顏色）
屬性：border
取值：width style color
width：邊框的寬度，以px爲單位
style：邊框的樣式
solid：實線
dotted：虛線（點）
dashed：虛線（線）
color：顏色 或者 transparent（透明）
特殊用法：border：none 或者 border：0
二、單邊定義
只設定某一條邊的邊框的寬度，樣式，顏色
語法：
border-方向：width style color
方向：top，bottom，left，right
特殊用法：border-方向：none
三、單屬性定義
設置四條邊框的某一個屬性值
語法：
border-屬性：值
屬性：
border-width
border-style
border-color
四、單邊單屬性設置
設置某一方向邊框的某一屬性值
語法：
border-方向-屬性：值
方向：top/bottom/left/right
屬性：width/style/color
二、邊框的組成：
一、邊框是由四個三角形組成的（寬高都爲0的時候）,或四個梯形組成的（寬高不爲0的時候）
三、輪廓:(邊框外圍的邊框，通常表單控件都有輪廓)
outline：none；
四、邊框倒角
將邊框的四個直角變爲圓角
屬性：border-radius
取值：
一、以px爲單位的數值
二、以%爲單位的數值（通常爲50%）
五、邊框陰影
屬性：box-shadow
取值：h-shadow v-shadow blur spread color
h-shadow：以px爲單位的數值，水平偏移，取正值，陰影右偏移，負，左偏移（必須的）
v-shadow：以px爲單位的數值，垂直偏移，正，下偏，負，上偏（必須的）
bulr：以px爲單位的數值，模糊距離，數值越大，模糊效果越強烈
spread：以px爲單位的數值，陰影尺寸
color：陰影顏色
四、框模型（盒子模型）
一、什麼是框模型
一、框：Box ，頁面元素皆爲框
二、框模型：Box Modle，定義了元素的尺寸和距離的一種計算方式
一、包含：尺寸屬性，邊框屬性，外邊距屬性，內邊距屬性
二、當框模型的屬性們應用到元素中的時候，那麼元素總體所佔尺寸就會發生變化
三、元素的實際寬度=左右外邊距+左右邊框寬度+左右內邊距寬度+width
四、元素的實際高度=上下外邊距+上下邊框寬度+上下內邊距寬度+height
二、外邊距：
一、什麼是外邊距
圍繞在元素邊框/邊緣以外的空白距離就是外邊距
二、語法：
一、margin：控制四個方向的外邊距
二、margin-top：上邊距
三、margin-bottom：下邊距
四、margin-left：左邊距
五、margin-right：右邊距
三、取值：
一、以 px爲單位的數值
二、以% 爲單位的數值（佔父元素的百分比）
三、取值爲負數：移動元素時使用，(通常用在margin-top和margin-left)
一、爲元素設置上外邊距爲正數時向下移動
二、爲元素設置上外邊距爲負數時向上移動
三、爲元素設置左外邊距爲正數時向右移動
四、爲元素設置左外邊距爲負數時向左移動
四、取值爲auto：自動
一、只對左右外邊距有效，上下無效
二、只能爲設置寬度的塊級元素設置左右外邊距爲auto
三、做用：讓塊級元素是水平居中
五、margin屬性的簡潔用法：
一、margin：value
value表示上下左右四個方向的外邊距距離
二、margin：v1，v2
v1：表示上下外邊距的距離
v2：表示左右外邊距的距離
三、margin：v1,v2,v3
v1：表示上外邊距的距離
v2：表示左右外邊距距離
v3：表示下外邊距的距離
四、margin：v1,v2,v3，v4
v1：上
v2：右
v3：下
v4：左
四、頁面中具備默認外邊距的距離
一、<p></p>
二、h1~h6
三、ol，ul
四、body
會經過CSS重寫的方式，取消默認的外邊距
body,p,h1,h2,h3,h4,h5,h6,ol,ul{
margin:0;
}
三、內邊距
一、什麼是內邊距
內容與元素邊緣之間的距離，內邊距會擴大元素邊框內所佔的區域
二、語法：
一、屬性
一、padding：四個方向的內邊距
二、padding-top
三、padding-bottom
四、padding-left
五、padding-right
二、取值：
一、以px爲單位的數值
二、以%爲單位的數值
三、padding的簡潔寫法
一、padding：value：四個方向內邊距
二、padding：v1 v2：上下，左右
三、padding：v1 v2 v3：上，左右，下
四、padding：v1 v2 v3 v4：上，右，下，左
四、頁面中具備默認內邊距的元素：
一、ol，ul：左右內邊距爲40px
二、文本框，按鈕
四、box-sizing屬性：
一、做用：從新指定框模型的計算方式
二、屬性：box-sizing
三、取值：
一、content-box（默認值）
一、元素的width屬性只表示內容區域的寬度
二、元素的hegiht屬性只表示內容區域的高度
二、border-box
一、元素的width屬性包括內容區域寬度，左右內邊距和左右邊框的值
二、元素的height屬性包括內容區域高度，上下內邊距和上下邊框的值
五、背景屬性：
一、背景顏色
屬性：background-color
取值：合法的顏色值
注意：背景顏色是從border位置處開始繪製的（包括內邊距和內容）
二、背景圖像
屬性：background-image
取值：url（‘圖片路徑’）
三、背景圖片平鋪
屬性：background-repeat
取值：
一、repeat：默認值，橫向縱向都平鋪
二、no-repeat：不平鋪
三、repeat-x：只在橫向平鋪
四、repeat-y：只在縱向平鋪
四、背景圖片尺寸
屬性：background-size
取值：
一、width：寬度，以px爲單位，以%爲單位
二、height：高度，以px爲單位，以%爲單位
五、背景圖片位置
一、做用：改變背景圖片在元素中的位置
二、屬性：background-position
三、取值：
一、x y：以px爲單位的數值，用空格隔開
x：背景圖像的水平偏移位置，取值爲正，圖片右移，負，左偏移
y：背景圖像的垂直偏移位置，取值爲正，圖片下移，負，上偏移
二、x% y%：
0% 0%：在左上角
100% 100%：在右下角
50% 50%：在中間
三、關鍵字
x能夠被left/ center/ right所取代
y能夠被top/ center/ bottom所取代
六、背景屬性
屬性：background
取值：color url（） repeat position
示例：
一、background：red
二、background：rul（‘a.png’ no-repeat -30px 90%）
六、文本格式化屬性
一、字體屬性
一、指定字體
屬性：font-family
取值：使用，逗號隔開的字體值的列表
示例：font-family：‘微軟雅黑’，‘黑體‘；
說明：若是第一個字體不支持則匹配下一個字體，依次類推
二、指定文字大小
屬性font-size
取值：以px或pt爲單位的數值
三、字體加粗
屬性：font-weight
取值：
一、normal：正常體，無加粗效果
二、bold：加粗
三、value：取值爲無單位的數字（400等同於normal效果，900等同於bold效果）
四、字體的樣式：
屬性：font-style
取值：
一、normal：正常，無斜體效果
二、italic：斜體
五、小型大寫字母：
一、做用：將文本中的全部小寫字母都變爲大寫字母，可是大小和小寫字母同樣
二、屬性：font-variant
三、取值：
一、normal
二、small-caps
六、字體屬性
一、屬性：font
二、取值：style variant weight size family
三、注意：使用簡寫屬性時，必需要設置family的值，不然無效
二、文本屬性
一、文本顏色
一、屬性：color
二、取值：合法顏色值
二、文本的排列方式：控制內容的水平對齊方式(只對行內元素有效，對塊級元素無效)
一、屬性：text-align
二、取值：left/ center /right/ justify（兩端對齊，最後一行數據無效）
三、文字修飾
屬性:text-decoration
做用：指定某元素中文字的線條修飾效果
取值：
一、none：無任何線條修飾
二、underline：下劃線(<u></u>)
三、overline：上劃線
四、line-through：刪除線（<s></s>）
四、行高：
一、做用：指定一行文本數據所佔的高度是多少（不是字高）
二、特色：若是行高的高度高於文本的高度，那麼文本將在行高範圍內垂直居中顯示
三、屬性：line-height
四、取值：
一、以 px 爲單位的數字
二、無單位的數字，表示當前文本大小的倍數
五、首行文本縮進
屬性：text-indent
取值：以px爲單位的數字，表示縮進距離
六、文本的陰影
屬性:text-shadow
取值：h-shadow v-shadow bulr color
七、表格屬性
一、表格經常使用屬性
一、尺寸屬性：width，height
二、邊框屬性：border（給table元素設置border時只有table有邊框，td沒有邊框）,tr沒有border屬性
三、文本格式化屬性
一、font-*
二、text-*
四、背景屬性
五、框模型屬性
margin不能應用在td上
margin，padding不能應用在tr上
六、vertical-align
取值：top / middle / bottom
二、表格特有屬性
一、邊框合併
屬性：border-collapse
取值：
一、separate：默認值，分離邊框模式
二、collapse：邊框合併模式
二、邊框邊距：設置單元格四周的距離
屬性：border-spacing
取值：
一、指定一個值：表示水平和垂直的間距是相等的
二、指定兩個值：第一個值表示水平間距，第二個值表示垂直間距，兩個值之間用空格隔開
注意：只有在分離邊框模式（border-collapse：separate）下才有效
八、過渡效果
一、什麼是過分
使得CSS屬性值在一段時間內變化成另一個屬性值
二、過渡的語法
一、指定過渡屬性
做用：指定哪一個屬性值在變化的時候使用過渡的效果
屬性：transition-property（必須的）
取值：
一、屬性名稱
二、all（凡是能用過渡效果的屬性的值在變化時一概使用過渡效果體現）
容許使用過渡效果的屬性：
一、與顏色相關的屬性均可以使用過渡
二、取值爲數字的屬性均可以使用過渡
二、指定多度時長（必須的）
屬性：transition-duration
取值：以秒或毫秒爲單位的數字
三、指定過渡的速度時間曲線函數（指定變化速率）
屬性：transition-timing-function
取值：
一、ease：默認值，慢速度開始，快速變化，慢速結束
二、linear：勻速
三、ease-in：慢速開始，加速結束
四、ease-out：快速開始，減速結束
五、ease-in-out：慢速開始和結束，中間先加速後減速
四、指定過渡延遲
屬性：transition-delay
取值：以s或ms爲單位的數值
五、簡潔屬性：
屬性：transition
取值：property duration timing-function delay
練習：建立一個div 200*200，鼠標懸停時：一、背景顏色變爲紫色 二、由正方形變爲長方向 三、向右偏移500px，鼠標移出時，使用過渡效果顯示回來
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>過渡效果</title> <style type="text/css"> div{ width: 200px; height: 200px; border: 1px solid yellow; transition: all 5s ease 1s; } div:hover{ /*若是將transition放在此處，則只在鼠標懸停上面有效，離開時無效*/ height: 100px; background-color: purple; margin-left: 500px; } </style> </head> <body> <div></div> </body> </html>
一、定位（重點）
一、什麼是定位：表示元素在頁面中的位置
二、爲何須要定位：元素在默認位置沒法知足頁面的需求，因此須要經過定位改變元素默認的位置
三、css中定位的分類
一、普通流定位（默認定位方式）
二、浮動定位（重難點）
三、相對定位
四、絕對定位（難點）
五、固定定位
四、普通流定位
普通定位，又稱‘文檔流定位’，是頁面中全部元素的默認定位方式。典型的‘流式佈局’
特色：
一、每一個元素在頁面中都有本身的位置，並佔據必定的頁面空間
二、每一個元素都是從其父元素的左上角開始排列的
三、每一個元素基本上都是按照從上到下，從左到右的方式進行排列的
塊級元素：從上到下排列
行內元素&行內快：從左到右排列，只有一行內顯示不下的時候才換行
問題：如何可以讓多個塊級元素子在一行顯示呢？
五、浮動定位（重難點）
一、什麼是浮動&浮動的特色
一、浮動元素會被排除在文檔流以外（脫離文檔流），那麼元素將再也不佔據頁面的空間
二、未浮動的元素們會上前佔位
三、浮動元素會停靠在父元素的左邊或右邊或其餘已浮動元素的邊緣上
四、浮動只能在當前行浮動
五、浮動解決的問題（讓多個塊級元素子啊一行內排列）
二、語法：
屬性：float
取值：
一、none：默認值，無任何浮動效果
二、left：浮動到父元素的左邊，或停靠在左邊已有浮動元素的邊緣上，左浮動
三、rgiht：浮動到父元素的右邊，或停靠在右邊已有浮動元素的邊緣上，右浮動
三、浮動引起的特殊效果
一、若是父元素中顯示不下全部的已浮動元素的話，那麼最後一個將換行顯示，可是有可能被卡主
二、元素一旦浮動起來以後，將都變成塊級元素，行內元素們是能夠修改尺寸的
三、元素一旦浮動起來，在未指定寬度的狀況下，那麼寬度將由內容來決定
四、文字，圖片，行內元素是採用環繞的方式來排列的，是不能被浮動元素壓在下面的
四、清除浮動
一、浮動帶來的影響
當前元素浮動，會受到後面元素浮的位置。
若是後面的元素不想受到當前元素浮動影響的話，則能夠經過清除浮動的方式來解決問題
二、語法：
屬性：clear
取值：
一、none：默認值，即不作任何清除浮動的操做
二、left：清除前面元素左浮動帶來的影響
三、right：清除前面元素右浮動帶來的影響
四、both：清除前面元素任何一種浮動方式帶來的影響
五、浮動元素對父元素高度的影響
一、父元素的高度是以未浮動的子元素的高度爲準的，
二、若是一個父元素中全部的子元素都是浮動的，那麼他的高度會變爲0
三、解決方案：
一、爲父元素增長overflow屬性，取值爲auto或hidden
有弊端：若是有溢出要顯示的內容，也一同被隱藏了
二、在父元素的末尾處，增長一個空塊級元素，並設置其爲clear爲both
二、其餘定位方式（相對，絕對，固定）
一、相關屬性
一、定位方式
做用：改變元素默認的定位方式
屬性：position
取值：
一、static：默認值，靜態的
二、relative：相對定位
三、absolute：絕對定位
四、fixed：固定定位
注意：將元素的position設置爲relative/absolute/fixed任何一種的話，那麼該元素就稱爲‘已定位元素’
二、偏移屬性（共四個）
做用：配合已定位元素去實現位置的偏移
屬性：
top：以元素的上邊爲基準邊去移動元素
bottom：以元素的下邊爲基準去移動元素
left：以元素的左邊爲基準去移動元素
right：以元素的右邊爲基準去移動元素
取值：以px 爲單位的數值
注意：只有已定位（相對，絕對，固定）的元素才能使用偏移屬性
二、相對定位
一、什麼是相對定位
元素會相對它原來的位置偏移某個距離
二、語法
屬性：position
取值：relative
配合 偏移屬性 實現位置的移動
三、絕對定位
一、什麼是絕對位置 &特色
一、絕對定位的元素會脫離文檔流（不佔據頁面空間）
二、決定定位的元素會相對於離他 最近 的，已經定位的 祖先 元素去實現位置初始化
三、若是沒有元素離他最近，已定位的祖先元素的話，那麼元素就會相對於body去實現位置的初始化
二、語法
屬性：position
取值：absolute
配合 偏移屬性 實現位置的變化
四、堆疊順序
屬性：z-index
取值：無單位的數字，默認值爲0，數字越大越靠前
五、固定定位
一、什麼是固定定位
將元素固定在瀏覽器窗口的某個位置處，不會隨着滾動條的滾動而發生位置的改變
二、語法
屬性：position
取值：fixed
配合着 屬性屬性 實現位置的初始化
三、注意：固定定位的元素永遠都是相對於body去實現位置的初始化的
三、顯示
一、顯示方式：
一、做用：決定了元素以什麼樣的方式（塊級，行內）顯示在網頁中
二、語法：
屬性：display
取值：
一、none：讓元素不顯示（隱藏），脫離文檔流（不佔頁面空間）
二、block：讓元素顯示的和塊級元素一致
三、inline：讓元素顯示和行內元素一致
四、inline—block：讓元素顯示的和行內塊一致
特色：
一、多個元素可以在一行內顯示
二、每一個元素是容許修改尺寸的
二、顯示效果
一、visibility 屬性
做用：控制元素的可見性
取值：
一、visible：可見的，默認值
二、hidden：隱藏，該隱藏方式並未脫離文檔流，因此還佔據頁面空間
二、opacity 屬性
做用：控制元素的透明度
取值：0（徹底透明）～1（徹底不透明）之間的數字
三、vertical-align 屬性
一、用在td中，設置td內容的垂直對齊方式
二、用在圖片 和 行內快元素上
設置圖片和行內塊的文本相對於圖片和行內塊元素的垂直對齊方式
取值：
一、top
二、middle
三、bottom
四、baseline：基線對齊,默認值
三、光標
做用：指定當鼠標懸停在元素上時鼠標的表現形式（可沒必要加在hover上面）
屬性：cursor
取值：
一、default：默認
二、pointer：小手
三、crosshair：+
四、text：I
五、wait：等待
六、help：幫助
四、列表：
經常使用屬性：
list-style：none；
五、轉換：
一、什麼是轉換
改變元素在頁面中的位置，尺寸，角度的一種方式
二、屬性：
一、轉換屬性
屬性：transform
取值：
一、none：默認值，沒有任何轉換效果
二、一組轉換函數，若是是多個函數的話，中間用 空格 隔開
二、轉換原點：
屬性：transform-origin
取值：連個數字，中間用空格隔開
一、以px爲單位的數值，（以元素的左上角0 0爲準）
二、以%爲單位的數值，以元素的左上角0 0爲準）
三、關鍵字：top/ bottom /center /left /right
三、轉換效果
一、位移
做用：改變元素在頁面中的位置
屬性：transform
取值：
一、translateX（x），x表示水平位移動距離和方向，+：右移，-：左移
二、translateY（y），y表示垂直位移動距離和方向，+：下移，-：上移
三、translate（x）：等同於translateX（x）
四、translate（x，y）：同時指定x，y軸移動距離和方向
二、縮放
做用：改變元素的尺寸
屬性：transform
取值：
一、scaleX（x）：x表示橫向縮放比例，大於1放大，大於0小於1縮小，小於0的話，物極必反
二、scaleY（y）：y表示縱向縮放比例，同上
三、scale（value）：水平和垂直的縮放比例相同
三、旋轉：
做用：改變元素在頁面中的角度
屬性：transform
取值：rotate（ndeg）：n取值爲正，順時針，n取值爲負，逆時針，deg爲度數單位
注意：
一、轉換原點會影響轉換效果
二、旋轉操做會連同座標軸一塊兒跟着旋轉，他會影響旋轉以後的位移效果
圖例
<body style="background-color:011624"> <div class="legend" style="width:120px; height:170px; background-color:rgba(0,8,14,0.5); margin-top:10%; margin-left:30%"> <ul class="colors" id="legend-color" style="font:normal normal normal 16px '微軟雅黑'; color: white; line-height:29px"> <li style="list-style: url('1.png');">0~35</li> <li style="list-style: url('2.png');">35~75</li> <li style="list-style: url('3.png');">75~115</li> <li style="list-style: url('4.png');">115~150</li> <li style="list-style: url('5.png');">150~250</li> <li style="list-style: url('6.png');">250+</li> </ul> </div>
實現呼吸點效果
<!doctype html> <html> <head> <meta charset="utf-8"/> <style> .round{ width: 36px; height: 36px; margin:100px auto; position: relative; } .circle { background-color: #AC002F; width:12px; height:12px; border-radius:50%; top:12px; left: 12px; position:absolute; } .circle_bottom { background-color: #AC002F; width:24px; height:24px; border-radius:50%; filter:alpha(opacity=40); top: 6px; left: 6px; position:absolute; } .circle_bottom2 { background-color: #AC002F; width:36px; height:36px; border-radius:50%; filter:alpha(opacity=20); } .animation { ;-webkit-animation:twinkling 2.1s infinite ease-in-out; animation:twinkling 2.1s infinite ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both; } .animation2 { ;-webkit-animation:twinkling 2.1s infinite ease-in-out; animation:twinkling 2.1s infinite ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both; } @-webkit-keyframes twinkling { 0% { opacity:0.2; filter:alpha(opacity=20); -webkit-transform:scale(1); } 50% { opacity:0.5; filter:alpha(opacity=50); -webkit-transform:scale(1.12); } 100% { opacity:0.2; filter:alpha(opacity=20); -webkit-transform:scale(1); } }@keyframes twinkling { 0% { opacity:0.2; filter:alpha(opacity=20); -webkit-transform:scale(1); } 50% { opacity:0.5; filter:alpha(opacity=50); -webkit-transform:scale(1.12); } 100% { opacity:0.2; filter:alpha(opacity=20); -webkit-transform:scale(1); } } </style> </head> <body> <div class="round"> <div class="circle"></div> <div class="circle_bottom animation "></div> <div class="circle_bottom2 animation2 "></div> </div> </body> </html>
- 1. htmlCss----Day3
- 2. htmlCss----html
- 3. htmlCss----Day11
- 4. htmlCss-----Day4
- 5. htmlCSS面試題
- 6. htmlCSS-----Day14（css定位）
- 7. htmlCss----Day13（css框模式）
- 8. HTMLCSS學習之CSS基礎
- 9. [HeadFrist-HTMLCSS學習筆記]第7、八章
- 10. HTMLCSS畫三角形的三種寫法
- 更多相關文章...
-
每一个你不满意的现在，都有一个你没有努力的曾经。