web基本介紹

1.1 web與html基本介紹

1? web:world wide web縮寫,為全球廣域網(wǎng),俗稱 WWW。

2? web 可以理解為當(dāng)前的一種互聯(lián)網(wǎng)。網(wǎng)站服務(wù)。

3 網(wǎng)站由多個網(wǎng)頁組合后形成一種服務(wù)。

4 web 前端就是來負(fù)責(zé)一個網(wǎng)站當(dāng)中前臺網(wǎng)頁里的內(nèi)容。

5 網(wǎng)頁就是由前端工程師使用 HTML 語言編寫而成的一種文件,它里面會包含 文字 圖片 超鏈接 聲音 視頻......( 網(wǎng)頁本質(zhì)就是一個 html 文件 )

1.2 HTML基本介紹(HyperText markup language 超文本標(biāo)記語言,超意味著表達(dá)的內(nèi)容不僅僅只是文字 )html5

1.3 HTML網(wǎng)頁骨架

1 網(wǎng)頁是我們通過 HTML 語言來書寫。

2 因為我們需要使用 HTML 語言來書寫網(wǎng)頁,所以我們要有相應(yīng)的書寫代碼工具。 ( Hbuilder )

3 在我們使用 HTML 語言去書寫網(wǎng)頁的過程我們會發(fā)現(xiàn)有一些結(jié)構(gòu)是默認(rèn)必須存在的, 這個結(jié)構(gòu)我們就叫做 網(wǎng)頁(html)骨架

? DocType html : 向瀏覽器聲明當(dāng)前的文檔是 Html 類型。? ? ? ? html : 它是網(wǎng)頁當(dāng)中最大的一個標(biāo)簽,我們稱之為根標(biāo)簽? <html>開始? </html>結(jié)束? ? ? head : 網(wǎng)頁頭的部,它里面的內(nèi)容是寫給瀏覽器看的。? ? ? ?? meta : 如果有 charset 那就表示在設(shè)置當(dāng)前網(wǎng)頁的顯示編碼? ? ? ? title: 網(wǎng)頁的標(biāo)題,它里面的內(nèi)容會在瀏覽器的標(biāo)簽頁上顯示? ? ? ? body: 網(wǎng)頁主體,它里面的內(nèi)容會顯示在瀏覽器的空白區(qū)域內(nèi)。

1.4 Hbuilder工具使用

一、設(shè)置主題(工具--視覺主題設(shè)置)

二、設(shè)置字體【若用電腦中不存在的字體,需要先安裝】

三、安裝字體

1.5 HTML語法和標(biāo)簽基本介紹

一、HTML 標(biāo)簽:就是 HTML 語言的發(fā)明者人為定義好的一些"單詞",它就相當(dāng)于我們漢語中的字。

二、語法:用來定義這些 "字" 應(yīng)該如何去解析或者書寫的規(guī)則。

三、HTML 標(biāo)簽中的常見標(biāo)簽及基本語法

1.我們?nèi)藶榈膶?HTML 標(biāo)簽分為單標(biāo)簽 和 雙標(biāo)簽 二種

<標(biāo)簽名稱> [在英文輸入法下輸入]

<標(biāo)簽名/>

2.常見的標(biāo)簽:

(1)標(biāo)題標(biāo)簽 :在 html 當(dāng)中人為定義了六種標(biāo)題分別 h1-h6,它們都是雙標(biāo)簽。在一個網(wǎng) 頁當(dāng)中,我們只允許出現(xiàn)一個 h1。

(2)段落標(biāo)簽:p 雙標(biāo)簽

(3)換行標(biāo)簽: br 單標(biāo)簽? 手動換行無用

(4)空格: 敲幾個都只顯示一個空格

注釋:選中內(nèi)容 contrl+? 或直接敲出來<!- -內(nèi)容- ->? ? ? ? 整體表示一個空格 三個空格表示基本是一個漢子

3.標(biāo)簽書寫語法:在 HTML 當(dāng)中允許多個標(biāo)簽互相嵌套使用,但是不允許交叉嵌套。

1.6 圖片標(biāo)簽

<img src="地址" />? ? <img? />

注意:

