HTML編碼規(guī)范

法

縮進使用soft tab（4個空格）；
嵌套的節(jié)點應該縮進；
在屬性上，使用雙引號，不要使用單引號；
屬性名全小寫，用中劃線做分隔符；
不要在自動閉合標簽結尾處使用斜線（HTML5 規(guī)范指出他們是可選的）；
不要忽略可選的關閉標簽，例:

<!DOCTYPE html>
 <html>
 	<head>
 		<title>Page title</title>
 	</head>
 	<body> <img src="images/company_logo.png" alt="Company">
 		<h1 class="hello-world">Hello, world!</h1>
 	</body>
 </html>

HTML5 doctype在頁面開頭使用這個簡單地doctype來啟用標準模式，使其在每個瀏覽器中盡可能一致的展現(xiàn)；雖然doctype不區(qū)分大小寫，但是按照慣例，doctype大寫（關于html屬性，大寫還是小寫）。<!DOCTYPE html> <html> ... </html> lang屬性根據(jù)HTML5規(guī)范：應在html標簽上加上lang屬性。這會給語音工具和翻譯工具幫助，告訴它們應當怎么去發(fā)音和翻譯。
更多關于 lang 屬性的說明在這里；在sitepoint上可以查到語言列表；
但sitepoint只是給出了語言的大類，例如中文只給出了zh，但是沒有區(qū)分香港，臺灣，大陸。而微軟給出了一份更加詳細的語言列表.aspx)，其中細分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符編碼通過聲明一個明確的字符編碼，讓瀏覽器輕松、快速的確定適合網(wǎng)頁內(nèi)容的渲染方式，通常指定為’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 標簽可以指定頁面應該用什么版本的IE來渲染；<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根據(jù)HTML5規(guī)范, 通常在引入CSS和JS時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的默認值。HTML5 規(guī)范鏈接使用link
使用style
使用script <link rel="stylesheet" href="code_guide.css">  <style> ... </style>  <script src="code_guide.js"></script>  <script> ... </script> 屬性順序屬性應該按照特定的順序出現(xiàn)以保證易讀性；

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class是為高可復用組件設計的，所以應處在第一位；
id更加具體且應該盡量少使用，所以將它放在第二位。

<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

<input class="form-control" type="text">

<img src="..." alt="...">

boolean屬性

boolean屬性指不需要聲明取值的屬性，XHTML需要每個屬性聲明取值，但是HTML5并不需要；
更多內(nèi)容可以參考 WhatWG section on boolean attributes：
boolean屬性的存在表示取值為true，不存在則表示取值為false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

JS生成標簽

在JS文件中生成標簽讓內(nèi)容變得更難查找，更難編輯，性能更差。應該盡量避免這種情況的出現(xiàn)。

減少標簽數(shù)量

在編寫HTML代碼時，需要盡量避免多余的父節(jié)點；很多時候，需要通過迭代和重構來使HTML變得更少。

<!-- Not well -->
<span class="avatar">
    <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

實用高于完美

盡量遵循HTML標準和語義，但是不應該以浪費實用性作為代價；任何時候都要用盡量小的復雜度和盡量少的標簽來解決問題。

