在網(wǎng)頁文檔中，標(biāo)題很重要，標(biāo)題很重要，標(biāo)題很重要

TML 標(biāo)題

標(biāo)題（Heading）是通過 <h1> 到<h6> 等標(biāo)簽進(jìn)行定義的。

<h1> 定義最大的標(biāo)題。
<h6> 定義最小的標(biāo)題。

實(shí)際例子

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

注釋：瀏覽器會自動(dòng)地在標(biāo)題的前后添加空行。

注釋：默認(rèn)情況下，HTML 會自動(dòng)地在塊級元素前后添加一個(gè)額外的空行，比如段落、標(biāo)題元素前后。

標(biāo)題很重要

沒標(biāo)題不就看不到我這個(gè)文章啦！！

所以，請確保將 HTML heading 標(biāo)簽只用于標(biāo)題。不要僅僅是為了產(chǎn)生粗體或大號的文本而使用標(biāo)題。

搜索引擎（如：百度，搜狗，360等）使用標(biāo)題為您的網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引。

因?yàn)橛脩艨梢酝ㄟ^標(biāo)題來快速瀏覽您的網(wǎng)頁，所以用標(biāo)題來呈現(xiàn)文檔結(jié)構(gòu)是很重要的。

應(yīng)該將 h1 用作主標(biāo)題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。

水平線

HTML 水平線

<hr /> 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線。

hr 元素可用于分隔內(nèi)容。

實(shí)際例子

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

提示：使用水平線 (<hr> 標(biāo)簽) 來分隔文章中的小節(jié)是一個(gè)辦法（但并不是唯一的辦法）。

HTML 注釋

可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。

注釋是這樣寫的：

實(shí)際例子

<!-- This is a comment -->

注釋：開始括號之后（左邊的括號）需要緊跟一個(gè)嘆號，結(jié)束括號之前（右邊的括號）不需要。

提示：合理地使用注釋可以對未來的代碼編輯工作產(chǎn)生幫助。

HTML 提示 - 如何查看源代碼

您一定曾經(jīng)在看到某個(gè)網(wǎng)頁時(shí)驚嘆道 “WOW! 這是如何實(shí)現(xiàn)的？”

如果您想找到其中的奧秘，只需要單擊右鍵，然后選擇“查看源文件”（IE，總是令人頭疼的存在）或“查看頁面源代碼”（Firefox），其他瀏覽器的做法也是類似的。這么做會打開一個(gè)包含頁面 HTML 代碼的窗口。

知識匯總

標(biāo)簽描述

<html> 定義 HTML 文檔。

<body> 定義文檔的主體。

<h1> to <h6> 定義 HTML 標(biāo)題

<hr> 定義水平線。

<!--> 定義注釋。

請多多關(guān)注我，謝謝。

歡迎提問！！！

性是HTML元素提供的附國信息

HTML元素可以設(shè)置屬性

屬性可以在元素中添加附加信息

屬性一般描述于開始標(biāo)簽

屬性總是以名稱/值對應(yīng)的形式出現(xiàn)，例如：name="value"

例，鏈接地址是href的屬性

<a >鏈接地址是href的屬性</a>

HTML屬性常用引用屬性值

屬性值應(yīng)該始終被包含在引號內(nèi)

雙引號是常用的，單引號也沒有問題，

如果屬性值本身就包含了雙引號，即么則必須引用單引號，例：name='John"ShotGun"Nelson'

HTML提示：使用小寫屬性

屬性和屬性值對大小寫不敏感。

HTML屬性參考

calss 為HMTL元素定義一個(gè)或多個(gè)名

id 定義元素的唯一id

style 規(guī)定元素的行內(nèi)樣式

title 描述元素的額外信息

HTML標(biāo)題

HTML注釋

類似于對代碼進(jìn)行備注，默認(rèn)有兩種試

1、

常用于一小段注釋

2、//注釋有時(shí)候不起作用，不知道為啥，知道的回復(fù)下啦

HTML提示，如何查看源代碼

如果你想看，在網(wǎng)頁中，單擊右鍵，然后選擇查看“源文件”或者醒看頁面源代碼即可；

SS課堂筆記

1、CSS的概念

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

是一種用來表現(xiàn)HTML或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。

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

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

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

這是不是CSS是對HTML進(jìn)行美化和布局作用的最好總結(jié)？

