1. 文件結(jié)構(gòu)：
? ? HTML文件的固定結(jié)構(gòu)：
? ? <html>
? ? ? ? <head>...</head>
? ? ? ? <body>...</body>
? ? </html>
? ? html是根標簽
? ? head定義文檔頭部，包含： title, script, style, link, meta
? ? body是網(wǎng)頁主要內(nèi)容，包含：h1,h2-h6, p, a, img
2. 認識head標簽：
? ? <head>
? ? ? ? <title>...</title>? ? ? ? 網(wǎng)頁標題
? ? ? ? <meta>
? ? ? ? <link>
? ? ? ? <style>...</style>
? ? ? ? <script>...</script>
? ? </head>
3. 語義化：
? ? 明白每個標簽的用途（在什么情況下我可以使用這個標簽才合理）
? ? ? ? 比如，網(wǎng)頁上的文章的標題就可以用標題標簽，
? ? ? ? 網(wǎng)頁上的各個欄目的欄目名稱也可以使用標題標簽。
? ? ? ? 文章中內(nèi)容的段落就得放在段落標簽中，在文章中有想強調(diào)的文本，就可以使用em標簽表示強調(diào)等等。
4. 認識body標簽：
? ? <p>段落文本</p>? ? ? ? ? ? ? 有三段就放三個<p></p>
? ? <h1>標題文本</h1>? ? ? ? ? ? h1-h6共6個標題分級
? ? <em>斜體文本（強調(diào)）</em>? ? 斜體文本內(nèi)容
? ? <strong>粗體文本</strong>? ? 粗體顯示文本內(nèi)容
? ? <span>單獨樣式文本</span>? ? 沒有語義的，它的應(yīng)用就是為了 設(shè)置單獨的格式用的
? ? <q>引用的文本</q>? ? ? ? ? ? 引用的文本內(nèi)容，會自動加上雙引號
? ? <blockquote>大段引用</blockquote>? ? 引用大段的文本內(nèi)容，文本前后會加上縮進
? ? <br/>? ? ? ? ? ? ? ? ? ? ? ? 換行
? ? <hr/>? ? ? ? ? ? ? ? ? ? ? ? 水平橫線
? ? ? ? ? ? ? ? ? ? ? ? ? 空格
? ? <address>地址信息</address>? 地址信息，通常用于公司地址顯示
? ? <code>代碼內(nèi)容</code>? ? ? ? 代碼，通常是一行內(nèi)
? ? <pre>多行代碼</pre>? ? ? ? ? 多行代碼,你需要在網(wǎng)頁中預(yù)顯示格式時都可以使用它
? ? <ul>? ? ? ? ? ? ? ? ? ? ? ? ul-li 列表信息，以圓點顯示
? ? ? <li>信息1</li>
? ? ? <li>信息2</li>
? ? ? ......
? ? </ul>
? ? <ol>? ? ? ? ? ? ? ? ? ? ? ? ol-li 列表信息，帶上序號
? ? ? <li>信息</li>
? ? ? <li>信息</li>
? ? ? ......
? ? </ol>
? ? <div>排版內(nèi)容<div>? ? ? ? ? 排版中使用，相當于一個容器
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 確定邏輯部分：邏輯部分是頁面上相互關(guān)聯(lián)的一組元素，如欄目版塊
? ? <div id="版塊名稱">…</div>? div 帶上ID號，使之更清晰
? ? <table>表格內(nèi)容</table>? ? ? 創(chuàng)建表格
? ? ? ? <caption>標題文本</caption>? ? ? ? 為表格添加標題文本
? ? ? ? <tbody>...</tbody>? ? ? 若加此標簽后，表格會一次性顯示出來（而非網(wǎng)頁加載一點顯示一點）
? ? ? ? <tr>表格一行</tr>? ? ? ? 表格中的一行
? ? ? ? <td>表格單元格</td>? ? ? 表格中的一個單元格
? ? ? ? <th>表格表頭</th>? ? ? ? 表格頭部的一個單元格，表格表頭
? ? <table summary="表格摘要">...</table>? ? 為表格添加摘要，但不會被瀏覽器顯示出來
? ? <a href="目標網(wǎng)址" title="鼠標滑過時顯示文本">鏈接顯示文本</a>? ? 鏈接標簽
? ? ? ? target="_blank"? ? ? ? ? 網(wǎng)頁將在新窗口中打開
? ? ? ? mailto:? ? ? ? ? ? ? ? ? 網(wǎng)頁中郵件地址，可帶多個參數(shù)
? ? ? ? ? ? mailto: 郵箱地址
? ? ? ? ? ? cc=? ? 抄送地址
? ? ? ? ? ? bcc=? ? 密抄地址
? ? ? ? ? ? ;? ? ? 多個郵箱地址
? ? ? ? ? ? subject=郵件主題
? ? ? ? ? ? body=? 郵件內(nèi)容
? ? ? ? 完整舉例: <a href="mailto:yy@sf.com ?cc=aa@sf.com &bcc=bb@sf.com &subject=主題 &body=郵件內(nèi)容">發(fā)送郵件</a>
? ? <img scr="圖片地址" alt="下載失敗時替換文本" title="提示文本" />
5. 與用戶交互：
? ? 語法：
? ? ? ? <form method="傳送方式" action="服務(wù)器文件"></form>
? ? 舉例：
? ? ? ? <form? ? method="post"? action="save.php">
? ? ? ? ? ? <label for="username">用戶名:</label>
? ? ? ? ? ? <input type="text" name="username" />
? ? ? ? ? ? <label for="pass">密碼:</label>
? ? ? ? ? ? <input type="password" name="pass" />
? ? ? ? </form>
? ? 表單控件：
? ? ? ? 文本框、文本域、按鈕、單選框、復(fù)選框
? ? method:
? ? ? ? post/get
? ? 1. 文本框（文本/密碼）
? ? ? ? <form>
? ? ? ? ? <input type="text/password" name="名稱" value="文本" />
? ? ? ? </form>
? ? ? ? type：有“text”和“password”兩種類型
? ? ? ? name：為文本框命名，方便后臺ASP和PHP使用
? ? ? ? value：文本框默認值，一般起提示作用
? ? 2. 文本域（多行文本）
? ? ? ? <textarea rows="行數(shù)" cols="列數(shù)">默認文本內(nèi)容</textarea>
? ? ? ? cols：多行輸入域的列數(shù)
? ? ? ? rows：多行輸入域的行數(shù)
? ? 3. 單選框、復(fù)選框
? ? ? ? <input? type="radio/checkbox"? value="值"? ? name="名稱"? checked="checked"/>
? ? ? ? type：radio單選，checkbox復(fù)選框
? ? ? ? value：提交數(shù)據(jù)到服務(wù)器的值，后臺PHP處理使用
? ? ? ? name：為控件命名，以備后臺程序ASP和PHP使用
? ? ? ? checked：checked="checked"時，此選項默認被選中
? ? ? ? 注意：同一組的單選按鈕，name取值一定要一致
? ? 4. 下拉列表框
? ? ? ? <form action="save.php" method="post" >
? ? ? ? ? ? <label>愛好:</label>
? ? ? ? ? ? <select multiple="multiple">
? ? ? ? ? ? ? <label for="book>看書</label>? ? ? ?
? ? ? ? ? ? ? <option value="看書" id="book">看書</option>
? ? ? ? ? ? ? <option value="旅游">旅游</option>
? ? ? ? ? ? ? <option value="運動">運動</option>
? ? ? ? ? ? ? <option value="購物">購物</option>
? ? ? ? ? ? </select>
? ? ? ? ? ? <input? type="submit"? value="提交">
? ? ? ? ? ? <input? type="reset"? ? value="重置"? />
? ? ? ? </form>
? ? ? ? value：向服務(wù)器提交值
? ? ? ? selected：設(shè)置selected="selected"時，默認選中
? ? ? ? multiple：multiple="multiple"時，可以使用Ctrl多選，但很丑
? ? ? ? label：為了改進鼠標易用性，鼠標點擊文本時，選擇上Radio
6. 認識CSS樣式：
? ? CSS：層疊樣式表（Cascading Style Sheets），主要用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式
? ? 語法：
? ? ? ? 選擇符{ 屬性: 值}
? ? 舉例：
? ? ? ? p{ color: blue}
? ? 選擇符：又稱選擇器，指明要應(yīng)用樣式規(guī)則的元素，如<html>、<body>、<h1>、<p>、<img>...
? ? 聲明：指的是冒號”:“
? ? 多條聲明：使用分號”;“隔開，最好每行都加上分號
? ? 注釋：CSS使用 /**/，HTML注釋則使用<!--內(nèi)容-->
7. CSS樣式分類：
? ? 1. 內(nèi)聯(lián)式
? ? ? ? <p style="color:red;font-size:12px">這里文字是紅色。</p>
? ? 2. 嵌入式
? ? ? ? 較通用的一類，CSS樣式放置在<style>標簽中，而<style>通常要放置在<head>內(nèi)
? ? ? ? <style type="text/css">
? ? ? ? ? ? span{
? ? ? ? ? ? ? color:blue;
? ? ? ? ? ? ? font-size:12px;
? ? ? ? ? ? }
? ? ? ? </style>
? ? 3. 外部式
? ? ? ? 把CSS代碼寫到一個單獨的外部文件中，以.css擴展名結(jié)尾，在<head>內(nèi)使用<link>標簽引入，如：
? ? ? ? <link href="base.css" rel="stylesheet" type="text/css" />
? ? ? ? href: .css文件路徑
? ? ? ? rel和type: rel="stylesheet" type="text/css" 是固定寫法，不能改
? ? 三種方法的優(yōu)先級：
? ? ? ? 內(nèi)聯(lián)式 > 嵌入式 > 外部式
? ? ? ? 就近原則，嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的后面
? ? ? ? 以上規(guī)則適用于相同權(quán)值的情況
8. CSS 類選擇器
? ? 語法：
? ? ? ? .類選器名稱{css樣式代碼;}
? ? 舉例：
? ? ? ? <style type="text/css">
? ? ? ? .stress{
? ? ? ? ? ? color:red;
? ? ? ? }
? ? ? ? </style>
? ? 注意：前邊的小圓點是必須要有的
? ? 使用：
? ? ? ? <span class="stress">膽小如鼠</span>
9. CSS ID選擇器
? ? 語法：
? ? ? ? #ID選擇器名稱{css樣式代碼}
? ? 舉例：
? ? ? ? #setGreen{color:green;}
? ? ? ? <span id="setGreen">膽小如鼠</span>
? ? 區(qū)別：
? ? ? ? 起始于 '.' 與 '#'
? ? ? ? 調(diào)用時 class= 與 id=
? ? ? ? ID選擇器只能在文檔中使用一次，類選擇器則可以使用多次
? ? ? ? 一個元素可以使用多個類選擇器同時設(shè)置多個樣式，而ID選擇器是不可以的，如 <span class="stress bigsize">三年級</span>
10.CSS 子選擇器
? ? 還有一個比較有用的選擇器子選擇器，即大于符號(>),用于選擇指定標簽元素的第一代子元素。舉例：
? ? ? ? .food>li{border:1px solid red;}
? ? 若大于符號換成空格( ),用于選擇指定標簽元素的所有后輩元素，舉例：
? ? ? ? .first span{border:1px solid red;}
11. CSS 通用選擇器
? ? 通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素：
? ? ? ? * {color: red;}
? ? 此時，所有元素的字體都為紅色
12. CSS 偽類選擇符
? ? 偽類選擇符，它允許給html不存在的標簽（標簽的某種狀態(tài)）設(shè)置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態(tài)來設(shè)置字體顏色
? ? ? ? a:hover{color:red;}
? ? 此時，把鼠標放置到元素上邊，顏色就會切換為紅色
13. CSS 分組選擇符
? ? 多個標簽使用逗號隔開：
? ? ? ? h1,span{color:red;}
? ? 相當于：
? ? ? ? h1{color:red;}
? ? ? ? span{color:red;}
14. CSS 繼承
? ? CSS的某些樣式是具有繼承性的，那么什么是繼承呢？繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個特定html標簽元素，而且應(yīng)用于其后代
? ? 如：
? ? ? ? p{color:red;} /*可被span繼承*/
? ? ? ? p{border:1px solid red;} /*此時，span將不繼承，邊框顯示紅色*/
15. CSS 特殊性（權(quán)值）
? ? 權(quán)值：
? ? ? ? p{color:red;} /*權(quán)值為1*/
? ? ? ? p span{color:green;} /*權(quán)值為1+1=2*/
? ? ? ? .warning{color:white;} /*權(quán)值為10*/
? ? ? ? p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
? ? ? ? #footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/
? ? 注意：還有一個權(quán)值比較特殊--繼承也有權(quán)值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權(quán)值最低。
? ? 層疊：
? ? ? ? 相同權(quán)值時，最后一個將被應(yīng)用
? ? 重要性：
? ? ? ? 相同權(quán)值時，使用 !important 將得到最高權(quán)重，如 p{color:red!important;}
? ? ? ? 樣式優(yōu)先級為：瀏覽器默認的樣式 < 網(wǎng)頁制作者樣式 < 用戶自己設(shè)置的樣式，使用 !important 優(yōu)先級比 用戶自己設(shè)定 還高
16. CSS 文字排版
? ? 1. 字體
? ? ? ? body{font-family:"宋體";}
? ? ? ? body{font-family:"Microsoft Yahei";}
? ? 2. 字號，顏色
? ? ? ? body{font-size:12px;color:#666}
? ? 3. 粗體
? ? ? ? p span{font-weight:bold;}
? ? ? ? a{font-weight:bold;}
? ? 4. 斜體
? ? ? ? p a{font-style:italic;}
? ? ? ? p{font-style:italic;}
? ? 5. 下劃線
? ? ? ? p a{text-decoration:underline;}
? ? 6. 刪除線
? ? ? ? .oldPrice{text-decoration:line-through;}
? ? 7. 縮進
? ? ? ? p{text-indent:2em;} /*2em 表示兩倍文字大小*/
? ? 8. 行間距
? ? ? ? p{line-height:1.5em;}
? ? 9. 字間距、字母間距
? ? ? ? h1{letter-spacing:50px;word-spacing:50px;} /*分別是字母、單詞間距*/
? ? 19.對齊
? ? ? ? h1{text-align:center;} /*left、right和center*/
17. CSS 元素分類
? ? 塊狀元素：
? ? ? ? <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
? ? 內(nèi)聯(lián)元素：
? ? ? ? <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
? ? 內(nèi)聯(lián)塊狀元素：
? ? ? ? <img>、<input>
? ? 1. 塊狀元素：
? ? ? ? 1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行）
? ? ? ? 2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
? ? ? ? 3、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個寬度。
? ? ? ? 注意：a{display:block;} /*可以把內(nèi)聯(lián)元素 a 轉(zhuǎn)換為 塊狀元素*/
? ? 2. 內(nèi)聯(lián)元素：
? ? ? ? 1、和其他元素都在一行上；
? ? ? ? 2、元素的高度、寬度、行高及頂部和底部邊距不可設(shè)置；
? ? ? ? 3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
? ? ? ? 注意：display:inline 可以轉(zhuǎn)換成內(nèi)聯(lián)元素
? ? 3. 內(nèi)聯(lián)塊狀元素：
? ? ? ? 1、和其他元素都在一行上；
? ? ? ? 2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
? ? ? ? 注意：display:inline-block 可以轉(zhuǎn)換成內(nèi)聯(lián)塊狀
18. CSS 盒模型
? ? 1. 邊框
? ? ? ? div{ border:2px? solid? red;}
? ? ? ? 相當于：
? ? ? ? div{
? ? ? ? ? ? border-width:2px;
? ? ? ? ? ? border-style:solid;
? ? ? ? ? ? border-color:red;
? ? ? ? }
? ? ? ? border-style: dashed（虛線）| dotted（點線）| solid（實線）
? ? ? ? border-color:#888;? ? //前面的井號不要忘掉。
? ? ? ? border-width: 有 thin | medium | thick（但不是很常用），最常還是用象素（px）
? ? 2. 上下左右邊框：
? ? ? ? div{border-bottom:1px solid red;} /*top、bottom、left和right*/
? ? 3. 高度和寬度
? ? ? ? div{
? ? ? ? ? ? width:200px;? ? /*寬度*/
? ? ? ? ? ? height:30px;? ? /*高度*/
? ? ? ? ? ? padding:20px;? /*元素到邊框的距離，又名為“填充”*/
? ? ? ? ? ? border:1px solid red;
? ? ? ? ? ? margin:10px;? ? /*兩盒子距離，又名為“邊界”*/
? ? ? ? }
19. CSS 布局模型
? ? 元素有三種布局模型：
? ? 1、流動模型（Flow）
? ? ? ? 網(wǎng)頁在默認狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的
? ? ? ? 第一點，塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因為在默認狀態(tài)下，塊狀元素的寬度都為100%
? ? ? ? 第二點，在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示
? ? 2、浮動模型 (Float)
? ? ? ? 現(xiàn)在我們想讓兩個塊狀元素并排顯示
? ? ? ? 任何元素在默認情況下是不能浮動的，但可以用CSS定義為浮動，如div、p、table、img等元素都可以被定義為浮動
? ? ? ? 舉例：
? ? ? ? ? ? #div1{float:left;}
? ? ? ? ? ? #div2{float:right;}
? ? 3、層模型（Layer）
? ? ? ? 就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網(wǎng)頁設(shè)計領(lǐng)域，由于網(wǎng)頁大小的活動性，層布局沒能受到熱捧
? ? ? ? 層模型有三種形式：
? ? ? ? ? ? 1、絕對定位(position: absolute)
? ? ? ? ? ? ? ? 需要設(shè)置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來
? ? ? ? ? ? ? ? 然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位
? ? ? ? ? ? ? ? 如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口
? ? ? ? ? ? ? ? 舉例：
? ? ? ? ? ? ? ? ? ? div{
? ? ? ? ? ? ? ? ? ? ? ? xxxx:yyyy;
? ? ? ? ? ? ? ? ? ? ? ? position:absolute;
? ? ? ? ? ? ? ? ? ? ? ? right:100px;
? ? ? ? ? ? ? ? ? ? ? ? top:20px;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? 2、相對定位(position: relative)
? ? ? ? ? ? ? ? position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置
? ? ? ? ? ? ? ? 相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，
? ? ? ? ? ? ? ? 然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動
? ? ? ? ? ? ? ? 舉例：
? ? ? ? ? ? ? ? ? ? #div1{
? ? ? ? ? ? ? ? ? ? ? ? width:200px;
? ? ? ? ? ? ? ? ? ? ? ? height:200px;
? ? ? ? ? ? ? ? ? ? ? ? border:2px red solid;
? ? ? ? ? ? ? ? ? ? ? ? position:relative;
? ? ? ? ? ? ? ? ? ? ? ? left:100px;
? ? ? ? ? ? ? ? ? ? ? ? top:50px;
? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? <div id="div1"></div>
? ? ? ? ? ? 3、固定定位(position: fixed) 如彈窗廣告
? ? ? ? ? ? ? ? fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身
? ? ? ? ? ? ? ? 它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，
? ? ? ? ? ? ? ? 因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響
? ? ? ? ? ? ? ? 舉例：
? ? ? ? ? ? ? ? ? ? #div1{
? ? ? ? ? ? ? ? ? ? ? ? width:200px;
? ? ? ? ? ? ? ? ? ? ? ? height:200px;
? ? ? ? ? ? ? ? ? ? ? ? border:2px red solid;
? ? ? ? ? ? ? ? ? ? ? ? position:fixed;
? ? ? ? ? ? ? ? ? ? ? ? left:100px;
? ? ? ? ? ? ? ? ? ? ? ? top:50px;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? Relative與Absolute組合使用：
? ? ? ? ? ? ? ? 1、參照定位的元素必須是相對定位元素的前輩元素
? ? ? ? ? ? ? ? <div id="box1"><!--參照定位的元素（前輩）-->
? ? ? ? ? ? ? ? ? ? <div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? 2、參照定位的元素必須加入position:relative;
? ? ? ? ? ? ? ? #box1{
? ? ? ? ? ? ? ? ? ? width:200px;
? ? ? ? ? ? ? ? ? ? height:200px;
? ? ? ? ? ? ? ? ? ? position:relative;? ? ? ?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? 3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了
? ? ? ? ? ? ? ? #box2{
? ? ? ? ? ? ? ? ? ? position:absolute;
? ? ? ? ? ? ? ? ? ? top:20px;
? ? ? ? ? ? ? ? ? ? left:30px;? ? ? ?
? ? ? ? ? ? ? ? }
20. 代碼簡寫：
? ? 1. 盒模型：? ?
? ? ? ? margin:10px; 相當于 margin:10px 10px 10px 10px; （上右下左順序）
? ? ? ? margin:10px 40px; 相當于 margin:10px 40px 10px 40px; （上右 下左順序）
? ? ? ? padding, border和 margin是一致的；
? ? 2. 顏色值：
? ? ? ? p{color:#000000;} 相當于 p{color: #000;}
? ? ? ? p{color: #336699;} 相當于 p{color: #369;}
? ? 3. 字體：
? ? ? ? body{
? ? ? ? ? ? font-style:italic;
? ? ? ? ? ? font-variant:small-caps;
? ? ? ? ? ? font-weight:bold;
? ? ? ? ? ? font-size:12px;
? ? ? ? ? ? line-height:1.5em;
? ? ? ? ? ? font-family:"宋體",sans-serif;
? ? ? ? }
? ? ? ? 編寫為：
? ? ? ? ? ? body{font:italic? small-caps? bold? 12px/1.5em? "宋體",sans-serif;}
? ? ? ? 注意：
? ? ? ? ? ? 1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性未指定將自動使用默認值。
? ? ? ? ? ? 2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。
21. 長度值
? ? 1. 像素
? ? ? ? 像素為什么是相對單位呢？因為像素指的是顯示器上的小點（CSS規(guī)范中假設(shè)“90像素=1英寸”）
? ? 2. em
? ? ? ? 假定 font-size設(shè)定 14px，那么 1em=14px
? ? 3. 百分比
? ? ? ? p{font-size:12px;line-height:130%}
html/css基礎(chǔ)知識
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽?zāi)J的外補...
- CSS基礎(chǔ) 本文包括CSS基礎(chǔ)知識選擇器（重要?。。。├^承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
- 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