壇網(wǎng)友@fred0320提問：(http://bbs.eetop.cn/thread-465952-1-1.html)

gm/id看起來是非常方便的設計方法。可是這個參數(shù)的物理實質是什么呢？在傳統(tǒng)的設計方法中，你先選gm, 然后決定id，再然后選擇mosfet L和W。那么gm/id是選擇mosfet的什么呢？如果這個比值合適那是否還要再決定gm和id呢，既然這兩項都能決定為何還需要gm/id呢？

請看論壇熱心網(wǎng)友給出的回答：

@天牛不唱歌：

只是說這篇文章你肯定沒看。

A Basic Introduction to the gm ID-Based Design.pdf (2.47 MB)（注：需要點擊閱讀原文登錄論壇下載）

Vod方法是針對長溝道器件的，現(xiàn)在基本都是短溝道器件了，長溝道公式來估算不免偏差很大。

再者，目前通用的MOS管模型-BSIM3V3的參數(shù)里根本就沒有l(wèi)amda 這種參數(shù)了，那目前工藝的Un，Lamda等等參數(shù)你如何得到？

gm/Id 基于仿真出來的MOS管的特性（查找表），可以說是和實際基本靠攏的。

gm/Id是用一種表象找到某兩個參數(shù)的關系，而且這個關系一般是可控的，有一定的取值范圍，變化規(guī)律的。

@暮若幽荷

我很喜歡樓主的問題的標題，我通常也很想搞清各種概念對應的物理實質，當然gm/Id確實沒深入研究過。。

@JoyShockley

gm/id的物理意義不強。轉成2Id/gm后，在長溝道下這個就是Vov，在短溝道下；這個是一個類似過驅動電壓的東西。我一般都是做2id/gm的圖線，因為這樣和傳統(tǒng)的基于Vov的設計類似，比gm/id好用；EE240基本使用2id/gm這個量。

@dingyaoshun

An All-Inversion-Region gm/ID Based Design Methodology for Radiofrequency Blocks in CMOS Nanometer Technologies

@樓主

多謝各位的回復，認真讀完@天牛不唱歌給的paper，已經(jīng)非常清楚了。其實gm/id是和Vov對應的，選擇gm/id其實就是選擇MOSFET的Vgs。為了優(yōu)化電路的速度和功耗引進的這個參數(shù)，利用這個比值選擇最好的效率。Vov, gm/id, 2id/gm 都是不同的表現(xiàn)形式實質都一樣。傳統(tǒng)的Vov方法由于spice model在moderate region不是很精確，所以引進gm/id查表格的方式。

@ ericking0

請參考：http://bbs.eetop.cn/thread-444971-1-1.html

人確定最基本的架構；simulator搞定非線性的，難以手算的東西；遍歷容易計算的東西，得到最優(yōu)化的設計。

@bruceok

Gm/Id methodology is a method which could select mos operation region in moderate region. In moderdate region,mos has a lower power consumption and higher gm

@countersr

有人是這樣解釋的感覺很有道理。這個反應的是效率的問題，多少電流能產(chǎn)生多少增益，根據(jù)這個比值選擇參數(shù)能更直觀的看到效率。

@殘橋掛月

我覺得如果要是用一句話來說明gm/id的實質，就是如何用仿真來代替手算，也就是說gm/id和vov的方法在本質上是沒有區(qū)別的，只是gm/id這個方法是使用了計算機仿真得到的結果，在深亞微米工藝中，比vov手算的方法精確很多

@bgd_wang

我的理解：gm=2Id/（Vgs-Vt),所以gm/Id=2/（Vgs-Vt),在模擬電路中，（Vgs-Vt)一般取0.15~0.2V,低于這個值，晶體管會進入弱反型區(qū)，臨界點在70mV左右。在高頻應用中，（Vgs-Vt)可以高的0.5V，再大容易進入線性區(qū)。故對于MOS來講，gm/Id的典型值在10附近，在RF電路中可以低到4。而對于Bipolar器件，這個值常為40左右。這就意味著在相同的電流下，MOS比Bipolar提供更低的跨導！所以，是否可以這樣理解，gm/Id其實就是反映器件的跨導的一種物理屬性，我們在設計電路中，一旦設定Vgs-Vt，它就是一個定值。而記住這個好處在于它的精確性，它不像跨導的其它表達公式，包含K'這樣的工藝參數(shù)。

歡迎大家接著留言討論。。。。

http://bbs.eetop.cn/thread-465952-1-1.html

SS課堂筆記

1、CSS的概念

層疊樣式表(英文全稱：Cascading Style Sheets) *層疊：多個樣式可以作用在同一個html的元素上，同時生效

是一種用來表現(xiàn)HTML或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。

樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊為一個

CSS很像化妝，通過不同的CSS將同樣的HTML內(nèi)容打造為不同的呈現(xiàn)結果。

所以，前端程序員相互表白的時候可以說：you are the CSS to my HTML.

這是不是CSS是對HTML進行美化和布局作用的最好總結？

2、CSS的優(yōu)勢

功能強大
將內(nèi)容展示和樣式控制分離

降低耦合度。解耦
讓分工協(xié)作更容易
提高開發(fā)效率

3、CSS的使用：CSS與html結合使用

根據(jù)定義CSS的位置不同，分為行內(nèi)樣式、內(nèi)部樣式和外部樣式

3.1 行內(nèi)樣式

也稱為內(nèi)聯(lián)樣式

直接在標簽中編寫樣式，通過使用標簽內(nèi)部的style屬性；

一般在測試的時候使用居多：
語法：
<html標簽 style="樣式1：值1;樣式2：值2;....樣式N：值N;">hello my css</html標簽>
案例：
<div style="color: red;">hello my css</div>

弊端：只能對當前的標簽生效，沒有做到內(nèi)容和樣式相分離，耦合度太高。

3.2 內(nèi)部樣式

