柚子快報(bào)激活碼778899分享：前端 HTML5與CSS3

http://yzkb.51969.com/

不會大量的詳解，因?yàn)閷懗鰜硗耆珱]辦法跟W3C和MDN進(jìn)行對比，所以具體的語法屬性還是需要去這兩個(gè)網(wǎng)站查閱，還可以在網(wǎng)站上編寫實(shí)時(shí)效果

MDN Web Docs (mozilla.org)

CSS前置知識

元素的語義化

元素的語義化：用正確的元素做正確的事情標(biāo)簽語義化的好處

方便代碼維護(hù)減少讓開發(fā)者之間的溝通成本能讓語音合成工具正確識別網(wǎng)頁元素的用途，以便作出正確的反應(yīng)有利于SEO

什么是SEO？

搜索引擎優(yōu)化（英語：search engine optimization，縮寫為SEO）是通過了解搜索引擎的運(yùn)作規(guī)則來調(diào)整網(wǎng)站，以及提高網(wǎng)站在有關(guān)搜索引擎內(nèi)排名的方式

認(rèn)識字符編碼

計(jì)算機(jī)是干什么的?

計(jì)算機(jī)一開始發(fā)明出來時(shí)是用來解決數(shù)字計(jì)算問題的，后來人們發(fā)現(xiàn)，計(jì)算機(jī)還可以做更多的事，例如文本處理。但計(jì)算機(jī)其實(shí)挺笨的，它只“認(rèn)識”010110111000…這樣由0和1兩個(gè)數(shù)字組成的二進(jìn)制數(shù)字這是因?yàn)橛?jì)算機(jī)的底層硬件實(shí)現(xiàn)就是用電路的開和閉兩種狀態(tài)來表示0和1兩個(gè)數(shù)字的因此，計(jì)算機(jī)只可以直接存儲和處理二進(jìn)制數(shù)字 為了在計(jì)算機(jī)上也能表示、存儲和處理像文字、符號等等之類的字符，就必須將這些字符轉(zhuǎn)換成二進(jìn)制數(shù)字

當(dāng)然，肯定不是我們想怎么轉(zhuǎn)換就怎么轉(zhuǎn)換，否則就會造成同一段二進(jìn)制數(shù)字在不同計(jì)算機(jī)上顯示出來的字符不一樣的情況，因此必須得定一個(gè)統(tǒng)一的、標(biāo)準(zhǔn)的轉(zhuǎn)換規(guī)則

字符編碼的發(fā)展歷史可以閱讀coderwhy的簡書一篇文章：https://www.jianshu.com/p/899e749be47c

邂逅CSS

認(rèn)識CSS

CSS表示層疊樣式表（Cascading Style Sheet，簡稱：CSS，又稱為又稱串樣式列表、級聯(lián)樣式表、串接樣式表、階層式樣式表） 是為網(wǎng)頁添加樣式的代碼

CSS如何編寫呢？

聲明（Declaration）一個(gè)單獨(dú)的CSS規(guī)則，如 color: red; 用來指定添加的CSS樣式。

屬性名（Property name）：要添加的css規(guī)則的名稱屬性值（Property value）：要添加的css規(guī)則的值；

如何將CSS樣式應(yīng)用到元素上？

CSS提供了3種方法，可以將CSS樣式應(yīng)用到元素上：

內(nèi)聯(lián)樣式（inline style）內(nèi)部樣式表（internal style sheet）、文檔樣式表（document style sheet）、內(nèi)嵌樣式表（embed style sheet）外部樣式表（external style sheet）

內(nèi)聯(lián)樣式（inline style）

內(nèi)聯(lián)樣式（inline style），也有人翻譯成行內(nèi)樣式

內(nèi)聯(lián)樣式表存在于HTML元素的style屬性之中 CSS樣式之間用分號;隔開，建議每條CSS樣式后面都加上分號; 很多資料不推薦這種寫法： 在原生的HTML編寫過程中確實(shí)這種寫法是不推薦的 在Vue的template中某些動態(tài)的樣式是會使用內(nèi)聯(lián)樣式的 所以，內(nèi)聯(lián)樣式的寫法依然需要掌握