1 img 是一個單標(biāo)簽,作用是可在網(wǎng)頁中插入圖片。

2 src 是 img 標(biāo)簽的屬性,它里面的值稱之為屬性值,具體用來表示想要加載的圖片存在哪里。

3 標(biāo)簽的身上可以有屬性,屬性名與標(biāo)簽名之間用空格隔開。

4 屬性值與屬性名之間用 單等號 連接

5 一個標(biāo)簽的身上可以有多個屬性,之間都用空格隔開。

二、圖片常見的屬性

1.Src 設(shè)置圖片所在位置

2.Alt 當(dāng)圖片加載失敗時會顯示它里面的文字

3.Width寬度/height高度? 分別用來設(shè)置圖片寬和 高,如果只設(shè)置了寬度或者高度,那么另外一邊會自動縮放。

4.Title 當(dāng)鼠標(biāo)懸停在圖片上的時候會顯示它里面的文字

1.7鏈接標(biāo)簽

一、語法

<a href="目標(biāo)地址"> </a>內(nèi)容;目標(biāo)地址 http://baidu.com

二、作用? 當(dāng)前頁跳轉(zhuǎn)

可以實現(xiàn)在當(dāng)前頁面向新頁面進(jìn)行跳轉(zhuǎn)的操作

三、屬性

1.Target 這個屬性可以設(shè)置新頁面在哪個窗口打開,當(dāng)值為_blank 的時候可以在新窗口打開。打開新的網(wǎng)頁

2.Href 的屬性值設(shè)置為 # 的時候,可以設(shè)置為空鏈接,它的作用就是當(dāng)用戶點的時候不會發(fā)生跳轉(zhuǎn)。



2.1 路徑

路徑可以看做在程序代碼中用來查找某個具體的資源所 "走"過的路。例如:C:/Users/Administrator/Desktop/_book\img\2.png.

一、絕對路徑

絕 對 路 徑 一 般 是 以 盤 符 為 起 點 來 進(jìn) 行 查 找 , 或 者 就 是 一 個 絕 對 URL 地 址 。https://www.baidu.com/img/bd_logo1.png ,但是在實際的工作中,我們不建議大家使用絕對路徑。

二、相對路徑

相對路徑就是相對某一個已知的文件為起點進(jìn)行資源的查找。

2.2相對路徑用法

路徑是一個通用的存在,我們當(dāng)以查找圖片為例來講解路徑的使用。在實際工作中 相對路徑使用的頻率是最高的。我們?nèi)藶榈膶⑾鄬β窂椒譃槿N:同級路徑、下級路徑、上級路徑。(以查找圖片為例的含義就是我們要在一個 HTML網(wǎng)頁中插入一張 HTML文件之外的圖片,同時采用的是相對路徑,所以這里的相對起點就是 HTML網(wǎng)頁)

1. 同級路徑:同級指的就是 HTML 網(wǎng)頁和目標(biāo)圖片在同一級目錄里。對于同級路徑的使用,我們只需要在 src 中寫入目標(biāo)圖片的名稱即可。

2. 下級路徑:下級指的就是圖片在 html 文件的下級目錄中。此時我們需要使用一個 / 來向下進(jìn)行穿透查找。(***下的***)

3. 上級路徑: 圖片在 html 文件的上級目錄里,此時我們需要使用 ../ 來向上回退進(jìn)行查找。

注:

01 上述的路徑規(guī)則雖是以查找圖片為例,但總結(jié)出的規(guī)律適用于其它類型資源的查找。

02 / 表示向下級查找,可以無限級穿透。 ../ 表示向上級返回,同樣可以無限級返回。


2.3 表單基本介紹

表單是一種在互聯(lián)網(wǎng)上用于收集用戶信息的一種結(jié)構(gòu),在HTML 當(dāng)中事先定義好一個標(biāo)簽來完成這件事。標(biāo)簽名稱叫 form ,它是一個雙標(biāo)簽,我們稱之為表單域。? <form action="" method="">

eg:? 用戶名:<input type="text"/>? <input type="submit"/>

注:

01 form 標(biāo)簽就是 HTML 當(dāng)中定義好的一個用來表示整個表單結(jié)構(gòu)的雙標(biāo)簽,我們稱之為表單域。