定義在head標簽內(nèi)，通過style標簽，該標簽內(nèi)容就是CSS代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>內(nèi)部樣式</title>
        <style>
            div{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

3.3 外部樣式

1、提前定義css資源文件

2、在head標簽內(nèi)，定義link標簽引入外部樣式文件。

lina.css文件，放在與html頁面同級的css文件夾中：
div {
    color: red;
}

html頁面中的引入
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部樣式</title>
        <link rel="stylesheet" href="css/lina.css" />
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

作用域的范圍:外部樣式表>內(nèi)部樣式表>行內(nèi)樣式表

優(yōu)先級：外部樣式表<內(nèi)部樣式表<行內(nèi)樣式表;

同樣的樣式作用在同一個標簽身上：就近原則；不同樣式作用在同一個標簽身上:疊加生效。

4、CSS語法

基本格式：由兩個主要的部分構成：選擇器，以及一條或多條聲明:

選擇器 {
        屬性1:值1;
        屬性2:值2;
        ...
}
選擇器:篩選具有相似特征的元素
屬性和屬性值之間用冒號分割，不同的屬性之間用分號隔開。

例如：

5、CSS注釋

注釋是用來解釋你的代碼，并且可以隨意編輯它，瀏覽器會忽略它。

CSS注釋以 /* 開始, 以 */ 結束

/*這是CSS的注釋*/
div {
    color: red;  /*文字顏色是紅色*/
}

6、基本選擇器：篩選具有相似特征的元素

6.1 id選擇器

選擇具有相同id屬性值的元素，建議html頁面中的id值唯一

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。

PS： ID屬性不要以數(shù)字開頭，數(shù)字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

雖然多個元素可以使用同一個id選擇器控制樣式，但是不推薦。如果需要同樣的樣式對多個標簽生效，使用class選擇器。

6.2 class選擇器

選擇具有相同的class屬性值的元素。

class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：

PS：類名的第一個字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用。

6.3 元素選擇器/標簽選擇器

選擇具有相同標簽名稱的元素。

定義選擇器語法：標簽名稱{}；PS：標簽名稱必須是html提供好的標簽。

使用標簽選擇器：自動使用在所有的同名的標簽上

7 優(yōu)先級

7.1 選擇器的優(yōu)先級

ID選擇器 > 類選擇器 > 標簽選擇器

當多個選擇器作用在同一個標簽上的時候，如果屬性沖突，看優(yōu)先級；如果不沖突，樣式疊加生效。

7.2 樣式表的優(yōu)先級

行內(nèi)樣式 > 內(nèi)部樣式 >外部樣式

同樣，三個樣式表中都有內(nèi)容作用在同一個html標簽的時候，如果屬性沖突，看優(yōu)先級；如果不沖突，樣式疊加生效。

8 CSS常用樣式

8.1 color :字體顏色

跟顏色相關的取值分3種：

1、顏色的單詞 red blue...

2、rgb(紅，綠，藍)三色的取值范圍是0-255 rgb(255,0,0)

rgba（紅，綠，藍,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)

3、#值1值2值3 ：值的范式是00-FF 十六進制數(shù)字組成的例如：#FF0000

8.2 width height:寬高

PS：只有塊狀元素可以設置寬高，行級元素設置不生效。

取值方式有2種：

1：數(shù)值絕對數(shù)字單位是像素PX

2：百分比：占據(jù)父元素的比例

8.3 背景樣式

8.4 文本樣式

8.5 列表樣式

8.6 邊框樣式

10 HTML&CSS調試利器

以谷歌瀏覽器為例說明。

快捷鍵F12或者工具條中的開發(fā)者工具調出以下內(nèi)容。

在elements中可以看到當前頁面的所有標簽，在styles中可以看到html元素對應的樣式。

11 盒子模型

11.1 概念

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

盒子模型說明圖：

Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

11.2 盒子的寬度和高度

元素的實際寬度和高度：

當我們計算一個元素實際在頁面占有的總寬度計算公式是這樣的：

總元素寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素的總高度最終計算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

11.3 如果想要設置的寬度直接就是元素的實際寬度，通過box-sizing屬性

12 補充常用樣式

12.1 float 浮動

12.1.1 什么是浮動

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。

12.1.2 元素怎樣浮動

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之后的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

12.1.3 彼此相鄰的浮動元素

如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

12.1.4 clear--清除浮動

元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。