內(nèi)部樣式表（internal style sheet）

將CSS放在HTML文件元素里的

在Vue的開發(fā)過程中，每個(gè)組件也會有一個(gè)style元素，和內(nèi)部樣式表非常的相似（原理并不相同）

外部樣式表（external style sheet）

外部樣式表（external style sheet） 是將css編寫一個(gè)獨(dú)立的文件中，并且通過元素引入進(jìn)來；使用外部樣式表主要分成兩個(gè)步驟：

第一步：將css樣式在一個(gè)獨(dú)立的css文件中編寫（后綴名為.css）第二步：通過元素引入進(jìn)來

@import

可以在style元素或者CSS文件中使用@import導(dǎo)入其他的CSS文件

必須掌握的CSS屬性

CSS屬性的官方文檔

CSS官方文檔地址

https://www.w3.org/TR/?tag=css CSS推薦文檔地址：

CSS 參考 - CSS：層疊樣式表 | MDN (mozilla.org) 由于瀏覽器版本、CSS版本等問題，查詢某些CSS是否可用：

可以到https://caniuse.com/查詢CSS屬性的可用性；

CSS顏色的表示方法

在CSS中，顏色，有以下幾種表示方法： 顏色關(guān)鍵字（color keywords）：

是不區(qū)分大小寫的標(biāo)識符，它表示一個(gè)具體的顏色可以表示哪些顏色呢？https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#%E8%AF%AD%E6%B3%95 RGB顏色：

RGB是一種色彩空間，通過R（red，紅色）、G（green，綠色）、B（blue，藍(lán)色）三原色來組成了不同的顏色 也就是通過調(diào)整這三個(gè)顏色不同的比例，可以組合成其他的顏色；

RGB各個(gè)原色的取值范圍是 0~255

RGB的表示方法

RGB顏色可以通過以#為前綴的十六進(jìn)制字符和函數(shù)（rgb()、rgba()）標(biāo)記表示 方式一：十六進(jìn)制符號：#RRGGBB[AA]

R（紅）、G（綠）、B （藍(lán)）和A （alpha）是十六進(jìn)制字符（0–9、A–F）；A是可選的比如，#ff0000等價(jià)于#ff0000ff 方式二：十六進(jìn)制符號：#RGB[A]

R（紅）、G（綠）、B （藍(lán)）和A （alpha）是十六進(jìn)制字符（0–9、A–F） 三位數(shù)符號（#RGB）是六位數(shù)形式（#RRGGBB）的減縮版 比如，#f09和#ff0099表示同一顏色 四位數(shù)符號（#RGBA）是八位數(shù)形式（#RRGGBBAA）的減縮版 比如，#0f38和#00ff3388表示相同顏色

方式三：函數(shù)符： rgb[a](R, G, B[, A])R（紅）、G（綠）、B （藍(lán)）可以是（數(shù)字），或者（百分比），255相當(dāng)于100%A（alpha）可以是0到1之間的數(shù)字，或者百分比，數(shù)字1相當(dāng)于100%（完全不透明）

CSS屬性-文本

CSS屬性 – text-decoration(常用)

text-decoration用于設(shè)置文字的裝飾線

decoration是裝飾/裝飾品的意思; text-decoration有如下常見取值:

none：無任何裝飾線 可以去除a元素默認(rèn)的下劃線 underline：下劃線 overline：上劃線 line-through：中劃線（刪除線）

text-transform(一般)

text-indent(一般)

text-align(重要)

text-align: 直接翻譯過來設(shè)置文本的對齊方式MDN: 定義行內(nèi)內(nèi)容（例如文字）如何相對它的塊父元素對齊(但也不是完全準(zhǔn)確，如果div里面還有div，對內(nèi)部塊級元素居中不了)

如何解決這個(gè)問題：

加上display:inline-block將元素呈遞為行內(nèi)塊狀元素，同時(shí)又保留了塊狀元素可以設(shè)置寬高的特性 既能夠設(shè)置寬高，又不獨(dú)自占據(jù)一行。 保留上下外邊距/內(nèi)邊距。 不添加換行符，因此該元素可以位于其他元素旁邊。 內(nèi)容撐開寬度。 使用margin:0 auto