02 form 默認(rèn)就相當(dāng)于一張"白紙",如果想讓它收集用戶的相關(guān)信息,HTML 里又準(zhǔn)備了很多的表單標(biāo)簽。這些標(biāo)簽里 使用最多的一個叫 input,type是input的屬性

03 action 屬性值表示將當(dāng)前表單中的數(shù)據(jù)提交到哪些。

04 method 屬性值表示以 什么樣試來提交當(dāng)前表單中的數(shù)據(jù)。最常見的是get、post 。其中 get 方式是指將數(shù)據(jù)在 URL 中進(jìn)行提交,這種方式是明文,所以相對不安全。而 POST 方式就是指將數(shù)據(jù)寫在 HTTP 請求的 請求體當(dāng)中( )。

2.4常見的表單元素

From 標(biāo)簽只負(fù)責(zé)定義具體的表單整體,它里面如果想要收集用戶數(shù)據(jù),就必須再有一些能夠讓用戶進(jìn)行輸入填寫的模塊,此時 HTML 當(dāng)中就定義許多的 表單標(biāo)簽 來讓用戶完成輸入。最常見的表單標(biāo)簽就是 Input ,因為標(biāo)簽名稱都叫 input ,所以 HTML 當(dāng)中就設(shè)置通過 type 屬性來進(jìn)行區(qū)分。

01 文本輸入框:<input type="text"/>?

02 密碼輸入框: <input type="password"/>

03 提交按鈕:<input type="submit"/>

04 單選框: <input type="radio"/>? ?

eg:<input type="radio" name="xingming"/> 男? ? ? ? ? ? ? ? ? ? ? <input type="radio" name="xingming"/>女

<input type="radio" name="xingming" checked/>女(checked系統(tǒng)會默認(rèn)選女)

05 復(fù)選框:? <input type="checkbox"/>

eg:<input type="radio"/>吃飯? <input type="radio"/>學(xué)習(xí)

06 文本域: <textarea rows="行數(shù)" cols="列數(shù)"> </textarea>

07 下拉框:

<select>

? ? ? <option value="">選項1 </option>

? ? ? ...........

</select>

08 重置按鈕: <input type="reset"/>

09 普通按鈕: <input type="button" value="按鈕" />


2.5表單元素注意細(xì)節(jié)

1 name 屬性:form 表單通過不同的表單元素來收集數(shù)據(jù),在這個過程中很多的表單元素名稱都叫 input ,此時如果直接將這些數(shù)據(jù)提交到后臺,就會出現(xiàn)這些數(shù)據(jù)無法區(qū)分的問題,此時為了分別哪個數(shù)屬于什么樣的表單項。我們就人為的在 Input 身上設(shè)置 name 屬性。這樣一來數(shù)據(jù)到達(dá)后端之后就會變成以下格式: username="syy" pwd="123" gender="男"....

2 value: 它的作用就是定義某些表單元素的默認(rèn)顯示內(nèi)容( 文本輸入框、提交按鈕、重置按鈕、普通按鈕 )

3 checked: 這是一個屬性并且它的屬性值就等于這個屬性名。用來設(shè)置單選和復(fù)選框中的默認(rèn)被選中的某些。

4 selected:這也是一個屬性值等于屬性名的屬性,添加在下拉選項身上實現(xiàn)某個選項被默認(rèn)選中。



2.6 CSS基本介紹

一、web 標(biāo)準(zhǔn),規(guī)范網(wǎng)頁書寫的要求,由 W3C 組織制定,即網(wǎng)頁的 結(jié)構(gòu)、樣式、行為 三者相分離。

二、名詞解釋

1.結(jié)構(gòu):就是通過 HTML 標(biāo)簽搭建的網(wǎng)頁的結(jié)構(gòu)。

2.樣式:就是通過 CSS 對當(dāng)前的網(wǎng)頁結(jié)構(gòu)進(jìn)行修飾和美化

3.行為:通過 JS 讓網(wǎng)頁可以理解用戶的一些操作。從而用戶與網(wǎng)頁之間產(chǎn)生交互。

2.7 CSS基本使用