2、CSS的優(yōu)勢

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

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

3、CSS的使用：CSS與html結(jié)合使用

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

3.1 行內(nèi)樣式

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

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

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

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

3.2 內(nèi)部樣式

定義在head標(biāo)簽內(nèi)，通過style標(biāo)簽，該標(biāo)簽內(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標(biāo)簽內(nèi)，定義link標(biāo)簽引入外部樣式文件。

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)樣式表;

同樣的樣式作用在同一個(gè)標(biāo)簽身上：就近原則；不同樣式作用在同一個(gè)標(biāo)簽身上:疊加生效。

4、CSS語法

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

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

例如：

5、CSS注釋

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

CSS注釋以 /* 開始, 以 */ 結(jié)束

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

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

6.1 id選擇器

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

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

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

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

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

6.2 class選擇器

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

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

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個(gè)點(diǎn)"."號顯示：

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

6.3 元素選擇器/標(biāo)簽選擇器

選擇具有相同標(biāo)簽名稱的元素。

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

使用標(biāo)簽選擇器：自動(dòng)使用在所有的同名的標(biāo)簽上

7 優(yōu)先級

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

ID選擇器 > 類選擇器 > 標(biāo)簽選擇器

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

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

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

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

8 CSS常用樣式

8.1 color :字體顏色

跟顏色相關(guān)的取值分3種：

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

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

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

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

8.2 width height:寬高

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

取值方式有2種：

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

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

8.3 背景樣式

8.4 文本樣式

8.5 列表樣式

8.6 邊框樣式

10 HTML&CSS調(diào)試?yán)?/h1>
以谷歌瀏覽器為例說明。
快捷鍵F12或者工具條中的開發(fā)者工具調(diào)出以下內(nèi)容。
在elements中可以看到當(dāng)前頁面的所有標(biāo)簽，在styles中可以看到html元素對應(yīng)的樣式。

11 盒子模型

11.1 概念

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

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

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

盒子模型說明圖：

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

11.2 盒子的寬度和高度

元素的實(shí)際寬度和高度：

當(dāng)我們計(jì)算一個(gè)元素實(shí)際在頁面占有的總寬度計(jì)算公式是這樣的：

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

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

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

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

12 補(bǔ)充常用樣式

12.1 float 浮動(dòng)

12.1.1 什么是浮動(dòng)

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

Float（浮動(dòng)），往往是用于圖像，但它在布局時(shí)一樣非常有用。

12.1.2 元素怎樣浮動(dòng)

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

一個(gè)浮動(dòng)元素會盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/span>

浮動(dòng)元素之后的元素將圍繞它。

浮動(dòng)元素之前的元素將不會受到影響。

12.1.3 彼此相鄰的浮動(dòng)元素

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

12.1.4 clear--清除浮動(dòng)

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

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

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

12.2 overflow

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

overflow屬性有以下值：

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

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

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

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

12.3.1 兩者的區(qū)別

display屬性設(shè)置一個(gè)元素應(yīng)如何顯示，visibility屬性指定一個(gè)元素應(yīng)可見還是隱藏。

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

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

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

12.3.2 display 改變元素的類型

CSS樣式有以下三個(gè)：

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

13 復(fù)合選擇器

由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同方式組合而成的。

可以更準(zhǔn)確更精細(xì)的選擇目標(biāo)元素標(biāo)簽。

13.1 全局選擇器

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

13.2 并集選擇器

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

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

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

13.3 交集選擇器

條件：交集選擇器由兩個(gè)選擇器構(gòu)成，找到的標(biāo)簽必須滿足：既有標(biāo)簽一的特點(diǎn)，也有標(biāo)簽二的特點(diǎn)。

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

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

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

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

13.4 后代選擇器

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

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

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

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

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

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

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

13.5 子元素選擇器

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

其寫法就是把父級標(biāo)簽寫在前面，子級標(biāo)簽寫在后面，中間跟一個(gè) > 進(jìn)行連接。

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

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