常用的值

left：左對齊right：右對齊center：正中間顯示justify：兩端對齊 W3C中的解釋:

letter-spacing、word-spacing(一般)

letter-spacing、word-spacing分別用于設(shè)置字母、單詞之間的間距。默認(rèn)是0，可以設(shè)置為負(fù)數(shù)

CSS屬性-字體

font-size(重要)

font-size決定文字的大小 常用的設(shè)置

具體數(shù)值+單位(比如100px) 也可以使用em單位(不推薦)：1em代表100%，2em代表200%，0.5em代表50% 百分比 基于父元素的font-size計(jì)算，比如50%表示等于父元素font-size的一半

font-family (重要, 不過一般僅設(shè)置一次)

font-family用于設(shè)置文字的字體名稱

可以設(shè)置1個(gè)或者多個(gè)字體名稱; 瀏覽器會選擇列表中第一個(gè)該計(jì)算機(jī)上有安裝的字體; 或者是通過 @font-face 指定的可以直接下載的字體

比如你們公司設(shè)置了字體，但是用戶的電腦上是沒有這個(gè)字體，顯示不了的，那就可以通過加載網(wǎng)頁的時(shí)候直接將字體一起從網(wǎng)上下載下來使用

font-weight(重要)

font-weight用于設(shè)置文字的粗細(xì)（重量） 常見的取值:

**100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：**每一個(gè)數(shù)字表示一個(gè)重量normal：等于400bold：等于700 strong、b、h1~h6等標(biāo)簽的font-weight默認(rèn)就是bold

font-style(一般)

font-variant(了解)

font-variant(了解)

line-height(常用)

line-height用于設(shè)置文本的行高

行高可以先簡單理解為一行文字所占據(jù)的高度

行高的嚴(yán)格定義是：兩行文字基線（baseline）之間的間距基線（baseline）：與小寫字母x最底部對齊的線

注意區(qū)分height和line-height的區(qū)別

height：元素的整體高度line-height：元素中每一行文字所占據(jù)的高度 應(yīng)用實(shí)例：假設(shè)div中只有一行文字，如何讓這行文字在div內(nèi)部垂直居中

讓line-height等同于div的height

font

font是一個(gè)縮寫屬性

font 屬性可以用來作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡寫font-style font-variant font-weight font-size/line-height font-family 規(guī)則:

font-style、font-variant、font-weight可以隨意調(diào)換順序，也可以省略/line-height可以省略，如果不省略，必須跟在font-size后面font-size、font-family不可以調(diào)換順序，不可以省略

CSS常見選擇器

CSS選擇器（selector）

開發(fā)中經(jīng)常需要找到特定的網(wǎng)頁元素進(jìn)行設(shè)置樣式

思考：如何找到特定的那個(gè)元素？ 什么是CSS選擇器

按照一定的規(guī)則選出符合條件的元素，為之添加CSS樣式 選擇器的種類繁多，大概可以這么歸類

通用選擇器（universal selector）元素選擇器（type selectors）類選擇器（class selectors）id選擇器（id selectors）屬性選擇器（attribute selectors）組合（combinators）偽類（pseudo-classes）偽元素（pseudo-elements）

通用選擇器

通用選擇器（universal selector）

所有的元素都會被選中;使用* 一般用來給所有元素作一些通用性的設(shè)置

比如內(nèi)邊距、外邊距;比如重置一些內(nèi)容 效率比較低，盡量不要使用

簡單選擇器

簡單選擇器是開發(fā)中用的最多的選擇器:

元素選擇器（type selectors）, 使用元素的名稱;類選擇器（class selectors）, 使用 .類名id選擇器（id selectors）, 使用 #id;

id注意事項(xiàng)

一個(gè)HTML文檔里面的id值是唯一的，不能重復(fù)

id值如果由多個(gè)單詞組成，單詞之間可以用中劃線-、下劃線_連接，也可以使用駝峰標(biāo)識最好不要用標(biāo)簽名作為id值 中劃線又叫連字符（hyphen）

屬性選擇器(attribute selectors)

擁有某一個(gè)屬性 [att]屬性等于某個(gè)值 [att=val]

后代選擇器（descendant combinator）