一、定義:Css 在國內(nèi)被稱之為級聯(lián)樣式表、層疊樣式表、樣式表,作用是修飾當(dāng)前網(wǎng)頁中的 HTML 元素。

二、基本使用步驟

1.CSS 與 HTML 可以看做是二門 互相獨立的語言, 此時如果想用 CSS 來操作 HTML 那么就需要先將二者建立關(guān)系。

2.在 HTML 當(dāng)中就準(zhǔn)備了一個叫 style 的標(biāo)簽( 它是一個雙標(biāo)簽 ),在這個標(biāo)簽對之間就可以用來書寫我們的 CSS 代碼。常見的存放位置可以是 head 標(biāo)簽里 title 標(biāo)簽下。

3.通過 CSS 的選擇器找到我們想要操作的元素然給它設(shè)置樣式( 寫在 style 標(biāo)簽之中)

2.8體驗CSS

1. 常見的 CSS 元素屬性:width 定義元素寬度單位是 px , height 定義高度,background-color設(shè)置背景顏色。color設(shè)置文字顏色

p{

width:200px;

heigh:200px;

background-color:green;

}

2. CSS 代碼書寫的固定語法: 選擇器{ CSS 代碼}

3. 建議大家在開發(fā)階段將 CSS 樣式分行寫,且每行的結(jié)尾用 ; 結(jié)束

2.9 CSS選擇器

一、定義

CSS 選擇器即 CSS 中已經(jīng)定義好的用來選中某些元素的固定語法。它的作用就是選中我們想要設(shè)置樣式的元素。

二、CSS 選擇器的分類

在 CSS 中有很多種選擇器,我們?nèi)藶榈姆殖啥箢悾?簡單選擇器 + 復(fù)合選擇器。

三、簡單選擇器:

1.標(biāo)簽名選擇器:通過具體的 HTML 標(biāo)簽名稱來選擇元素。【會將當(dāng)前網(wǎng)頁中所有叫該名字的標(biāo)簽都選中】

2.類名選擇器:通過標(biāo)簽類名來選擇元素

3.Id 選擇器:通過 id 名稱選擇元素。

2.10類名選擇器

一、為什么需要類名選擇器:一個完整的網(wǎng)頁需要很多標(biāo)簽組合在一起進(jìn)行編寫實現(xiàn),因為 HTML 標(biāo)簽的種類有限,所以同名的一個標(biāo)簽有可以會在一個網(wǎng)頁中出現(xiàn)多次。 此時如果想對這些同名的標(biāo)簽分別設(shè)置不相同的樣式。那么直接使用標(biāo)簽名選擇器就沒有辦法實現(xiàn)。這種情況下我們就可以使用類名選擇器。

二、類名選擇器的基本使用步驟

1.定義 HTML 網(wǎng)頁結(jié)構(gòu),然后在我們想選中的元素身上設(shè)置 class 屬性。

2.將我們想要一起選中的元素們 身上設(shè)置相同的 class 屬性值( 類名)

3.此時我們只需要在 style 標(biāo)簽中按著固定的語法來調(diào)用我們的類名: .類名 eg:.aa

2.11 Id選擇器

一、為什么需要 id 選擇器

如果我們只想從一堆元素當(dāng)中選中其中的某一個元素,那么就可以使用 id 選擇器。這個 id 就和人的身份證號是一樣的。

二、Id 選擇器使用

1.在我們想要選中的元素身上設(shè)置一個 id 屬性。

2.給這個 id 屬性設(shè)置一個值,我稱為 id 名。

3.在 style 當(dāng)中通過固定的語法來進(jìn)行調(diào)用: #id 名{}? eg #aa{}

4.注:要求在一個網(wǎng)頁當(dāng)中不能出現(xiàn)同名的 id 值【雖然有效果但也不能這么做】

2.12簡單選擇器總結(jié)

1. 標(biāo)簽名選擇器和類名選擇器一般一次可選中多個元素,id 名選擇器一次只能選中一個元素。

2. 一個標(biāo)簽的身上可以既具有類名又具有 id 名,且這二個屬性值是可以相同的。

3. 允許一個標(biāo)簽的身上同時設(shè)置多個類名,要求多個類名之間用空格隔開。