13.6 實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>復(fù)合選擇器</title>
		<style>
			/*全局選擇器：
			 	一般去掉標(biāo)簽的一些默認(rèn)效果的時(shí)候使用，或者整站通用效果時(shí)使用。但是不推薦，
			 */
			*{
				color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調(diào)*/
			}
			/*并集選擇器：通常用于集體聲明
			 	替換全局選擇器；
			 */
			div,p,dldt,dd{
				/*去掉瀏覽器的默認(rèn)樣式*/
				margin: 0;
				padding: 0;
				color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調(diào)*/
			}
			/*交集選擇器*/
			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="">點(diǎn)擊我試試</a></li>
			<li class="myUL">
				<ul>
					<li>li11111111111</li>
					<li class="myli">li22222222222</li>
					<li>li33333333333</li>
					<li>li44444444444
						<a href="">點(diǎn)擊我試試</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ū)別類選擇器是一個(gè)點(diǎn) 比如 .demo {} 而我們的偽類用 2個(gè)點(diǎn) 就是冒號比如 :link{} 。

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

因?yàn)閭晤愡x擇器很多，比如鏈接偽類，結(jié)構(gòu)偽類等等。我們這里先給大家講解鏈接偽類選擇器。

a:link /* 未訪問的鏈接 */
a:visited /* 已訪問的鏈接 */
a:hover /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active /* 選定的鏈接 */

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

注意**

寫的時(shí)候，他們的順序盡量不要顛倒按照 lvha(四類的首字母) 的順序。否則可能引起錯(cuò)誤。
因?yàn)榻墟溄觽晤悾远际抢媒患x擇器 a:link a:hover
因?yàn)閍鏈接瀏覽器具有默認(rèn)樣式，所以我們實(shí)際工作中都需要給鏈接單獨(dú)指定樣式。
實(shí)際開發(fā)中，我們很少寫全四個(gè)狀態(tài)，一般我們寫法如下：

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

13.7 復(fù)合選擇器比對

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

在線咨詢

上一篇：表格文字對齊及文字表格內(nèi)換行
下一篇：基于LayUI擴(kuò)展表格Layui-Soul-Tabl

您的項(xiàng)目需求

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

整合營銷服務(wù)商

在網(wǎng)頁文檔中，標(biāo)題很重要，標(biāo)題很重要，標(biāo)題很重要

TML 標(biāo)題

標(biāo)題很重要

HTML 水平線

HTML 注釋

HTML 提示 - 如何查看源代碼

知識匯總

SS課堂筆記

1、CSS的概念

2、CSS的優(yōu)勢

3、CSS的使用：CSS與html結(jié)合使用

3.1 行內(nèi)樣式

3.2 內(nèi)部樣式

3.3 外部樣式

4、CSS語法

5、CSS注釋

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

6.1 id選擇器

6.2 class選擇器

6.3 元素選擇器/標(biāo)簽選擇器

7 優(yōu)先級

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

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

8 CSS常用樣式

8.1 color :字體顏色

8.2 width height:寬高

8.3 背景樣式

8.4 文本樣式

8.5 列表樣式

8.6 邊框樣式

10 HTML&CSS調(diào)試?yán)?/h1>以谷歌瀏覽器為例說明。快捷鍵F12或者工具條中的開發(fā)者工具調(diào)出以下內(nèi)容。在elements中可以看到當(dāng)前頁面的所有標(biāo)簽，在styles中可以看到html元素對應(yīng)的樣式。

11 盒子模型

11.1 概念

11.2 盒子的寬度和高度

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

12 補(bǔ)充常用樣式

12.1 float 浮動(dòng)

12.1.1 什么是浮動(dòng)

12.1.2 元素怎樣浮動(dòng)

12.1.3 彼此相鄰的浮動(dòng)元素

12.1.4 clear--清除浮動(dòng)

12.2 overflow

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

12.3.1 兩者的區(qū)別

12.3.2 display 改變元素的類型

13 復(fù)合選擇器

13.1 全局選擇器

13.2 并集選擇器

13.3 交集選擇器

13.4 后代選擇器

13.5 子元素選擇器

13.6 實(shí)現(xiàn)代碼

13.6 偽類選擇器

13.7 復(fù)合選擇器比對

您的項(xiàng)目需求

10 HTML&CSS調(diào)試?yán)?/h1>
以谷歌瀏覽器為例說明。
快捷鍵F12或者工具條中的開發(fā)者工具調(diào)出以下內(nèi)容。
在elements中可以看到當(dāng)前頁面的所有標(biāo)簽，在styles中可以看到html元素對應(yīng)的樣式。