前端-html、css
HTML
一、html簡介
超級文本標記語言是標準通用標記語言下的一個應用，也是一種規范，一種標準，
它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，然后根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果
主要特點如下：
1.簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便。2.可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。3.平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平臺上，這也是萬維網（WWW）盛行的另一個原因。通用性：另外，HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
基本組成：
| 1234567 | <!DOCTYPE html><html>????<head>????</head>????<body>????</body></html> |
<head>和</head>之間的內容，是元信息和網站的標題?元信息一般是不顯示出來的,但是記錄了你這個HTML文件的很多有用的信息<body>和</body>之間的內容，是瀏覽器呈現出來的，用戶看到的頁面效果。也就是說這里是網頁的主體。也就是body的身體之意<html></html>是說明這個是一個網頁。告訴瀏覽器這個網頁的開始和結束。他包含了之后的兩個元素。<head>和</head>|<body>和</body>
二、html文檔類型
DOCTYPE?標簽?–?定義了標準文檔的類型
DOCTYPE標簽是單獨出現的說明：????文檔類型，會使瀏覽器使用相應標準加載網頁并顯示????文檔類型定義在HTML文檔的第一行，在html標簽之前????文檔不定義DOCTYPE，瀏覽器將無法獲知HTML或XHTML文檔的類型，因此會進入混亂模式，詳見：瀏覽器模式引用網址：http://www.dreamdu.com/xhtml/tag_doctype/DOCTYPE，簡稱為DTDs，是英文Document?type的縮寫，中文“文檔類型”
1.BackCompat：標準兼容模式未開啟（或叫怪異模式[Quirks?mode]、混雜模式）
2.CSS1Compat：標準兼容模式已開啟（或叫嚴格模式[Standards?mode/Strict?mode]）
這個屬性會被瀏覽器識別并使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat,這也就是惡魔的開始?–?瀏覽器按照自己的方式解析渲染頁面，那么，在不同的瀏覽器就會顯示不同的樣式。如果你的頁面添加了那么，那么就等同于開啟了標準模式，那么瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。
HTML?DOCTYPE文檔類型舉例說明
HTML4.01文檔過渡定義類型
此類型定義的文檔可以使用HTML中的標簽與元素包括一些不被W3C推薦的標簽（例如：font、b等），
不可以使用框架
HTML4.01文檔嚴格定義類型
此類型等同于HTML4.01文檔過渡定義類型，但可以使用框架
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Frameset//EN"?"http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0文檔過渡定義類型
此類型定義的文檔可以使用HTML中的標簽與元素包括一些不被W3C推薦的標簽（例如：font、b等），
不可以使用框架
XHTML1.0文檔嚴格定義類型
此類型定義的文檔只可以使用HTML中定義的標簽與元素，不能包含不被W3C推薦的標簽（例如：font、b）(夢之都就使用了此類型)，不可以使用框架
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Strict//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML1.0文檔框架定義類型
等同于XHTML1.0文檔過渡定義類型，但可以使用框架
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Frameset//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML1.1文檔嚴格定義類型
等同于XHTML1.0文檔過渡定義類型
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.1//EN"?"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">HTML5文檔類型
<!DOCTYPE?html>
提示:?HTML聲明中使用的標簽是很特殊的(不同于標簽語法),使用<!開始,結束也不用關閉符.
三、html-head
| 1 | <head></head> |
這2個標記符分別表示頭部信息的開始和結尾。頭部中包含的標記是頁面的標題、序言、說明等內容，它本身不作為內容來顯示，但影響網頁顯示的效果。頭部中最常用的標記符是標題標記符和meta標記符，其中標題標記符用于定義網頁的標題，它的內容顯示在網頁窗口的標題欄中，網頁標題可被瀏覽器用作書簽和收藏清單。
設置文檔標題和其它在網頁中不顯示的信息，比如direction方向、語言代碼Language?Code（實體定義!ENTITY?%?i18n）、指定字典中的元信息、等等。
| 1 | Meta(metadata information) |
定義了一個文檔和外部資源之間的關系
提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞
頁面編碼（告訴瀏覽器是什么編碼）
| 1 | < meta http-equiv=“content-type” content=“text/html;charset=utf-8”> |
刷新和跳轉
| 12345 | < meta http-equiv=“Refresh” Content=“30″>#30秒刷新< meta http-equiv=”Refresh“ Content=”5; Url=http://www.baidu.com"/>#5秒之后跳轉到百度 |
關鍵詞
| 1 | < meta name="keywords" content="星際2,星際老男孩,，妹子" > |
定義了文檔的信息
| 1 | <title> |
定義了頁面鏈接標簽的默認鏈接地址
| 1234567 | <link>css< link rel="stylesheet" type="text/css" href="css/common.css" >icon< link rel="shortcut icon" href="image/favicon.ico"> |
X-UA-Compatible
微軟的IE6是通過XP、Win2003等操作系統發布出來，作為占統治地位的桌面操作系統，也使得IE占據了通知地位，許多的網站開發的時候，就按照IE6的標準去開發，而IE6自身的標準也是微軟公司內部定義的。到了IE7出來的時候，采用了微軟公司內部標準以及部分W3C的標準，這個時候許多網站升級到IE7的時候，就比較痛苦，很多代碼必須調整后，才能夠正常的運行。而到了微軟的IE8這個版本，基本上把微軟內部自己定義的標準拋棄了，而全面的支持W3C的標準，由于基于對標準徹底的變化了，使得原先在早期IE8版本上能夠訪問的網站，在IE8中無法正常的訪問，會出現一些排版錯亂、文字重疊，顯示不全等各種兼容性錯誤。
與任何早期瀏覽器版本相比，Internet?Explorer?8?對行業標準提供了更加緊密的支持。?因此，針對舊版本的瀏覽器設計的站點可能不會按預期顯示。?為了幫助減輕任何問題，Internet?Explorer?8?引入了文檔兼容性的概念，從而允許您指定站點所支持的?Internet?Explorer?版本。?文檔兼容性在?Internet?Explorer?8?中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現網站。?如果您的站點在?Internet?Explorer?8?中無法正確顯示，則可以更新該站點以支持最新的?Web?標準（首選方式），也可以強制?Internet?Explorer?8?按照在舊版本的瀏覽器中查看站點的方式來顯示內容。?通過使用?meta?元素將?X-UA-Compatible?標頭添加到網頁中，可以實現這一點。
當?Internet?Explorer?8?遇到未包含?X-UA-Compatible?標頭的網頁時，它將使用?指令來確定如何顯示該網頁。?如果該指令丟失或未指定基于標準的文檔類型，則?Internet?Explorer?8?將以?IE5?模式（Quirks?模式）顯示該網頁。更多
| 1 | <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> |
Style
在頁面中寫樣式
例如：
| 12345 | < style type="text/css" > ????.bb{ ??????background-color: red; ???} </style> |
Script
| 123456 | 引進文件< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >寫js代碼< script type="text/javascript" > ... </script > |
四、body
標簽一般分為兩種：
行內標簽：a、span、select?等
如下：
內容
塊級標簽：div、h1、p?等
如下：
內容1.標題(h標簽)
標題（Heading）是通過<h1>?-?<h6>等標簽進行定義的。
<h1>?定義最大的標題。<h6>?定義最小的標題。
| 123456 | <h1>h1標題</h1><h2>h2標題</h2><h3>h3標題</h3><h4>h4標題</h4><h5>h5標題</h5><h6>h6標題</h6> |
2.段落(p標簽)
（<p>?是塊級元素）
<br/>標簽：換行標簽
代碼：
| 12345678910 | <html><body><p>這是段落。</p><p>這是段落。</p><p>這是<br/>段落。</p><p>段落元素由 p 標簽定義。</p> </body></html> |
3.超鏈接（a標簽）
HTML?使用超級鏈接與網絡上的另一個文檔相連。
幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。
使用?<a>?標簽在?HTML?中創建鏈接。
| 1 | <a href="http://www.baidu.com">百度</a> |
提示：”鏈接文本”?不必一定是文本。圖片或其他?HTML?元素都可以成為鏈接。
target?屬性
使用?Target?屬性，你可以定義被鏈接的文檔在何處顯示。
target屬性中的_blank會在新窗口打開頁面
name?屬性
name?屬性規定錨（anchor）的名稱。
當使用命名錨（named?anchors）時，我們可以創建直接跳至該命名錨（比如頁面中某個小節）的鏈接，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
代碼：
| 123456 | <!--<a href="#a2"> 上面的代碼href="#要跳轉的標簽"--><a href="#t1">第一頁</a><a href="#t2">第二頁</a><p id='t1'style="height:1001px;background-color: aqua;">我是第一頁</p><p id='t2'style="height:1010px;background-color: red;">我是第二頁</p><!--在標簽里，ID是這個標簽的唯一的值，我們在做錨的時候指定他的ID即可--> |
4.圖像標簽（img）
在?HTML?中，圖像由標簽定義。
是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。
要在頁面上顯示圖像，你需要使用源屬性（src）。src?指?“source”。
源屬性的值是圖像的?URL?地址。
定義圖像的語法是：
| 1 | <img src="url" /> |
5.表格標簽
表格由?<table>?標簽來定義。每個表格均有若干行（由?<tr>?標簽定義,每行被分割為若干單元格
（由?<td>?標簽定義）。字母?td?指表格數據（table?data），即數據單元格的內容。
數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
代碼如下：
| 12345678910 | <table border="1">????<tr>????????<td>row 1, cell 1</td>????????<td>row 1, cell 2</td>????</tr>????<tr>????????<td>row 2, cell 1</td>????????<td>row 2, cell 2</td>????</tr></table> |
| row?1,?cell?1 | row?1,?cell?2 |
| row?2,?cell?1 | row?2,?cell?2 |
表格的表頭
表格的表頭使用?<th>?標簽進行定義。
大多數瀏覽器會把表頭顯示為粗體居中的文本：
| 1234567891011121314151617 | <table border="1">????<!--border這里是加上邊框-->????<tr>????????<th>標題</th>????????<th>標題二</th>????</tr>????<tr>????<!--一個tr是1行，一個td是一列，一行里可能有很多列。-->????<!--如果想加多個行就加多個tr即可-->????????<td>row 1, cell 1</td>????????<td>row 1, cell 2</td>????</tr>????<tr>????????<td>row 2, cell 1</td>????????<td>row 2, cell 2</td>????</tr></table> |
| row?1,?cell?1 | row?1,?cell?2 |
| row?2,?cell?1 | row?2,?cell?2 |
合并單元格
| 123456789101112131415161718 | <table border="1"><!--border這里是加上邊框--><tr>????<td colspan="3">1</td>????<!--這里colspan，就告訴html解析的時候占3個格--></tr><!--一個tr是1行，一個td是一列，一行里可能有很多列。--><!--如果想加多個行就加多個tr即可--><tr>????<td rowspan="2">1</td>????<td>2</td>????<td>3</td></tr>????<tr>????<td>2</td>????<td>3</td></tr></table> |
| 1 | ||||
| 1 | 2 | 3 | ||
| 2 | 3 | |||
6.列表標簽
無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始于?<ul>?標簽。每個列表項始于?<li>。
代碼如下：
| 123456 | <ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ul> |
有序列表
同樣，有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始于?<ol>?標簽。每個列表項始于?<li>?標簽。
代碼：
1234 <ol>????<li>第一行</li>????<li>第二行</li>??? </ol> 第一行
第二行
- 第二行 第三行
- 第四行
7.塊元素
HTML?塊元素
大多數?HTML?元素被定義為塊級元素或內聯元素。
編者注：“塊級元素”譯為?block?level?element，“內聯元素”譯為?inline?element。
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。
例子：<h1>,?<p>,?<ul>,?<table>
HTML?內聯元素
內聯元素在顯示時通常不會以新行開始。
例子：<b>,?<td>,?<a>,?<img>
HTML?<div>?元素
HTML?<div>?元素是塊級元素，它是可用于組合其他?HTML?元素的容器。
<div>?元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。
如果與?CSS?一同使用，<div>?元素可用于對大的內容塊設置樣式屬性。
<div>?元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用?<table>?元
素進行文檔布局不是表格的正確用法。<table>?元素的作用是顯示表格化的數據。
HTML?<span>?元素
HTML?<span>?元素是內聯元素，可用作文本的容器。
<span>?元素也沒有特定的含義。
當與?CSS?一同使用時，<span>?元素可用于為部分文本設置樣式屬性。8.表單
表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復選框等等）輸入信息的元素。
表單使用表單標簽（<form>）定義。
12345 <form>??? ...??input 元素...</form> 多數情況下被用到的表單標簽是輸入標簽（<input>）。輸入類型是由類型屬性（type）定義的。
文本域（type=”text”）
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。
代碼：
12345 <form>用戶名: <input type="text" name="firstname" /><!--密碼的輸入框（輸入的內容是保密的）--><input type="password"/> 當用戶從若干給定的的選擇中選取其一時，就會用到單選框。
代碼：
123456 <form>????<!--對于input標簽來說只要，radio的name值相同，那么他們就會互斥-->????<input type="radio" name="sex" value="male" />男????<br />????<input type="radio" name="sex" value="female" />女</form> 注：當name相同的時候為只能單選不能多選。
復選框（type=”checkbox”
當用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到復選框。表單的動作屬性（Action）和確認按鈕
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。
由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。
代碼：123456 <form name="input" action="html_form_action.asp" method="get">用戶名: <input type="text" name="user" /><input type="button" value="button"/><input type="submit" value="submit" /></form> 提交文件file標簽
代碼：
1 <input type="file"/> 多行文本框
代碼：
1 <textarea style="height: 100px;width: 100px;"></textarea> 案例：
一般的用戶注冊：
1234567 <form>????<p>用戶名:<input type="text"/></p>????<p>密碼:<input type="password"/></p>????<input type="submit" value="提交"/>????<!--這里按提交才有反映，submit是用來提交當前的表單的，當然可以有多個表單-->????<!--但是，這個submit需要寫入表單內，那么提交的時候是提交的當前表單--></form> 提交給指定接受接口：
12345678910111213141516171819202122 <form action="www.baidu.com" method="get"><!--這里action是告訴html提交到那里--><!--method是通過什么方法去action指定的地址--><p>????用戶名:<input type="text" name="user"/>????<!--這里的name="user" 這里當咱們指定的action接收到的數據之后縣會找到是否有這個name標簽-->????<!--然后把這里的用戶的輸入復制給name為一個字典key:value模式--></p><p>????密碼:<input type="password" name="pass"/>????????????<!--這里的name="pass" 這里當咱們指定的action接收到的數據之后縣會找到是否有這個name標簽-->????<!--然后把這里的用戶的輸入復制給name為一個字典key:value模式--></p><p>????愛好:<select name="department">????????????????<option value="1">女</option>????????????????<option value="2">男</option>????<!--這里在選擇之后，會把選擇的value值賦予給name，當用戶點擊提交后就會提交到后臺--></select></p><input type="submit" value="提交"/></form> 9.select標簽
第一種：
123456 <select><option value="1">錦州</option><option value="2">沈陽</option><option value="3" selected="selected">北京</option><!--這里默認是北京因為selected="selected" 這里設置了默認的！--></select> 第二種：
123456 <select size="2">???????<option>上海</option>????<option>北京</option>????<option>錦州</option>????<option>阜新</option></select> 第三種（多選）：
123456 <select multiple="multiple" size="2">????<option>上海</option>????<option>北京</option>????<option>遼寧</option>????<option>錦州</option></select> 第四種分組：
12345678910 <select>????<optgroup label="遼寧省">????????<option>錦州市</option>????????<option>沈陽市</option>????</optgroup>????<optgroup label="吉林省">????????<option>長春市</option>????????<option>四平市</option>????</optgroup></select> 10.label標簽
代碼如下：
12345678910 <div>????<label for="name_1">????????姓名:????????<input id="name_1" type="text"/>????</label>????<label for="name_2">????????婚否:<input id="name_2" type="checkbox"/>????</label></div> CSS
一、css簡介
css是英文Cascading?Style?Sheets的縮寫,稱為層疊樣式表，用于對頁面進行美化，CSS的可以使頁面更加的美觀。基本上所有的html頁面都或多或少的使用css。
存在方式有三種：元素內聯、頁面嵌入和外部引入
1.元素內聯
12345678910 <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head>????<body>????<a? style="color: #b2002e" href="#">何潭</a>????</body></html> 2.頁面嵌入
定義列表
自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
自定義列表以?<dl>?標簽開始。每個自定義列表項以?<dt>?開始。每個自定義列表項的定義以?<dd>?開始。
代碼：
| 123456 | <dl><dt>第一行</dt><dd>第二行</dd><dt>第三行</dt><dd>第四行</dd></dl> |
| 1234567891011121314151617 | <html><head lang="en">????<meta charset="UTF-8">????<title></title>????<style>????????<!--定義-->????????.test{????????????color: #b2002e;????????}????</style></head><body><!--使用--><a?? class="test" href="#">何潭</a></body></html> |
3.引入外部css文件
新建一個css文件
名字叫做index.css
內容
| 123 | test{????????color: #b2002e;????} |
新建一個html文件
內容
| 12345678910111213 | <html><head lang="en">????<meta charset="UTF-8">????<title></title>????<!--這里通過link導入樣式，有點類似與python導入模塊中的import *-->????<link rel="stylesheet" href="index.css"/></head><body><!--使用--><!--這里直接應用指定好的CSS樣式名即可--><a?? class="test" href="#">何潭</a></body></html> |
二、選擇器
class選擇器
點開頭
| 123 | .c1{}<div class='c1'> 123</div><div class='c1'> 123</div> |
標簽選擇器
| 1234567891011121314 | a{????color:red;}divspanselectinput，type=text*****input[type='text']{}html中所有的a標簽，全部紅色字體 |
ID選擇器
| 12345 | #uu{}<div></div><div id='uu'>123</div> |
層級選擇器
| 12345678910111213 | .c3 #i8 div .c4{}<div class='c3'>????<a id='i8'>????????<div>????????????<span class='c4'></span>????????</div>????????<span class='c4'></span>????</a></div><span class='c4'></span> |
組合選擇器
| 123456789 | a{}p{}.c3 #i8 div .c4,.c3 #i8 div .c9{????xxxx} |
三、常用屬性
1.background
| 12345678910 | 背景顏色p {background-color: gray;}背景圖片body {background-image: url(/i/eg_bg_04.gif);}背景平鋪background-repeat: repeat-y;背景不平鋪background-repeat: no-repeat;背景定位background-position:center; |
2.border
| 12 | 邊框的寬度p {border-style: solid; border-width: 5px;} |
3.Display
| 12345 | 使段落生出行內框：p.inline??{??display:inline;??} |
4.cursor
鼠標停放所顯示的效果
css提供的cursor值
pointer?||?help?||?wait?||?move?||?crosshair
常用：
偽造超鏈接
值為pointer
自定義(一般不用)
mine
5.浮動
| 12345678910 | 把圖像向右浮動：img??{??float:right;??}left??? 元素向左浮動。right??? 元素向右浮動。none??? 默認值。元素不浮動，并會顯示在其在文本中出現的位置。inherit??? 規定應該從父元素繼承 float 屬性的值。 |
6.內、外邊距
| 12345 | 標準盒子模型marginpadding內邊距、邊框和外邊距都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器對所有元素進行設置： |
7.定位position
CSS?為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。
定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，用戶代理對?CSS2?中定位的支持遠勝于對其它方面的支持，對此不應感到奇怪。
1.相對定位
相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。
如果將?top?設置為?20px，那么框將在原位置頂部下面?20?像素的地方。如果?left?設置為?30?像素，那么會在元素左邊創建?30?像素的空間，也就是將元素向右移動。
| 12345 | #box_relative {??position: relative;??left: 30px;??top: 20px;} |
2.絕對定位
使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
普通流中其它元素的布局就像絕對定位的元素不存在一樣：
| 123456 | #box_relative {??position: absolute;??left: 30px;??top: 20px;} |
8.樣式：overflow
| 1234567 | 設置 overflow 屬性：div??{??width:150px;??height:150px;??overflow:scroll;??} |
9.透明度
設置?div?元素的不透明級別：
| 1234 | div{opacity:0.5;} |
10.文本
| 1234567 | 縮進p {text-indent: 5em;}使用百分比div {width: 500px;}p {text-indent: 20%;}水平對齊text-align:center |
11.字體
| 123456789101112131415161718 | 使用通用字體系列body {font-family: sans-serif;}指定字體h1 {font-family: Georgia;}字體風格font-style 屬性最常用于規定斜體文本。該屬性有三個值：normal - 文本正常顯示italic - 文本斜體顯示oblique - 文本傾斜顯示字體加粗font-weight 屬性設置文本的粗細。使用 bold 關鍵字可以將文本設置為粗體。關鍵字 100 ~ 900 為字體指定了 9 級加粗度。如果一個字體內置了這些加粗級別，那么這些數字就直接映射到預定義的級別，100 對應最細的字體變形，900 對應最粗的字體變形。數字 400 等價于 normal，而 700 等價于 bold。字體大小font-size 屬性設置文本的大小。 |
12鏈接.
能夠設置鏈接樣式的?CSS?屬性有很多種（例如?color,?font-family,?background?等等）。
鏈接的特殊性在于能夠根據它們所處的狀態來設置它們的樣式。
鏈接的四種狀態：
a:link?-?普通的、未被訪問的鏈接
a:visited?-?用戶已訪問的鏈接
a:hover?-?鼠標指針位于鏈接的上方
a:active?-?鏈接被點擊的時刻
來自為知筆記(Wiz)
轉載于:https://www.cnblogs.com/hetan/p/5365648.html
總結
以上是生活随笔為你收集整理的前端-html、css的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PHP header函数大全
- 下一篇： 接口自动化 基于python+Testl