4. 關(guān)于 id 選擇器要求一個頁面當(dāng)中同一個 id 名稱只能出現(xiàn)一次。

2.13 id名與類名命名規(guī)則

1. 名稱不能是純數(shù)字或者以數(shù)字開頭( 但是我們經(jīng)常會以數(shù)字結(jié)尾)

2. 名稱不能使用中文

3. 名稱不能以特殊字符開頭或包含特殊字符(但是可以出現(xiàn)-_)

4. 起名字時要做到見名知意


3.1元素展示類型?

在 HTML 當(dāng)中本身定義了很多的元素,這些元素默認(rèn)在網(wǎng)頁上展示的時候會存在自已默認(rèn)的狀態(tài),例如有些元素默認(rèn)情況下寬高屬性不起作用,有些元素默認(rèn)情況下都獨占一行顯示。 這種現(xiàn)象我們就稱之為元素展示類型,為了記憶我們?nèi)藶榈膶⒃卣故绢愋头譃槿N:塊元素、行內(nèi)元素、行內(nèi)塊元素。?

1. 塊元素:當(dāng)同時存在多個塊元素的時候,每個塊元素都會獨占一行顯示,且默認(rèn)情況下它的寬高屬性可以起作用。?

2. 行內(nèi)元素:當(dāng)同時存在多個行內(nèi)元素的時候,這些元素都會顯示在一行,如果一行放不下自動折行。默認(rèn)情況下它的寬高屬性不起作用?

3. 行內(nèi)塊元素:當(dāng)同時存多個行內(nèi)塊元素的時候,這些元素會顯示在一行,默認(rèn)情況下它的寬高屬性起作用。?

4. 注:不需要去死記哪些元素是行內(nèi),哪些是塊,哪些是行內(nèi)快

3.2布局標(biāo)簽補充?

1. div 標(biāo)簽,是 HTML 當(dāng)中定義好的一個雙標(biāo)簽( DIV+CSS )。我們?nèi)藶榈恼J(rèn)為它是一個體積最大的標(biāo)簽。 (里面可放很多的其它標(biāo)簽)(塊元素)

2. span 標(biāo)簽,它也是一個雙標(biāo)簽,主要用來放文字,我們?nèi)藶榈恼J(rèn)為這體積很小。 (行內(nèi)元素)

3. 段落標(biāo)簽里不能包裹標(biāo)題,因為瀏覽器不能正常解析。?

3.3元素展示類型轉(zhuǎn)換?

在我們進(jìn)行網(wǎng)頁布局過程中往往會遇到一些"特殊的模塊",對于這種模塊來說我們之前的一些常見標(biāo)簽在使用的時候就會顯示 "語義" 有些不對應(yīng),所以我們可以使用相應(yīng)的標(biāo)簽進(jìn)行強(qiáng)制的類型轉(zhuǎn)換,從而讓它可以展示成 設(shè)計稿 上的樣子。在 CSS 當(dāng)中有一個 display 屬性,可以設(shè)置不同的值來完成元素類型的轉(zhuǎn)換。?

1. 轉(zhuǎn)成塊元素:display:block;?

2. 轉(zhuǎn)成行內(nèi)塊:display:inline-block?

3. 轉(zhuǎn)成行內(nèi)元素:display:inline; ? ? ? ? ? none?

3.4簡單選擇器權(quán)重?

權(quán)重:我們就可以理解為是不同類型的 CSS 選擇器在對同一個元素進(jìn)行樣式設(shè)置的時候,出現(xiàn)的控制能力不同的現(xiàn)象。?

對于簡單選擇器來說 : id 選擇器 》 類名選擇器 》 標(biāo)簽名選擇器?

3.5 CSS特性?

1. 在權(quán)重相同的情況下,同一個元素后寫的 CSS 樣式會覆蓋先寫的 CSS 樣式?!靖采w性】?

2. CSS 的定義存在繼承的特點,子元素會繼承父元素的一些樣式【繼承性】?

(1) 不是所有的 CSS 屬性都可以被繼承。?

(2) 不是所有類型的元素都會去繼承祖先元素的樣式( 繼承一般發(fā)生在塊元素的身上)?

(3) 繼承指的就是子元素可以使用祖先元素的一些樣式?

