python-前端-html&css
目錄:1. 計算機執行一條指令的主要步驟 2.前端基礎 3.html 4.cssjavascript
計算機執行一條指令的主要步驟css
1.取值fetchhtml
2.譯碼decode前端
3.執行executejava
4.回寫write-backcss3
第一步：web
1.控制器將指令的地址送往存儲器瀏覽器
2.存儲器按給定的地址讀出指令內容，送回控制器安全
第二步：服務器
1.控制器分析指令的操做性質
2.控制器向有關部件發送指令所需的控制信號
第三步：
執行
第四步：
將運算結果寫入通用寄存器或存儲器
前端基礎
靜態頁面：不能與用戶進行交互，只能瀏覽網頁的文字與圖片 flash+fireworks+dreamweaver三劍客
網頁主要由三部分組成：結構、表現和行爲
網頁如今新的標準是W3C，目前的模式是HTML、CSS和JavaScript
HTMl；超文本標記語言，是網頁的結構
CSS；層疊樣式表，是網頁的外觀
JavaScript；一門腳本語言，是頁面的行爲
HTMl:超文本標記語言
是一種用於建立網頁的標記語言
文件後綴通常使用.html或.htm，這兩種後綴沒有區別，互換也沒有影響，就用html就行了
HTML做爲一門標記語言，就是經過各類各樣的標籤來標記網頁內容的，學習HTML就是學習HTML的標籤
標籤使用英文的尖括號<>包起來
雙閉合<html></html>
單閉合<meta><img>
標籤一般是成對出現的，分爲開始標籤和結束標籤，結束標籤比開始標籤多一個 / 即<head>...</head>
標籤之間是能夠嵌套的，但不是全部的標籤都支持嵌套
HTML標籤不區分大小寫，可是一般建議使用小寫
一個HTML文件實例
<!DOCTYPE HTML> 文檔聲明，必須寫在HTML文檔的第一行，位於<html>標籤以前，代表該文檔是HTML5文檔
<html> 根節點，根標籤，全部的網頁標籤都在<html></html>中
<head> 子節點，用於定義文檔的頭部，它是全部頭部元素的容器
頭部信息相關內容
</head>
<body> 子節點，內部是網頁的主要內容，最終會在瀏覽器中顯示出來
頁面主題相關內容
</body>
</html>
常見的頭部元素：<title> <script> <style> <link> <meta>等標籤
網頁內容標籤：<h1> <p> <a> <img>等
HTML中的註釋：<!--這裏是註釋的內容-->
註釋中能夠直接使用回車換行，而且咱們習慣用註釋的標籤把HTML代碼包裹起來，如：
<!--xx部分開始-->
html代碼
<!--xx部分結束-->
HTML註釋不支持嵌套
HTML註釋不能寫在HTML標籤中
<head>標籤
文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題、編碼方式和url信息，主要用於提供索引
<head lang='en'>
<title>標題信息</title>
<meta charset='utf-8'>
<link>
<style type='text/css'></style>
<script type='text/javascript'></script>
</head>
title標籤
<title></title>標籤之間的文字內容是網頁的標題信息，它會顯示在瀏覽器標籤頁的標題欄中
meta標籤
提供有關頁面的原信息，針對搜索引擎和更新頻度的描述和關鍵詞，用戶不可見
標籤位於文檔的頭部，不包含任何內容
meta標籤共有兩個屬性：http-equiv屬性和name屬性
http-equiv屬性：用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確的顯示網頁內容
與之對應的屬性值是content，content中的內容實際上是各個參數的變量值
<!--重定向 2秒後跳轉到對應的網址，注意分號-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文檔的內容類型和編碼類型--> 下面這句代碼必定要寫
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE瀏覽器以最高級模式渲染當前網頁--> 下面這句代碼最好也要寫
<meta http-equiv="x-ua-compatible" content="IE=edge">
name屬性 這裏的東西能夠先不寫，可是工做的時候必定要寫
主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字能夠有多個，用,逗號隔開
與之對應的屬性值爲content，content中的內容主要是便於搜索引擎查找信息和分類信息
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="路飛學城">
其餘標籤：
<!--icon圖標(網站的圖標)-->
<link rel="icon" href="fav.ico">
<!--定義內部樣式表>
<style type="text/css"></style>
<!--引入外部樣式表文件-->
<link rel="stylesheet" href="mystyle.css">
<!--定義JavaScript代碼或引入JavaScript文件-->
<script src="myscript.js"></script>
<body>標籤
想要在網頁上展現的內容放在body標籤內
標題標籤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>
<h1><h2>寫在了同一行，可是在瀏覽器上顯示的時候會換行，由於標題標籤是塊級元素，獨佔一行
文本樣式標籤主要用來對HTML頁面中的文本進行修飾，好比加粗、斜體、線條樣式等
<b></b> 加粗
<i></i> 斜體
<u></u> 下劃線
<s></s> 刪除線
<sup></sup> 上標
<sub></sub> 下標
<em> 強調，在瀏覽器中默認用斜體顯示
<strong> 更強烈的強調，在瀏覽器中會用粗體顯示，更推薦用這個
段落標籤p
<p>定義段落，paragraph的簡寫
<body>
<p>路飛學城立志幫助有志向的年輕人經過努力學習得到體面的工做和生活</p>
<p>路飛學城立志幫助有志向的年輕人經過努力學習得到體面的工做和生活</p>
</body>
瀏覽器展現特色：
1.跟普通文本同樣，但咱們能夠經過css來設置當前段落的樣式
2.是否又獨佔一行？是的 塊級元素
超連接標籤a
<a>表明一個連接點，anchor的簡寫，做用是把當前位置的文本或圖片鏈接到其餘的頁面、文本或圖像
行內標籤，設置高度寬度不起做用
a 標籤的顏色不繼承父元素的color，要單獨設置
實例：
<body>
<h1>
<!--a連接 超連接
target:_blank 在新的網站打開連接的資源地址
_self 在當前網站打開連接的資源地址，這個是默認值
title:鼠標懸停時顯示的標題
-->
<a href="http://www.baidu.com" target="_blank" title="路飛學城">路飛學城</a> 經常使用
<a href="a.zip">下載包</a> # 下載資源
<a href="mailto:zhaoxu@tedu.cn">聯繫咱們</a> # 電子郵件連接
<!--返回頁面頂部的內容-->
<a href="#">跳轉到頂部</a> # 返回頁面頂部的空連接
<!--返回某id-->
<a href="#p1">跳轉到p1</a> # 返回具體id值的標籤
<!--javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼，
而javascript:;表示什麼都不執行，這樣點擊<a>時就沒有任何反應，意味着把a標籤的默認動做取消了-->
<a href="javascript:alert(1)">內容</a>
<a href="javascript:;">內容</a>
</h1>
</body>
連接的其餘形式：
1.目標文檔爲下載資源
2.電子郵件連接，前提是計算機中必須安裝郵件客戶端，並配置好了郵件相關信息
3.返回頁面頂部的空連接或具體id值的標籤
4.javascript: 是表示在觸發<a>默認動做時，執行一段JavaScript代碼
5.javascript:; 表示什麼都不執行，這樣點擊<a>就沒有任何反應
列表標籤 ul ol
塊級標籤
一般跟<li>標籤一塊兒用，每條<li>表示列表的內容
<ul> unordered lists的縮寫，無序列表
<ol> ordered lists的縮寫，有序列表
實例：
<!--無序列表 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>
type:列表標識的類型
1：數字，默認值
a:小寫字母
A:大寫字母
i:小寫羅馬字符
I:大寫羅馬字符
列表標識的起始編號默認爲1
ul標籤的屬性：
disc：實心圓(默認值)
circle：空心圓
square：實心矩形
none：不顯示標識
ul ol {list-sytle:none}
取消列表的默認樣式
盒子標籤div
<div>可定義文檔的分區，division的縮寫
實例：
<div id='wrap'>
<div class='para'></div>
<div class='anchor'></div>
<div class='para'></div>
<div class='lists'></div>
</div>
上例中包含四塊區域，四個div塊，在瀏覽器中，每一個小區域都獨佔一行
div是塊級元素，每塊區域表示獨立的一塊，id與class屬性很簡單，能夠當作給這個區域起個名字
id是惟一的，一個頁面中不能有兩個重複的id，class能夠設置一樣的值，也能夠設置多個
圖片標籤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.span標籤能夠單獨摘出某塊內容，結合css設置相應的樣式
練習：將img標籤內的圖片獨佔一行展現，並設置相應標題，在圖片下方，描述該圖片內容的信息
其餘標籤：
換行標籤<br>
用來將內容換行，其在HTML網頁上的效果至關於咱們平時使用word編輯文檔時使用回車換行
分割線<hr>
用來在HTML網頁中建立水平分割線，一般用來分割內容
特殊符號
瀏覽器在顯示的時候會移除源代碼中多餘的空格和空行，連續的空格或空行都會被算做一個空格
須要注意的是，HTML代碼中全部連續的空行(換行)也會被顯示爲一個空格
因此HTML代碼對縮進的要求並不嚴格，使用縮進是爲了讓咱們的代碼結構更清晰
經常使用的特殊字符：
空格
> >
< <
& &
￥ ¥
版權 ©
註冊 ®
表格標籤table
表格由<table>標籤來定義，每一個表格均有若干行(由<tr>標籤來定義)，
每行被分割爲若干單元格(由<td>標籤來定義)，td即table data表格數據，即數據單元格的內容
數據單元格的內容能夠包含文本、圖片、列表、段落、表單、水平線、表格等
table表格 thead表格頭 tbody表格主體 tr表格行 th表格頭裏的單元格(默認加粗且居中)
td表格主體裏的單元格 tfoot表格底部
實例：
<div class="table">
<table>
<!--表格頭-->
<thead>
<!--表格行-->
<tr>
<!--表格列，這裏使用的是th-->
<th></th>
</tr>
</thead>
<!--表格主體-->
<tbody>
<!--表格行-->
<tr>
<!--表格列，這裏使用的是td-->
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
<!--表格底部-->
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
</div>
表格行和列的合併
rowspan合併行，豎着合併
colspan合併列，橫着合併
實例：
<body>
<div class="table">
<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-->
<td rowspan="3">上午</td>
<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>
</tbody>
<!--表格底部-->
<tfoot>
<tr>
<td colspan="6">課程表</td>
</tr>
</tfoot>
</table>
</div>
</body>
表單標籤form 使用很是頻繁
表單是一個包含表單元素的區域,用於顯示、收集信息，並提交給服務器
表單元素是容許用戶在表單中輸入內容，好比：文本域(textarea)、輸入框(input)、單選框()
塊級元素
1.屬性
action 定義表單被提交時發生的動做，提交給服務器處理程序的地址
若是什麼都不寫，那就默認使用當前form表單所在的地址
method 定義表單提交數據時的方式
取值：
get 默認值，明文提交，所提交的數據能夠顯示在地址上，安全性低，有大小限制，最大2KB
post 隱式提交，所提交的內容不會顯示在地址欄上，安全性高，無大小限制
enctype 編碼類型，即表單數據進行編碼的方式，容許表單將什麼樣的數據提交給服務器
取值：
application/x-www-from-urlencoded 默認值，容許將普通字符、特殊字符都提交給服務器，不容許提交文件
multipart/from-data 容許將文件提交給服務器
text/plain 只容許提交普通字符，特殊字符和文件等都沒法提交
注：若是有文件須要提交給服務器，method必須用post，enctype必須用multipart/from-data
2.表單控件分類
textarea文本域
做用：容許用戶錄入多行數據到表單控件中
屬性：
cols 指定文本區域的列數，變相設置當前元素寬度
rows 指定文本區域的行數，變相設置當前元素高度
select和option選項框
select屬性：
size 取值大於1的話，則爲滾動列表，不然就是下拉選項框
multiple 設置多選，該屬性出如今<select>中，那麼就容許多選(針對滾動列表)
option屬性
value 選項的值
selected 預選中，注意：若是不設置selected屬性的話，默認選項框中的第一項被選中
input組元素 行內塊元素
type
button 普通按鈕，與form表單沒有任何關係
text 明文顯示用戶輸入的數據 <input type="text">
password 密文顯示用戶輸入的數據 <input type="password">
radio 單選按鈕 checkbox複選框 checked設置值後被選中
submit 功能固定化，負責將表中的表單控件提交給服務端 <input type="submit"> 提交功能
file 上傳文件所用 <input type="file">
reset 重置
value 控件的值，即要提交給服務的數據
name 控件的名稱，服務端用
disabled 該屬性只要出如今標籤中，表示的是禁用該控件
lable
功能：關聯文本域表達元素的，點擊文本時，如同點擊表元素同樣 行內元素
for屬性 表示與該lable相關聯的表單控件元素的id值
input {outline:none;} /*清除輸入框的外部樣式*/
實例：
<form action="http://www.baidu.com" method="get">
<!-- input -->
<!--文本框-->
<p>
用戶名稱：
<input type="text" name="txtUsename" value="請輸入用戶名稱" readonly>
</p> placeholder="請輸入用戶名" 能夠放這個，就是起提示做用的
<p>
用戶密碼：
<input type="password" name="txtUsepwd">
</p>
<p>
確認密碼：
<input type="password" name="txtcfmpwd" disabled>
</p>
<!--單選框-->
<p>
用戶性別：若是想產生互斥的效果，name值要相同
<input type="radio" name="sexrdo" value="男">男
<input type="radio" name="sexrdo" value="女" checked=''>女
</p>
<!--複選框-->
<p>
用戶愛好：吃
<input type="checkbox" name="chkhobby" value="吃" checked> 喝
<input type="checkbox" name="chkhobby" value="喝"> 玩
<input type="checkbox" name="chkhobox" value="玩"> 樂
<input type="checkbox" name="chkhobox" value="樂" checked>
</p>
<!-- 按鈕 -->
<p>
<input type="submit" name="btnsbt" value="提交">
<input type="reset" name="btnrst" value="重置">
<input type="button" name="btnbtn" value="普通按鈕">
</p>
<!--文件選擇框-->
<p>
請上傳文件：
<input type="file" name="txtfile">
</p>
<!--textarea-->
<p>
自我介紹：
<textarea name="txt" cols="20" rows="5"></textarea>
</p>
<!--選擇框-->
<!--滾動列表 multiple設置之後實現多選效果，ctrl+鼠標左鍵進行多選-->
<p>籍貫：
<select name="sel" size="3" multiple="">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州" selected>廣州</option>
</select>
</p>
<!--下拉列表-->
<p>意向工做城市：
<select name="sel">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州" selected>廣州</option>
</select>
</p>
</form>
HTML標籤屬性
HTML標籤能夠設置屬性，屬性通常以鍵值對的方式寫在開始標籤中
實例：
<div id="i1">這是一個div標籤</div>
<p class='p1 p2 p3'>這是一個段落標籤</p>
<a href="http://www.luffycity.com">這是一個連接</a>
<input type='button' onclick='addclick()'></input>
咱們這些標籤會經過css美化，經過javascript來操做，因此能夠把標籤看作一個對象，那麼對象就有本身的屬性與方法
屬性：type='button' 方法：onclick='addclick()'
注意事項：
1.HTML標籤除了一些特定屬性外能夠設置自定義屬性，一個標籤能夠設置多個屬性用空格分隔，多個屬性不區分前後順序
2.屬性值要用引號包裹起來，一般使用雙引號，也能夠用單引號
3.屬性與屬性值不區分大小寫，可是推薦小寫
HTML標籤分類
標籤元素三種不一樣類型：塊狀元素、行內元素、行內塊狀元素
塊狀元素：display:block
1.每一個塊級元素都重新的一行開始，而且其後的元素也另起一行，獨佔一行
2.元素的高度、寬度、行高以及頂和底邊距均可設置
3.元素寬度在不設置的狀況下，是它自己父容器的100%(和父元素的寬度一致)除非設定一個寬度
若是不設置寬度那就是瀏覽器的寬度
經常使用塊狀元素：<div> <p> <h1>~<h6> <ol> <ul> <table> <form> <li>
行內元素：display:inline
1.和其餘元素都在一行上，在一行內展現
2.元素的高度、寬度及頂部和底部邊距不可設置
3.元素的寬度就是它包含的文字或圖片的寬度，不可改變
經常使用行內元素：<a> <span> <br> <i> <em> <strong> <label>
行內塊級元素：display:inline-block
1.和其餘元素都在一行上，在一行內展現
2.元素的高度、寬度、行高以及頂和底邊距均可設置
經常使用行內塊狀元素：<img> <input><textarea><select>,可是select裏面的option是block
標籤嵌套規則
塊元素能夠包含內聯元素或某些塊元素，但內聯元素不能包含塊元素，只能包含其餘的內聯元素
塊元素不能放在p標籤裏面 p標籤不能包含div，能夠包含列表標籤
有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊標籤是：
h1~h6, p
li元素能夠嵌入ul,ol,div等標籤
CSS
使用css的目的就是讓網頁具備美觀一致的界面，而且使內容與格式分離
css的出現解決了兩個問題：
1.將HTML頁面的內容與樣式分離
2.提升web開發的工做效率
css是指層疊樣式表(cascading style sheets)，樣式定義如何顯示HTML元素，樣式一般又會存在於樣式表中
css的優點：
1.內容與表現分離
2.網頁的表現統一，容易修改
3.豐富的樣式，使頁面佈局更加靈活
4.減小網頁的代碼量，增長網頁瀏覽器速度，節省網絡帶寬
5.運用獨立頁面的css，有利於網頁被搜索引擎收錄
如何使用css？
把樣式規則的內容保存在css文件中，此時該css文件被稱爲外部樣式表，而後在HTML文件中經過link標籤
引用該css文件，這樣瀏覽器在解析到該link標籤時就會加載該css文件，並按照該文件中的樣式規則渲染
css基礎語法：
1.選擇器
2.聲明，由屬性和值組成，多個聲明之間用分號分隔
僞代碼： 實例：
選擇器{聲明1; h1{
聲明2; font-size:12px;
聲明3; color:#F00;
...... }
}
css註釋：/*這是註釋*/
網頁中引用css樣式
1.內聯樣式
又稱爲內嵌方式
<style>標籤
實例：
<!doctype html>
<html>
<head>
<meta charset="utf8">
<style type="text/css">
p{
color:red;
}
</style>
</head>
<body>
<p>這是一個標籤</p>
</body>
</html>
2.行內樣式表
實例：
<!doctype html>
<html>
<head>
<mate charset="utf8">
</head>
<body>
<p style="color:blue;">這是一個標籤</p>
</body>
</html>
3.外部樣式表
3.1連接式 建議用這種
index.css
p{
color:green;
}
經過link標籤引入
<!doctype html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>這是一個標籤</p>
</body>
</html>
3.2導入式 (瞭解)
@import url(other.css) # 必須寫在文件最開始的位置
連接式與導入式的區別
1.link標籤屬於XHTML，@import是屬性css2.1
2.使用link連接的css文件先加載到網頁當中，再進行編譯顯示
3.使用@import導入css文件，客戶端顯示html結構，再把css文件加載到網頁當中
4.@import屬於css2.1特有，不兼容css2.1的瀏覽器是無效的
選擇器
選擇器就是用來從HTML頁面中查找特定元素的，找到元素以後就能夠爲它們設置樣式了
選擇器爲樣式規則指定一個做用範圍
1.基礎選擇器：
標籤選擇器
類選擇器
ID選擇器
通用選擇器
標籤選擇器
經過標籤名來選擇元素，能夠選中全部的標籤
無論標籤藏得多深，都能選中，選中全部指定標籤
能夠用來設置共性元素
實例：
p{
color:red;
}
將全部的p標籤設置字體顏色爲紅色
類選擇器 css裏面儘量多用這個
經過樣式類選擇元素
所謂類就是class，class與id很類似，任何標籤均可以加類，可是類能夠重複
同一個標籤能夠有多個類，多個類的時候，後面類的效果會把前面的覆蓋掉，只覆蓋相同的部分
div>p*3而後tab鍵一下出來三個<p>
必定要有公共類的概念
1.不要試圖用一個類將頁面寫完，一個標籤應該用多個類來設置屬性
2.每一個類要儘量的小，有公共的概念，可以讓更多的標籤去使用
實例：
.c1{
color:red;
}
將全部樣式類含.c1的元素設置字體顏色爲紅色
ID選擇器 通常用在js裏面
經過元素的ID選擇元素，注意id的惟一性，同一個頁面中id不能重複
任何的標籤均可以設置id，id的命名要規範，區分大小寫，不過id仍是儘可能少寫
實例：
#i1{
color:red;
}
將id值爲i1的元素字體顏色設置爲紅色
通用選擇器
使用*選擇全部元素，性能有點差
實例：
*{
color:black;
}
2.高級選擇器：
並集選擇器，多個選擇器經過逗號鏈接而成，同時聲明多個風格相一樣式，設置多個標籤的統同樣式
交集選擇器，由兩個選擇器鏈接構成，選中兩者範圍的交集，兩個選擇器之間不能有空格
第一個必須是標籤選擇器，第二個必須是類選擇器或ID選擇器
後代選擇器，外層的選擇器寫在前面，內層的選擇器寫在後面，之間用空格分隔
標籤嵌套時，內層的標籤成爲外層標籤的後代
子元素選擇器，經過>鏈接在一塊兒而成，僅做用於子元素
屬性選擇器，選取帶有指定屬性的元素，或選取帶有指定屬性和值的元素
後代選擇器實例：
由於HTML元素能夠嵌套，因此咱們能夠從某個元素的後代查找特定元素，並設置樣式
div p{
color:red;
}
從div的全部後代中找p標籤，設置字體顏色爲紅色
兒子選擇器實例：子元素選擇器
div>p{
color:red;
}
從div的直接子元素中找到p標籤，設置字體顏色爲紅色
毗鄰選擇器實例：
div+p{
color:red;
}
找到全部緊挨在div後面的第一個p標籤，設置字體顏色爲紅色
弟弟選擇器實例：
div~p{
color:red;
}
找到全部div標籤後面同級的p標籤，設置字體顏色爲紅色
屬性選擇器
css3版本中有的
除了HTML元素的id屬性和class屬性外，還能夠根據HTML元素的特定屬性選擇元素
在表單控件中使用比較頻繁
1.根據屬性查找
[title] {
color:red;
}
2.根據屬性和值查找
找到全部title屬性等於hello的元素
[title="hello"] {
color:red;
}
找到全部title屬性以hello開頭的元素
[title^="hello"] {
color:red;
}
找到全部title屬性以hello結尾的元素
[title$="hello"] {
color:red;
}
找到全部title屬性中包含(字符串包含)hello的元素
[title*="hello"] {
color:red;
}
找到全部title屬性(有多個值或值以空格分割)中有一個值爲hello的元素
[title~="hello"] {
color:red;
}
3.表單經常使用 經常使用
input[type="text"] {
backgroundcolor:red;
}
3.分組選擇器
當多個元素的樣式相同的時候，咱們不必重複地爲每一個元素都設置樣式，
能夠經過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式
實例：
div,
p {
color:red;
}
爲div標籤和p標籤統一設置字體爲紅色的樣式，一般分兩行寫，更清晰
4.僞類選擇器 也是css3版本中有的
這四個要按順序寫，必定不能亂
4.1沒有訪問的超連接a標籤樣式
a:link {
color:blue;
}
4.2訪問過的超連接a標籤樣式
a:visited {
color:gray;
}
4.3鼠標懸浮在元素上時該標籤的應用樣式
a:hover {
background-color:#eee;
}
4.4鼠標點擊瞬間該標籤的樣式
a:active {
color:green;
}
4.5input輸入框獲取焦點時樣式
input:focus {
outline:none;
background-color:#eee;
}
4.6
/*選中第一個元素*/
div ul li:first-child{
font-size: 30px;
}
/*選中最後一個元素*/
div ul li:last-child{
font-size: 30px;
}
/*選中當前指定的元素，nth-child()元素寫在括號裏面，數值從1開始
n表示選中全部，0表示沒有選中
2n表示選中偶數2 4 6 2n-1表示選中奇數1 3 5 7
3n+1表示隔2行換一行，就是間隔兩行起做用一次
*/
div ul li:nth-child(3n+1){
font-size: 35px;
}
5.僞元素
first-letter 不經常使用
用於爲文本的首字母設置特殊樣式
p:first-letter {
font-size:48px;
}
before 不經常使用
用於在元素的內容前面插入新內容
必定要有content
p:before {
content:"*";
color:red;
}
在全部p標籤的內容前面加上一個紅色的*
after 常常用
用於在元素的內容後面插入新內容
必定要有content
與佈局有關(清除浮動)
p:after {
content:"?";
color:red;
}
在全部p標籤的內容後面加上一個藍色的?
6.選擇器的優先級
內聯樣式的權重爲1000
id選擇器的權重爲100
類選擇器的權重爲10
元素選擇器的權重爲1
權重計算永不進位
字體相關css屬性介紹
font-family
字體系列
font-family能夠把多個字體名稱做爲一個"回退"系統來保存，若是瀏覽器不支持第一個字體，則會嘗試下一個
瀏覽器會使用它可識別的第一個值，若是寫的都沒有那就找宋體
頁面中中文咱們只是用微軟雅黑 宋體(Simsun) 黑體，用逗號隔開
英文通常用Arial
實例：
body {
font-family:"Microsoft Yahei","微軟雅黑","Arial",sans-serif
}
若是設置成inherit，則表示繼承父元素的字體
簡寫：font:12px/30px 12px是字體大小，30px是行高
font-weight
字重(字體粗細)
normal 默認值，標準粗細
bold 粗體
bolder 更粗
lighter 更細
100~900 設置具體粗細，400等同於normal，而700等同於bord
inherit 繼承父元素字體的粗細值
font-size
字體大小
p {
font-size:14px;
}
若是設置成inherit表示繼承父元素的字體大小值
color
字體顏色
支持三種：
十六進制值，如#FF0000紅色 000000黑色fff白色f00紅色333灰色222深灰ccc淺灰
一個RGB值，如RGB(255,0,0) 還能夠寫rgba(255,0,0,0.8)最後這個a是透明度，從0到1
顏色的名稱，如red
p {
color:red;
}
text-align
文本對齊
規定元素中的文本的水平對齊方式
left 左邊對齊，默認值
right 右對齊
center 居中對齊
justify 兩端對齊
text-indent
文本縮進，單位用em，1em就是一個字的大小，em這個單位跟字體有關
line-height
行高，必定要大於文字大小，在處理垂直居中的時候要注意盒子高度 行高 字體大小 padding等
單行文本 文字在行高的高度範圍內是自動垂直居中的
若是設置行高等於盒子的高度，文本就垂直居中了，再加上text-align:center那就水平垂直都居中了
若是盒子不設置行高，設置行高的話就會自動垂直居中了，行高把盒子高度撐起來
多行文本的垂直居中用padding來處理，盒子的高度加上padding設定的值纔是最終的盒子的高度
text-decoration
文字裝飾
none 默認值，定義標準的文本，能夠用來去除a標籤自帶的下劃線
underline 定義文本下的一條線 能夠加顏色
overline 定義文本上的一條線
line-through 定義穿過文本下的的一條線
inherit 繼承父元素的text-decoration屬性的值
cursor:pointer 加了這個，鼠標移動上去的時候會變成小手的樣子
背景屬性
background-color 規定要使用的背景顏色
background-image 規定要使用的背景圖像
background-size 規定背景圖片的尺寸
background-repeat 規定如何重複背景圖像
background-attachment 規定背景圖像是否固定或者隨着頁面的其他部分滾動
background-position 規定背景圖像的位置
inherit 規定應該從父元素繼承background屬性的設置
能夠設置給body
body {
.....
}
background-repeat取值範圍
repeat 默認值，背景圖像將在垂直方向和水平方向重複
repeat-x 背景圖像將在水平方向重複
repeat-y 背景圖像將在垂直方向重複
no-repeat 背景圖像將僅顯示一次
inherit 規定應該從父元素繼承background-repeat屬性的設置
background-attachment取值範圍
scroll 默認值，背景圖像會隨着頁面其他部分的滾動而移動
fixed 當頁面的其他部分滾動時，背景圖像不會移動
inherit 規定應該從父元素繼承background-attachment屬性的設置
background-position取值範圍
用來定位切圖 精靈圖也叫雪碧圖 盒子高度設置成一個圖片或圖標的高度而後position調整位置去切出來想要的那個元素
能夠寫數字 單位是像素 能夠寫負值
1. top left/top center/top right
center left/center center/center right
bottom right/bottom center/bottom right
上面這些若是隻設置一個關鍵詞，那麼第二個值就是center，默認爲0% 0%
2. x% y% 第一個值是水平位置，第二個值是垂直位置
左上角是0% 0%，右下角是100% 100%，若是隻設置一個值，另外一個值就是50%
3. xpos ypos 第一個值是水平位置，第二個值是垂直位置
左上角是0 0，單位是像素(0px 0px)或任何其餘css單位
若是隻設置了一個值，另外一值就是50%,能夠混合使用%和position值
實例：
body {
background-color:red;
background-image:url(xx.png)
background-size:300px 300px;
background-repeat:no-repeat;
background-position:cneter
}
簡寫：
body {
background:red url(xx.png) no-repeat fixed center/300px 300px;
} 順序是固定的
css盒子模型
HTML文檔中的每一個元素都被描述成矩形盒子，這些矩形盒子經過一個模型來描述其佔用空間，這個模型稱爲盒子模型
盒子模型就是在網頁中顯示的一些方方正正的盒子
盒子模型經過四個邊界來描述：margin(外邊距) border(邊框) padding(內填充) content(內容區域)(width height)
border邊框，經常使用值：
none 無邊框，用這個就能夠設置沒有border了,0也能夠
dotted 點狀虛線邊框
dashed 矩形虛線邊框
solid 實線邊框
double 雙線
border-radius:5px;/*設置圓角*/ 3px 5px都行
三要素：粗細(border-width)、顏色(border-color)、線形(border-style)
若是不寫顏色，默認是黑色
若是不寫粗細，默認不顯示
只寫線性樣式，默認的有上下左右3px的寬度，solid類型 黑色
實例：
div.box {
display:inline-block;
width:200px; 指的是內容的寬度，而不是整個盒子的真實寬度，高度也同樣
height:200px;
background-color:red;
padding:5px 10px 15px 20px;
border:5px solid blue;
margin:5px 10px;
}
border會改變元素的實際大小，背景色會渲染到border區域
padding內邊距
控制內容到邊框的距離，不支持負值
padding的區域是有背景顏色的，而且背景顏色和內容區域的顏色同樣，也就是說background-color這個屬性將會填充全部的border之內的區域
1.只寫一個padding表明4個方向，也能夠單獨指定某一個方向
2.元素設置了padding值是額外加在原來大小之上的width+padding，若是不想改變實際大小，那就在width-padding對應方向的值
3.padding是添加給父級的，改變的是父級包含的內容的位置，自身位置不變，要善用父元素的padding，少用margin
4.簡寫方法：用空格隔開
4.1一個值：4個方向
4.2兩個值：上下 左右
4.3三個值：上 左右 下
4.4四個值：上 右 下 左(順時針方向)
pycharm裏day45_css的12裏面有關於清除某些標籤的默認padding
margin外邊距
控制元素與元素之間的距離
1.margin有四個方向，能夠本身設置上下左右的寬度
2.margin會改變實際大小，背景色不會渲染到margin區域，這個區域會以空白顯示，但也是盒子的一部分
3.margin是添自身的，若是哪一個想要改變本身的位置，就給誰添加margin
html的部分標籤自帶margin padding p body ul
margin的塌陷問題：
當給兩個兄弟盒子設置垂直方向上的margin時，那麼以較大的那個爲準，這就是塌陷
這種狀況只出如今不浮動的時候，而浮動的盒子不塌陷
margin:0 auto；水平居中盒子 盒子的寬度必定要設置，而且是適用於標準流下的盒子
文字居中 text-align:center
display 重要
1.控制HTML元素的顯示和隱藏
2.塊級元素與行內元素的轉換
block(塊級)
默認佔滿整個頁面寬度，若是設置了指定寬度，則會用margin填充剩下的部分
inline(行內)
行內元素
只要設置了display:inline，那麼元素的width、height、margin-top、margin-bottom和float屬性都不會有什麼影響
inline-block(行內塊級)
行內塊級元素
同時具有行內元素和塊級元素的特色
none
HTML文檔中元素存在，可是在瀏覽器中不顯示，通常用於配合JavaScript代碼使用
用於隱藏，而且不佔位置
若是用visibility:hidden;也是隱藏，可是會佔位置，只是在頁面中不顯示內容，顯示空白的位置
父元素設置display:table使它成爲一個塊級表格元素
子元素設置display:table-cell使子元素成爲表格單元格，就比如是在表格中同樣
float 重要
block元素一般被顯示爲獨立的一塊，獨佔一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度
block元素能夠設置width、height、margin、padding屬性
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行
其寬度隨元素的內容而變化，設置width、height屬性無效
常見的塊級元素有div/form/table/p/pre/h1~h5/dl/ol/ul等
常見的內聯元素有span/a/strong/em/label/input/select/textara/img/br等
浮動的四個特性：
1.浮動的元素脫標
2.浮動的元素互相貼靠
若是父元素有足夠的空間，那麼3緊靠2,2緊靠1,1靠邊
若是沒有足夠的空間，那麼3靠着1，若是沒有足夠的空間靠着1，那麼3就本身往邊靠
3.浮動的元素有「字圍」效果
所謂字圍效果：當div浮動，而p不浮動，div擋住了p，div的層級提升，可是p中的文字不會被遮蓋，此時就造成了字圍效果
關於浮動，咱們初期要遵循一個原則：永遠不要是一個盒子單獨在浮動，要浮動就要一塊兒浮動
4.緊湊的效果
就是一個浮動元素，若是不設置寬度，那麼就自動收縮爲文字的寬度，這點跟行內元素很像
若是想製做整個網頁，就是經過浮動來實現並排
子元素浮動，父盒子通常不設置高度，只有寬度沒有高度的話設置背景顏色也就沒有用了
所謂的標準文檔流，指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列
1.浮動會使元素脫離標準文檔流，即脫標，脫標後盒子定位的時候，會把脫標的文檔當作不存在，而進行定位
而且浮動的元素不須要再轉成塊級元素也可以設置寬高，可以並排，不區分行內仍是塊狀元素
2.浮動會使元素提高層級
3.浮動可使元素在一行排列，不設置寬高的時候，可使元素適應內容
4.浮動可使行內元素支持寬高
脫離文檔流，也就是將元素從普通的佈局排版中拿走，其餘盒子在定位的時候，會當作脫離文檔流的元素不存在而進行定位
若是某個div元素A是浮動的，A的頂部老是和上一個元素的底部對齊的
而浮動的框以後的block元素會認爲這個框不存在，但其中的文本依然會爲這個元素讓出位置
浮動的框以後的inline元素，會爲這個框空出位置，而後按順序排列
float屬性值
1.left左浮動 左側爲起始，從左向右排列
2.right右浮動 右側爲起始，從右向左排列
3.none不浮動，默認不浮動
浮動產生的影響
浮動可使元素按指定方向排列，直到遇到父元素的邊界或另外一個浮動元素中止
浮動產生的問題
父元素不設置高度，子元素設置浮動後，不會撐開父元素的高度，那麼此時父盒子沒有高度了
若是在次父盒子下面還有一個標準流的盒子，那麼就會影響頁面的佈局
清除浮動：有一個目的是爲了把父盒子撐起來？
1.給父元素固定高度，不靈活
2.在浮動元素最後加一個空的塊元素div，且該塊元素不浮動，設置其屬性爲clear:both 結構冗餘，內牆法
3.經常使用方法: 僞元素清除法
.wrap:after{
clear:both; 必寫
content:""; 必寫，能夠不寫內容是空的，也能夠在「」裏面放一個點.
height:0; 而後把height設爲0，就不佔位置
visibility:hidden; 設置隱藏
display:block; 必寫
}
4.給父盒子 添加overflow:hidden屬性 該方法簡單經常使用
position定位 重要
設置定位後，top/left/right/bottom屬性值可使用，就能夠直接接着position下一行寫 top:20px
1.relative 相對定位：相對於自身原來位置定位，僅僅是微調元素的位置
若是對當前元素僅僅設置相對定位，那麼與標準流下的盒子沒有區別
影響：
1.沒有偏移量的時候對元素自己基本沒有影響
2.提高層級，可是不要使用相對定位來作遮蓋效果
三大特性：1.不脫標 2.形影分離 3.老家留坑
兩個做用：1.微調元素位置 2.作絕對定位的參考
2.absolute 絕對定位
絕對定位的子盒子無視父輩盒子的padding
絕對定位下的子盒子居中
position:absolute;
left:50%
margin-left:這裏寫寬度的一半的負值
這三行當作公式記下來
沒有定位父級，設置top值，相對於頁面的左上角定位，設置bottom值，相對於瀏覽器的左下角定位
有定位父級，相對於最近的父級定位
父輩盒子設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點，
這個父輩盒子能夠是父級也能夠是更高的，找最近的相對定位的父輩元素 父相子絕
不止是父相子絕，父絕子絕 父固子絕都是以父輩元素左上角爲參考點，
可是父絕子絕沒有實際意義，由於絕對定位脫標，影響頁面佈局，父相子絕經常使用且最有用
特性：
脫離文檔流
提高層級，作遮蓋效果
設置絕對定位以後，無論是塊級元素仍是行內元素，均可以設置寬高
3.fixed 固定在瀏覽器的某個位置，當前位置，能夠作小廣告
1.脫標 2.提高層級 3.固定不變不會隨頁面滾動
參考點：設置top以瀏覽器的左上角爲參考點
設置bottom以瀏覽器的左下角爲參考點
做用：1.返回頂部欄 2.固定導航欄 3.小廣告
4.static 靜態定位，默認```
css的繼承性
給父級設置一些屬性，子級繼承了父級的該屬性
有一些屬性是能夠繼承下來的：color、font-*、text-*、line-*只有這四個
像一些盒子元素，定位的元素(浮動，絕對定位，固定定位)不能繼承
css的層疊性
誰的權重大，瀏覽器就會顯示誰的屬性
權重大的標籤覆蓋掉權重小的
比權重就是數個數：id選擇器 類選擇器 標籤選擇器，先比id，有結果就不日後比了，沒結果再比類選擇器
當權重同樣的時候，之後設置的屬性爲準
繼承來的屬性，權重爲0
<!--!important設置權重無限大
不影響繼承來的權重，隻影響選中的元素-->
總結：先看有沒有被選中，若是選中了，數個數(id，class，標籤的數量) 誰的權重大就顯示誰的屬性
權重同樣大的話之後面設置的爲準
若是沒有被選中，權重爲0
若是屬性都是被繼承下來的權重都是0，按照就近原則，誰描述的近，就顯示誰的屬性
都描述的同樣近的話就開始數個數了
z-index
1.z-index值表示誰壓着誰，數值大的壓蓋住數值小的
2.只有定位了的元素，纔能有z-index，也就是說無論是相對定位、絕對定位仍是固定定位
均可以使用z-index，而浮動元素不能使用
3.z-index值沒有單位，就是一個正整數，默認的z-值爲0
4.若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在html後面，誰在上面壓着別人
定位了元素，永遠壓住沒有定位的元素
5.從父現象：父親慫了，兒子再牛逼也沒用
- 1. htmlCss----Day3
- 2. htmlCss----html
- 3. htmlCss----Day11
- 4. htmlCss-----Day4
- 5. htmlCSS面試題
- 6. htmlCSS-----Day14（css定位）
- 7. python以前端
- 8. python 前端HTML
- 9. python--前端CSS
- 10. python前端CSS
- 更多相關文章...
- • SQLite - Python - SQLite教程
- • Docker 安裝 Python - Docker教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. htmlCss----Day3
- 2. htmlCss----html
- 3. htmlCss----Day11
- 4. htmlCss-----Day4
- 5. htmlCSS面試題
- 6. htmlCSS-----Day14（css定位）
- 7. python以前端
- 8. python 前端HTML
- 9. python--前端CSS
- 10. python前端CSS