認識****CSS
? CSS表示層疊樣式表(Cascading Style Sheet疮丛，簡稱:CSS，又稱為又稱串樣式列表纱昧、級聯(lián)****樣式表、串接樣式表堡赔、階層式樣式表) 是為網(wǎng)頁添加樣式的代碼识脆。
? CSS 是一種語言嗎?(知道即可)
MDN解釋:CSS 也不是真正的編程語言，甚至不是標記語言加匈。它是一門樣式表語言;
維基百科解釋:是一種計算機語言存璃，但是不算是一種編程語言;
CSS 的歷史
? 早期的網(wǎng)頁都是通過HTML來編寫的，但是我們希望HTML頁面可以更加豐富:
這個時候就增加了很多具備特殊樣式的元素:比如i雕拼、strong纵东、del等等;
后來也有不同的瀏覽器實現(xiàn)各自的樣式語言，但是沒有統(tǒng)一的規(guī)劃;
1994年啥寇，哈肯·維姆·萊和伯特·波斯合作設(shè)計CSS偎球，在1996年的時候發(fā)布了CSS1;
直到1997年初，W3C組織才專門成立了CSS的工作組辑甜，1998年5月發(fā)布了CSS2;
在2006~2009非常流行 “DIV+CSS”布局的方式來替代所有的html標簽;
從CSS3開始衰絮，所有的CSS分成了不同的模塊(modules)，每一個“modules”都有于CSS2中額外增加的功能磷醋，以及向后 兼容猫牡。
直到2011年6月7日，CSS 3 Color Module終于發(fā)布為W3C Recommendation邓线。
-
總結(jié):CSS的出現(xiàn)是為了美化HTML的淌友，并且讓結(jié)構(gòu)(HTML)與樣式(CSS)分離;
美化方式一:為HTML添加各種各樣的樣式，比如顏色骇陈、字體震庭、大小、下劃線等等;
美化方式二:對HTML進行布局你雌，按照某種結(jié)構(gòu)顯示(CSS進行布局 – 浮動器联、flex、grid);
CSS 如何編寫呢?
? CSS 這么重要婿崭，那么它的語法規(guī)則是怎么樣的呢?
? 聲明(Declaration)一個單獨的****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)
? 疑問:三種方式幸海，學(xué)好哪一個呢?
- 每一個都很重要祟身，目前開發(fā)中不同的場景都會用到
內(nèi)聯(lián)樣式(inline style)
? 內(nèi)聯(lián)樣式(inline style)，也有人翻譯成行內(nèi)樣式物独。
- 內(nèi)聯(lián)樣式表存在于HTML元素的style屬性之中袜硫。
? CSS樣式之間用分號;隔開，建議每條CSS樣式后面都加上分號;
? 很多資料不推薦這種寫法:
1.在原生的HTML編寫過程中確實這種寫法是不推薦的
2.在Vue的template中某些動態(tài)的樣式是會使用內(nèi)聯(lián)樣式的;
? 所以挡篓，內(nèi)聯(lián)樣式的寫法依然需要掌握婉陷。
內(nèi)部樣式表(internal style sheet)
? 內(nèi)部樣式表(internal style sheet)
- 將CSS放在HTML文件<head>元素里的<style>元素之中。
? 在Vue的開發(fā)過程中官研，每個組件也會有一個style元素秽澳，和內(nèi)部樣式表非常的相似(原理并不相同);
外部樣式表(external style sheet)
? 外部樣式表(external style sheet) 是將css編寫一個獨立的文件中，并且通過<link>元素引入進來;
? 使用外部樣式表主要分成兩個步驟:
第一步:將css樣式在一個獨立的css文件中編寫(后綴名為.css);
第二步:通過<link>元素引入進來;
? link****元素的作用戏羽，后續(xù)單獨說担神。
@import
? 可以在style元素或者CSS文件中使用@import導(dǎo)入其他的CSS文件
CSS的注釋
? CSS代碼也可以添加注釋來方便閱讀:
- CSS的注釋和HTML的注釋是不一樣的; ?/* 注釋內(nèi)容 */
常見的CSS元素
必須掌握的CSS屬性
? 必須掌握的CSS屬性
- 在開發(fā)中90+%的時間寫的都是這些屬性;
? 趕緊開始?
? 不要小看這幾個CSS屬性，里面涉及到的概念是非常多的;
? 你必須了解CSS的很多特性始花，才能真正理解里面的每個屬 性;
? 并且在遇到一些問題的時候知道如何去調(diào)試
link元素
? link元素是外部資源鏈接元素妄讯，規(guī)范了文檔與外部資源的關(guān)系
- link元素通常是在head元素中
? 最常用的鏈接是樣式表(CSS);
- 此外也可以被用來創(chuàng)建站點圖標(比如 “favicon” 圖標);
? link****元素常見的屬性:
href:此屬性指定被鏈接資源的URL。 URL 可以是絕對的酷宵，也可以是相對的亥贸。
-
rel:指定鏈接類型，常見的鏈接類型:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types
icon:站點圖標;
stylesheet:CSS樣式;
認識進制
? 進制的概念:
維基百科:進位制是一種記數(shù)方式浇垦，亦稱進位計數(shù)法或位值計數(shù)法炕置。
通俗理解:當(dāng)數(shù)字達到某個值時，進一位(比如從1位變成2位)男韧。
? 按照進制的概念讹俊，來理解一下十進制:
數(shù)字到9的時候，用一位已經(jīng)表示不了了煌抒，那么就進一位變成2位。
在東北沒有什么是一頓燒烤不能解決的厕倍，如果有寡壮，那就兩頓。
? 按照上面的來理解讹弯，二進制况既、八進制、十六進制:
二進制:當(dāng)數(shù)字到1的時候组民，用一位已經(jīng)表示不了了棒仍，那么就進一位。
八進制:當(dāng)數(shù)字到7的時候臭胜，用一位已經(jīng)表示不了了莫其，那么就進一位癞尚。
十六進制:等等，用一位如何表示十六個數(shù)字呢?a(10)乱陡、b(11)浇揩、c(12) 、 d(13) 憨颠、 e(14) 胳徽、 f(15)
人類的十進制
? 學(xué)習(xí)編程語言，需要了解進制的概念:
我們平時使用的數(shù)字都是十進制的爽彤，當(dāng)我寫下一個數(shù)字的時候养盗，你會默認當(dāng)做十進制來使用。
從發(fā)明數(shù)字的開始适篙，人類就使用十進制往核，原因可能是人類正好十根手指。
如果人類有八根手指匙瘪，現(xiàn)在用的可能是八進制铆铆。
? 所以說，十進制就是放之四海而皆準的常理嗎?
? 并不見得丹喻，計算機就認為二進制薄货、八進制、十六 進制更符合自己的思維碍论。
常識就是人到十八歲為止所累積的各種偏見谅猾。 Common sense is the collection of prejudices acquired by age eighteen. —— 阿爾伯特·愛因斯坦(Albert Einstein)
計算機中的進制
? 為什么計算機更喜歡二進制呢?
前面我們已經(jīng)介紹過了為什么計算機更喜歡二進制了;
和其底層的原理有關(guān)系;
? 如何表示二進制、八進制鳍悠、十六進制?
二進制(0b開頭, binary):其中的數(shù)字由0税娜、1組成，可以回顧之前學(xué)習(xí)過的機器語言藏研。
八進制(0o開頭, Octonary):其中的數(shù)字由0~7組成敬矩。
十六進制(0x開頭, hexadecimal):其中的數(shù)字由0~9和字母a-f組成(大小寫都可以)
? 十進制 or 二進制:
雖然計算機更喜歡二進制, 但是編程中我們還是以十進制為主.
因為高級編程語言的目的就是更加接近自然語言, 讓我們?nèi)祟惛菀桌斫?
進制之間的轉(zhuǎn)換
? 十進制轉(zhuǎn)其他進制:
- 整除, 取余數(shù).
? 其他進制轉(zhuǎn)十進制:
比如二進制的1001轉(zhuǎn)成十進制: 1 * 23 + 0 * 22 + 0 * 2 + 1 = 9
比如八進制的1234轉(zhuǎn)成十進制: 1 * 83 + 2 * 82 + 3 * 8 + 4 = 668
比如十六進制的522轉(zhuǎn)成十進制: 5 * 162 + 2 * 16 + 2 = 1314
? 二進制轉(zhuǎn)八進制:
- 三位轉(zhuǎn)成一位八進制
? 二進制轉(zhuǎn)十六進制:
- 四位轉(zhuǎn)成一位十六進制
CSS顏色的表示方法
? 在CSS中，顏色蠢挡，有以下幾種表示方法:
? 顏色關(guān)鍵字(color keywords):
是不區(qū)分大小寫的標識符弧岳，它表示一個具體的顏色;
可以表示哪些顏色呢?
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腹尖，藍色)三原色來組成了不同的顏色;
? 也就是通過調(diào)整這三個顏色不同的比例，可以組合成其他的顏色;
RGB各個原色的取值范圍是 0~255;
RGB的表示方法
? RGB顏色可以通過以#為前綴的十六進制字符和函數(shù)(rgb()伐脖、rgba())標記表示热幔。
? 方式一: 十六進制符號:#RRGGBB[AA]
-
R(紅)乐设、G(綠)、B (藍)和A (alpha)是十六進制字符(0–9断凶、A–F);A是可選的伤提。
? 比如，#ff0000等價于#ff0000ff;
? 方式二:十六進制符號:#RGB[A]
R(紅)认烁、G(綠)肿男、B (藍)和A (alpha)是十六進制字符(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 (藍)可以是<number>(數(shù)字)，或者<percentage>(百分比)帝牡，255相當(dāng)于100%往毡。
A(alpha)可以是0到1之間的數(shù)字，或者百分比靶溜，數(shù)字1相當(dāng)于100%(完全不透明)开瞭。
Chrome瀏覽器開發(fā)者工具
? 打開Chrome調(diào)試工具:
方式一: 右鍵 – 檢查
方式二: 快捷鍵 – F12
? 其他技巧:
快捷鍵:ctrl+ 可以調(diào)整頁面或者調(diào)試工具的字體大小;
可以通過刪除某些元素來查看網(wǎng)頁結(jié)構(gòu);
可以通過增刪css來調(diào)試網(wǎng)頁樣式;
Chrome瀏覽器開發(fā)者工具
瀏覽器渲染的流程
