KAL1 LINUX 官方文件之USB--- 製作Kali可啟動u盤（Linux）
學習來自菜鳥教程！！！https://www.runoob.com/css/css-background.html
1、背景
background-color背景顏色
background-image背景圖片
background-repeat背景圖片重複
background-attachment背景圖片是否移動
background-position背景圖片初始位置
background以上屬性簡寫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <View Codemeta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> </head> <style> body { background-color: pink; background-image: url('imgs/img_tree.png'); /* 不復制*/ background-repeat: no-repeat; /* 固定*/ background-attachment: fixed; /* 右上*/ background-position: right top; } </style> <body> </body> </html>
2、類選擇器
/*選p中類為center的元素*/ p.center{ text-align:center; } /*選所有類為center1的元素*/ .center1{ text-align:center; }<!DOCTYPE html> <html> <head> <View Codemeta charset="utf-8"> <title></title> <style> /* 選p中類為center的元素 */ p.center { text-align: center; } /* 選所有類為center1的元素 */ .center1 { text-align: center; } </style> </head> <body> <h1 class="center">這個標題不受影響，類center</h1> <p class="center">這個段落居中對齊，類center</p> <h2 class="center1">這個標題居中對齊，類center1</h1> <p class="center1">這個段落居中對齊，類center1</p> </body> </html>
3、文字
color顏色 text-align對齊方式 text-decoration文字裝飾（下劃線，刪除線，頭上線）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 取消下劃線 */ a { text-decoration: none; } h1 { /* 居中對齊 */ text-align: center; color: cadetblue; } h4 { /* 頭上線 */ text-decoration: overline; } h2 { /* 刪除線 */ text-decoration: line-through; } h3 { /* 下劃線 */ text-decoration: underline; } p.date { /* 右對齊 */ text-align: right; } p.main { /* 兩端對齊 */ text-align: justify; } </style> </head> <body> <h1>居中對齊</h1> <p class="date">2015 年 3 月 14 號</p> <p class="main"> “當我年輕的時候，我夢想改變這個世界；當我成熟以後，我發現我不能夠改變這個世界，我將目光縮短了些，決定只改變我的國家；當我進入暮年以後，我發現我不能夠改變我們的國家，我的最後願望僅僅是改變一下我的家庭，但是，這也不可能。當我現在躺在床上，行將就木時，我突然意識到：如果一開始我僅僅去改變我自己，然後，我可能改變我的家庭；在家人的幫助和鼓勵下，我可能為國家做一些事情；然後，誰知道呢?我甚至可能改變這個世界。” </p> <p><b>注意：</b> 重置瀏覽器視窗大小檢視 "justify兩端對齊" 是如何工作的。</p> <p>取消下劃線的連結: <a href="https://www.runoob.com/css/css-text.html">https://www.runoob.com/css/css-text.html</a></p> <h4>頭上線</h4> <h2>刪除線</h2> <h3>下劃線</h3> </body> </html>View Code
其他屬性參考大佬網址https://www.runoob.com/css/css-text.html
4、塊元素與內聯元素
display顯示 可選項為： none（不顯示，不佔空間）<---->visibility:hidden（隱藏，佔空間） block塊元素（預設有換行） inline內聯元素（不換行，不需要給定寬度）塊級元素(block)特性： 總是獨佔一行，表現為另起一行開始，而且其後的元素也必須另起一行顯示; 寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制; 內聯元素(inline)特性： 和相鄰的內聯元素在同一行; 寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是裡面文字或圖片的大小; 塊級元素主要有： address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li 內聯元素主要有： a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var 可變元素(根據上下文關係確定該元素是塊元素還是內聯元素)： applet ,button ,del ,iframe , ins ,map ,object , script
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="width: 500px; background-color: yellowgreen;">div內容，預設是塊元素，即使給定寬度，也會換行</div> <div style="width: 500px; background-color: yellowgreen;"></div>div內容，預設是塊元素，即使給定寬度，也會換行</div> <br> <div style=" background-color: yellowgreen;display: inline;">div內容，改為內聯元素，不會換行</div> <div style=" background-color:aqua; display: inline;">div內容，改為內聯元素，不會換行，不需要給定寬度，寬度自適應</div> </body> </html>View Code
5、定位position
可選項：
static 預設值，遵循正常的文件流物件，即自上而下，從左到右的佈局，不會受到 top, bottom, left, right 影響
fixed 元素的位置相對於瀏覽器視窗是固定位置，與文件流無關，不佔據空間，可重疊,受到 top, bottom, left, right 影響
relative元素位置相對於自身位置，遵循正常的文件流物件，佔空間，受到 top, bottom, left, right 影響 absolute元素的位置相對於父元素位置，與文件流無關，不佔據空間，可重疊,受到 top, bottom, left, right 影響相對於視窗或自身，如圖示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="position: static;">預設定位模式static</div> <div style="position: static;">預設定位模式static</div> <div style=" width: 500px;background-color: aqua; position: fixed;top: 80px;left: 20px;">fixed模式，固定於視窗</div> <div style=" width: 300px;background-color: aqua; position: fixed;top: 100px;left: 20px;">fixed模式，固定於視窗</div> <div style="background-color: aqua; position: relative;top: 120px;left: 20px; ">relative模式，相對自身位置</div> <div style="background-color: aqua; position: relative;top: 140px;left: -20px; ">relative模式，相對自身位置</div> <div style="background-color: pink; position: absolute;top: 120px;left: 20px; ">absolute模式，相對於父元素</div> <div style="background-color: pink; position: absolute;top: 140px;left: -20px; ">absolute模式，相對於父元素</div> </body> </html>View Code
6、內容溢位元素框時顯示方式
overflow可選項
visible 預設值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，並且其餘內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style=" height: 100px;width: 200px;overflow: auto; float: left;"> <p>多餘自動新增滾動條</p> <p>多餘自動新增滾動條</p> <p>多餘自動新增滾動條</p> <p>多餘自動新增滾動條</p> <p>多餘自動新增滾動條</p> </div> <div style=" height: 100px;width: 200px;overflow: hidden; float: left;"> <p>多餘自動裁剪丟棄</p> <p>多餘自動裁剪丟棄</p> <p>多餘自動裁剪丟棄</p> <p>多餘自動裁剪丟棄</p> <p>多餘自動裁剪丟棄</p> </div> <div style=" height: 100px;width: 200px;overflow: scroll; float: left;"> <p>直接新增滾動條</p> <p>直接新增滾動條</p> <p>直接新增滾動條</p> <p>直接新增滾動條</p> <p>直接新增滾動條</p> </div> <div style=" height: 100px;width: 200px;overflow: visible;float: left;"> <p>出現在元素框外</p> <p>出現在元素框外</p> <p>出現在元素框外</p> <p>出現在元素框外</p> <p>出現在元素框外</p> </div> </body> </html>View Code
7、浮動
float可選項
left
right
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="width: 500px;background-color: aqua;">div塊元素</div> <div style="width: 500px;background-color: chartreuse;">div塊元素</div> <div style="width: 500px;background-color:aqua;float: left;">div float實現內聯元素</div> <div style="width: 500px;background-color: chartreuse;float: left;">div float實現內聯元素</div> </body> </html>View Code
8、對齊
margin:auto 元素居中 （需要設定width） text-align:center內容居中<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="width: 500px;margin: auto;background-color: aqua;">div元素居中對齊</div> <div style="width: 500px;margin: auto;background-color:burlywood;text-align: center;">div元素文字居中對齊</div> </body> </html>View Code