后代選擇器一: 所有的后代(直接/間接的后代)

選擇器之間以空格分割

后代選擇器二: 直接子代選擇器(必須是直接子代)

選擇器之間以 > 分割;

兄弟選擇器(sibling combinator)

兄弟選擇器一:相鄰兄弟選擇器

使用符號 + 連接

兄弟選擇器二: 普遍兄弟選擇器 ~

使用符號 ~ 連接

選擇器組 – 交集選擇器

交集選擇器: 需要同時(shí)符合兩個(gè)選擇器條件(兩個(gè)選擇器緊密連接) 在開發(fā)中通常為了精準(zhǔn)的選擇某一個(gè)元素

如下的div.one，既是一個(gè)div也得是一個(gè)類名為one的(div和.one之間沒有空格，是連著寫的)。而不是說div下的one

并集選擇器: 符合一個(gè)選擇器條件即可(兩個(gè)選擇器以,號分割)

在開發(fā)中通常為了給多個(gè)元素設(shè)置相同的樣式;

認(rèn)識偽類

什么是偽類呢?

Pseudo-classes: 翻譯過來是偽類偽類是選擇器的一種，它用于選擇處于特定狀態(tài)的元素; 比如我們經(jīng)常會實(shí)現(xiàn)的: 當(dāng)手指放在一個(gè)元素上時(shí), 顯示另外一個(gè)顏色

偽類(pseudo-classes)

常見的偽類動態(tài)偽類（dynamic pseudo-classes）:link、:visited、:hover、:active、:focus目標(biāo)偽類（target pseudo-classes）:target語言偽類（language pseudo-classes）:lang( )元素狀態(tài)偽類（UI element states pseudo-classes）:enabled、:disabled、:checked結(jié)構(gòu)偽類（structural pseudo-classes）(后續(xù)學(xué)習(xí)):nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last- >of-type( ):first-child、:last-child、:first-of-type、:last-of-type:root、:only-child、:only-of-type、:empty否定偽類（negation pseudo-classes）(后續(xù)學(xué)習(xí)):not()

所有的偽類: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

動態(tài)偽類（dynamic pseudo-classes)

使用舉例

a:link未訪問的鏈接(從來沒訪問過)a:visited已訪問的鏈接(之前有訪問過)a:hover鼠標(biāo)挪動到鏈接上(重要)a:active激活的鏈接（鼠標(biāo)在鏈接上長按住未松開）

使用注意

:hover必須放在:link和:visited后面才能完全生效:active必須放在:hover后面才能完全生效所以建議的編寫順序是 :link、:visited、:hover、:active 除了a元素，:hover、:active也能用在其他元素上

動態(tài)偽類 - :focus

:focus指當(dāng)前擁有輸入焦點(diǎn)的元素（能接收鍵盤輸入）文本輸入框一聚焦后，背景就會變紅色(例子)因?yàn)殒溄觓元素可以被鍵盤的Tab鍵選中聚焦，所以:focus也適用于a元素動態(tài)偽類編寫順序建議為

:link、:visited、:focus、:hover、:active 直接給a元素設(shè)置樣式，相當(dāng)于給a元素的所有動態(tài)偽類都設(shè)置了

相當(dāng)于a:link、a:visited、a:hover、a:active、a:focus的color都是red

偽元素（pseudo-elements）

常用的偽元素有(推薦使用兩個(gè)冒號，跟偽類進(jìn)行區(qū)分)

:first-line、::first-line:first-letter、::first-letter:before、::before:after、::after 為了區(qū)分偽元素和偽類，建議偽元素使用2個(gè)冒號，比如::first-line

偽元素 - ::first-line - ::first-letter(了解)

::first-line可以針對首行文本設(shè)置屬性::first-letter可以針對首字母設(shè)置屬性

偽元素 - ::before和::after(常用)

::before和::after用來在一個(gè)元素的內(nèi)容之前或之后插入其他內(nèi)容（可以是文字、圖片)

常通過 content 屬性來為一個(gè)元素添加修飾性的內(nèi)容

柚子快報(bào)激活碼778899分享：前端 HTML5與CSS3

http://yzkb.51969.com/

推薦文章