clear 屬性指定元素兩側不能出現(xiàn)浮動元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮動</title>
        <style>
            div{
                width: 400px;
                height: 200px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <!--沒有浮動屬性的元素都屬于常規(guī)文檔流：從上往下從左往右依次顯示
            浮動的元素都脫離了常規(guī)文檔流；
            為了好理解：大家可以認為浮動元素屬于一層，非浮動元素屬于一層
            如果想要非浮動元素不受浮動元素的影響，需要使用clear屬性
        -->
        <div style="background: rgba(255,0,0,0.5); float: left;">
            div1-左浮動，脫離常規(guī)文檔流，緊貼父元素或者上一個同方向浮動
        </div>
        <div style="background: lawngreen; width: 600px; height: 350px; ">
            div2-未浮動，常規(guī)文檔流,
            <br/>PS:此時div1在div2的上方顯示，因為div1和div2是不同文檔流中的元素，顯示互不影響
            如果不想讓div2被浮動元素影響，需要添加clear屬性。
            添加clear: left;之后div2就會忽略div1浮動的影響，在div1層后面顯示，不會重疊了，大家可以自己試驗一下
        </div>
        <div style="background: lightblue; float: right; width: 1800px;">
            div3-右浮動，脫離常規(guī)文檔流，緊貼父元素或者上一個同方向浮動
        </div>
        <div style="background: lightcoral; width: 600px; height: 350px; ">
            div4-未浮動，常規(guī)文檔流,
            <br/>PS:此時div3在div4的上方顯示，因為div3和div4是不同文檔流中的元素，顯示互不影響
            如果不想讓div4被浮動元素影響，需要添加clear屬性。
            添加clear: right;之后div4就會忽略div3浮動的影響，在div3層后面顯示，不會重疊了，大家可以自己試驗一下
            
            clear屬性有三個取值：left、right、both;分別是取出左浮動、有浮動和所有浮動元素的影響
        </div>
        <div style="background: lavender;">
            div5-未浮動，常規(guī)文檔流,
        </div>
    </body>
</html>

12.2 overflow

控制內(nèi)容溢出元素框時顯示的方式。

overflow屬性有以下值：

值	描述
visible	默認值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。
hidden	內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。
scroll	內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
auto	如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
inherit	規(guī)定應該從父元素繼承 overflow 屬性的值。

注意:overflow 屬性只工作于指定高度的塊元素上。

注意: 在 OS X Lion ( Mac 系統(tǒng)) 系統(tǒng)上，滾動條默認是隱藏的，使用的時候才會顯示 (設置 "overflow:scroll" 也是一樣的)。

12.3 Display(顯示) 與 Visibility（可見性）

12.3.1 兩者的區(qū)別

display屬性設置一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。

隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。但是請注意，這兩種方法會產(chǎn)生不同的結果。

visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。

display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

12.3.2 display 改變元素的類型

CSS樣式有以下三個：

display:block -- 顯示為塊級元素
display:inline -- 顯示為內(nèi)聯(lián)元素
display:inline-block -- 顯示為內(nèi)聯(lián)塊元素，表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性

13 復合選擇器

由兩個或多個基礎選擇器，通過不同方式組合而成的。

可以更準確更精細的選擇目標元素標簽。

13.1 全局選擇器

語法：* {} 一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，一般將 * 替換為常用標簽的名稱，并用逗號分隔，其實就是使用并集選擇器。

13.2 并集選擇器

并集選擇器（CSS選擇器分組）是各個選擇器通過,連接而成的，通常用于集體聲明。

語法：選擇器1，選擇器2，......選擇器N{}

意思是多個選擇器都是通用的樣式。任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。

13.3 交集選擇器

條件：交集選擇器由兩個選擇器構成，找到的標簽必須滿足：既有標簽一的特點，也有標簽二的特點。

語法：h3.class{ color:red; }

其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，例如div.list。

交集選擇器是并且的意思。即...又...的意思

例如：   table.bg   選擇的是： 類名為 .bg  的 表格標簽，但用的相對來說比較少。

13.4 后代選擇器

概念：后代選擇器又稱為包含選擇器。

作用：用來選擇元素或元素組的子孫后代。

其寫法就是把外層標簽寫在前面，內(nèi)層標簽寫在后面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。

  格式：父級 子級{屬性:屬性值;屬性:屬性值;}

語法：.class h3{color:red;font-size:16px;}

當標簽發(fā)生嵌套時，內(nèi)層標簽就成為外層標簽的后代。

子孫后代都可以這么選擇。或者說，它能選擇任何包含在內(nèi) 的標簽。

13.5 子元素選擇器

作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。

其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接。

語法：.class>h3{color:red;font-size:14px;}

 比如：  .demo > h3 {color: red;}   說明  h3 一定是demo 親兒子。  demo 元素包含著h3。

13.6 實現(xiàn)代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>復合選擇器</title>
		<style>
			/*全局選擇器：
			 	一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，
			 */
			*{
				color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調*/
			}
			/*并集選擇器：通常用于集體聲明
			 	替換全局選擇器；
			 */
			div,p,dldt,dd{
				/*去掉瀏覽器的默認樣式*/
				margin: 0;
				padding: 0;
				color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調*/
			}
			/*交集選擇器*/
			li.myli{
				color: red;
			}
			/*后代選擇器*/
			ul li{
				font-size: 28px;
			}
			.myUL li{
				font-family: "微軟雅黑";
			}
			.myUL li a{
				text-decoration: line-through;
			}
			/*子元素選擇器*/
			.demo>h3{
				color: red;
			}			
		</style>
		
	</head>
	<body>
		<ul>
			<li>li11111111111</li>
			<li class="myli">li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444<a href="">點擊我試試</a></li>
			<li class="myUL">
				<ul>
					<li>li11111111111</li>
					<li class="myli">li22222222222</li>
					<li>li33333333333</li>
					<li>li44444444444
						<a href="">點擊我試試</a>
					</li>
				</ul>
			</li>
		</ul>
		<ol>
			<li>li11111111111</li>
			<li>li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444</li>
		</ol>
		<div class="demo">
			div1
			<h3>靜夜思</h3>	
			<ul>
				<li><h3>靜夜思----li</h3></li>
			</ul>
		</div>
		
	</body>
</html>

13.6 偽類選擇器

偽類選擇器：和類選擇器相區(qū)別類選擇器是一個點比如 .demo {} 而我們的偽類用 2個點就是冒號比如 :link{} 。

作用：用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果，比如可以選擇第1個，第n個元素。

因為偽類選擇器很多，比如鏈接偽類，結構偽類等等。我們這里先給大家講解鏈接偽類選擇器。

a:link /* 未訪問的鏈接 */
a:visited /* 已訪問的鏈接 */
a:hover /* 鼠標移動到鏈接上 */
a:active /* 選定的鏈接 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>偽類選擇器</title>
		<style>			
			/*偽類選擇器*/			
			a:link{
				color: red;/*默認顏色是紅色*/	
			}
			a:visited{
				color: blue;/*訪問過的頁面是藍色*/	
			}
			a:hover{
				color: green;/*鼠標懸浮是綠色*/	
				font-size: 28px;
			}
			a:active{
				color: gold;/*按下鼠標不放手是金色*/	
				font-family: "微軟雅黑";
			}
		</style>
		
	</head>
	<body>
		<a href="03-常用樣式.html" target="_blank">常用樣式</a>
		<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
		<a href="05-綜合練習.html" target="_blank">綜合練習</a>
	</body>
</html>

注意**

寫的時候，他們的順序盡量不要顛倒按照 lvha(四類的首字母) 的順序。否則可能引起錯誤。
因為叫鏈接偽類，所以都是利用交集選擇器 a:link a:hover
因為a鏈接瀏覽器具有默認樣式，所以我們實際工作中都需要給鏈接單獨指定樣式。
實際開發(fā)中，我們很少寫全四個狀態(tài)，一般我們寫法如下：

a {   /* a是標簽選擇器  所有的鏈接 */
       font-weight: 700;
       font-size: 16px;
       color: gray;
}
a:hover {   /* :hover 是鏈接偽類選擇器 鼠標經(jīng)過 */
       color: red; /*  鼠標經(jīng)過的時候，由原來的 灰色 變成了紅色 */
}

13.7 復合選擇器比對

選擇器	作用	特征	使用情況	隔開符號及用法
后代選擇器	用來選擇元素后代	是選擇所有的子孫后代	較多	符號是空格 p .one
子代選擇器	選擇最近一級元素	只選親兒子	較少	符號是> .nav>p
交集選擇器	選擇兩個標簽交集的部分	既是又是	較少	沒有符號 p.one
并集選擇器	選擇某些相同樣式的選擇器	可以用于集體聲明	較多	符號是逗號 .nav, .header
鏈接偽類選擇器	給鏈接更改狀態(tài)		較多	重點記住 a{} 和 a:hover 實際開發(fā)的寫法

在線咨詢

上一篇：收藏學習｜《政務服務“一網(wǎng)通辦”電子文件歸檔管理技術規(guī)范》
下一篇：Spring Boot 2 + Thymeleaf：表單字段綁定、表單提交處理

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商