3. 不同選擇器對同一個元素的 CSS 控制能力存在著強(qiáng)弱。【優(yōu)先級】?

3.6復(fù)合選擇器?

一、為什么需要復(fù)合選擇器?

在實際的網(wǎng)頁制做過程中往往會出現(xiàn)很多結(jié)構(gòu)層級嵌套很深的現(xiàn)象, 而這種結(jié)構(gòu)模塊又很多,大家使用的標(biāo)簽名稱又一樣。所以此時我們就可以通過復(fù)合選擇器,將這些簡單選擇器進(jìn)行組合。從而讓我們選擇元素變得簡單。?

二、常見的復(fù)合選擇器:?

1.后代選擇器:這種選擇器就是以某一個元素為起點,將它做為祖先然后不停的向下進(jìn)行穿透查找,去選擇它下面的后代元素。 (eg:div span{};div為祖先 查找后代中標(biāo)簽為span的元素)

起點元素 后代元素 .....{ 設(shè)置樣式}?

注: 01 后代選擇器當(dāng)中的每個部分都可以采用任意的簡單選擇器代替。 ? ? 02 不同的部分之間要用空格隔開。 ? ? 03 ...... 就表示可以不停的向下層查找。?

2.并列選擇器:就是將多個選擇器使用 逗號 (英文,)進(jìn)行連接,表示同時選中這些元素,然后設(shè)置相同的樣式。其中每個部分的選擇器都可以由任意類型的選擇器構(gòu)成。?

3.7選擇器權(quán)重總結(jié)?

1 簡單選擇器: id 名 》 class 名 》 element 名?

2 復(fù)合選擇器: 需要在大家明白的就是復(fù)合選擇器由多個其它類型選擇器組合而成,為了方便比較,我們?nèi)藶榈慕o每個簡單選擇器都定義了一個數(shù)值,分別是: Id(100) ?類名class(10) 標(biāo)簽名ele(1),這三個數(shù)值我們也稱之為權(quán)重值,有了它們之后只需要將當(dāng)前選擇器中出現(xiàn)的權(quán)重值進(jìn)行相加求,最終的結(jié)果就是該選擇器的權(quán)重。數(shù)值越大的權(quán)重越大?

3 切記權(quán)重比的就是不同選擇器對同一個元素的控制力比較( 區(qū)別繼承的影響 )?

3.8 CSS文件存放位置?

CSS 代碼可以被我們放在很多的地方,習(xí)慣性的有三種寫法:內(nèi)嵌 CSS 、外鏈 CSS、行內(nèi)CSS 。?

1. 內(nèi)嵌 CSS 指的就是將 CSS 代碼寫在 html 網(wǎng)頁中。?

2. 外鏈 CSS 指的就是就將 CSS 代碼寫在外部的獨立 CSS 文件中。?

3. 行內(nèi) CSS 指的就是將 CSS 代碼寫在具體的 HTML 標(biāo)簽身上 。?

注:?

01 依據(jù)瀏覽器渲染頁面原理,我們選將 CSS 代碼寫在 HTML 文件靠前的位置。?

02 使用外鏈 CSS 寫法的時候,外部獨立的 CSS 文件當(dāng)中不需要寫 style 標(biāo)簽,同時還需通過 link 標(biāo)簽將某個 CSS 文件引入到具體的 HTML 文件當(dāng)中。 rel 屬性對不要省略 】 【<link href="目錄 CSS 文件路徑" type="text/css" rel="stylesheet" />?

03 對于上述的三種 CSS 文件存放位置來說,行內(nèi) CSS 的權(quán)重是最高,但是外鏈與內(nèi)嵌并不存在誰一定大于誰的現(xiàn)象( 權(quán)重 ),它的控制能力完全取決于各自所使用的選擇器權(quán)重。?

04 如果想要直接將某一個樣式的權(quán)提至最高,我們只需要在該句 CSS 代碼的最后設(shè)置!important .?

P{ color:pink!important; }?

3.9音頻標(biāo)簽?

<audio autoplay controls loop>

? ? ? ? 降級的說明性文字?

? ? ? ? <source src="格式 1 路徑" />?

? ? ? ? .......

</audio>

注:?

01 audio 是一個雙標(biāo)簽,用來定義一個聲音資源模塊。?

02 autoplay 用來設(shè)置自動播放(有的瀏覽器都不支持)。?

03 controls 調(diào)用當(dāng)前設(shè)備的播放控制。?

04 loop 設(shè)置當(dāng)前音頻循環(huán)播放。?

05 默認(rèn) audio 里的文字不顯示,只有在當(dāng)前瀏覽器不支持這個標(biāo)簽的時候會顯示文字。?

視頻標(biāo)簽:video,特點基本與音頻標(biāo)簽相同

3.10常見的文字樣式?

1. 行高: line-height, 當(dāng)我們將行高的大小設(shè)置成當(dāng)前元素的高度時,可以實現(xiàn)單行文本在當(dāng)前元素中垂直方向居中顯示的效果。?

2. 水平對齊方式:text-align: left | center | right ,分別表示設(shè)置文字在當(dāng)前盒子當(dāng)中水平的對齊。?

3. 字體大小: font-size ,單位是 px ,一般情況下瀏覽器都會有一個最小的顯示字體。?

4. 字體粗細(xì): font-weight,可以設(shè)置關(guān)鍵字,或者數(shù)值( 100-900 ). 關(guān)鍵字有 normal 表示正常,還有 bold 表示加粗。?

5. 字體名稱: font-family ,一般常用的就是 "微軟雅黑""黑體"?

6. 字體顏色: color ,可以設(shè)置顏色單詞,還可以是十六進(jìn)制的數(shù)字。?



4.1文字陰影?

一、字體樣縮寫?

Font: 文字粗細(xì) 大小/行高 字體名稱;?

Font: bold 20px/200px '微軟雅黑';?

二、CSS3 中的文字陰影?

Text-shadow: x y r color;?

Text-shadow: 0px 0px 0px red;?

注:?

01 x 表示陰影在水平方向的偏移量,可以設(shè)置負(fù)值,正負(fù)不表示大小,只表示方向。水平向右為正,向左為負(fù),單位是px?

02 y 表示陰影在垂直方向的偏移量,垂直向上為負(fù),向下為正?

03 r 表示陰影的模糊程度,數(shù)值越大陰影越模糊 ,單位px?

04 color 表示陰影的顏色?

05 C3 允許一段文字有多層陰影,多層之間用逗號隔開,每一層內(nèi),不同參數(shù)之間用空格隔開。?

4.2過渡屬性?

過渡屬性的作用就是在元素的默認(rèn)樣式與最終樣式變化之間產(chǎn)生一個過程。在 C3 中新增了一個屬性叫transition?

Transition: all 1s linear 0s;?

注:?

01 第一個參數(shù)的作用是設(shè)置元素身上的哪些屬性產(chǎn)生過渡,一般用 all 表示所有的屬性都過渡。?

02 第二個參數(shù)的作用設(shè)置過渡需要時長,單位是 s 不要省略?

03 第三個參數(shù)的作用設(shè)置過渡的動畫形式,linear 表示勻速?

04 第四個參數(shù)設(shè)置當(dāng)前過渡等待多久之后才會執(zhí)行( 延時 )。即使為 0 ,單位也不能省。?

05 :hover 選擇某個元素被鼠標(biāo)移上時的狀態(tài)。?

06 transition 這個屬性既可以添加在元素默認(rèn)狀態(tài),也可以添加在鼠標(biāo)移上狀態(tài),區(qū)別就是第二種做法在鼠標(biāo)離開的時候不會在有過渡變化。?

:hover就是一個選擇器

div:hover選中的就是div元素被鼠標(biāo)移上時的狀態(tài)

最后編輯于
?著作權(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ù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,801評論 1 45
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,115評論 1 92
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,930評論 0 0
  • 概要 64學(xué)時 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,799評論 0 3
  • --- 學(xué)習(xí)目標(biāo): - 了解常用瀏覽器 - 掌握WEB標(biāo)準(zhǔn) - 理解標(biāo)簽語義化 - 掌握常用的排版標(biāo)簽 ...
    紅豆丁244閱讀 1,433評論 0 2

友情鏈接更多精彩內(nèi)容