1. CSS初體驗

1.1. CSS定義

層疊樣式表 (Cascading Style Sheets，縮寫為 CSS）

用來描述 HTML 文檔的呈現（美化內容）

1.2. CSS引入方式

1. 內部樣式表：學習使用

• • CSS 代碼寫在head里面的 style標簽 里面

1. 外部樣式表：開發使用

• • CSS 代碼寫在單獨的 CSS 文件中（.css）
  • 在 HTML的head中， 使用 link標簽引入，link + tab鍵

  • 

1. 行內樣式：配合 JavaScript 使用

• • CSS 寫在標簽的 style 屬性 值里

  • 

1.3. 布局標簽 div 和 span

• div：換行顯示
• span：一行顯示

<div>div標簽</div>
<div>div標簽</div>
<span>span標簽</span>
<span>span標簽</span>

1.4. 認識幾個通用css樣式設置：

1. 寬度：width
2. 高度：height
3. 背景顏色：background-color
4. 文字大小：font-size
5. 文字顏色：color

1.5. 綜合練習

搭建頁面骨架（寬、高、背景色、文字大小、顏色）：

• 頭部
• 內容
• 底部

2. 基礎選擇器

2.1. 選擇器認知

作用：查找標簽，設置樣式。

基礎選擇器分類：

• 標簽選擇器：直接根據標簽控制
• 類選擇器：標簽需要有 class 屬性
• id 選擇器
• 通配符選擇器

2.2. 標簽選擇器

標簽選擇器：使用標簽名作為選擇器→ 選中同名標簽設置相同的樣式。

例如：p, h1, div, a, img......

注意：標簽選擇器無法差異化同名標簽的顯示效果。

2.3. 類選擇器

作用：查找標簽，差異化設置標簽的顯示效果。

步驟：

• 定義類選擇器 → .類名
• 使用類選擇器 → 標簽添加 class="類名"

注意：

• 類名自定義，不要用純數字或中文，盡量用英文命名
• 一個類選擇器可以供多個標簽使用
• 一個標簽可以使用多個類名，類名之間用空格隔開

小練習：編寫結構，通過選擇器，實現效果

2.4. id選擇器

作用：查找標簽，差異化設置標簽的顯示效果。

場景：id 選擇器一般配合 JavaScript 使用，很少用來設置 CSS 樣式

步驟：

• 定義 id 選擇器 → #id名
• 使用 id 選擇器 → 標簽添加 id= "id名"

規則：

• 同一個 id 選擇器在一個頁面只能使用一次

2.5. 通配符選擇器

作用：查找頁面所有標簽，設置相同樣式。

通配符選擇器： *，不需要調用，瀏覽器自動查找頁面所有標簽，設置相同的樣式

3. 文字屬性相關

3.1. 字體大小

屬性名：font-size

屬性值：文字尺寸，PC 端網頁最常用的單位 px，（瀏覽器默認字號 16px）

3.2. 字體粗細

屬性名：font-weight

屬性值：數字（100-900的整百數） 或 關鍵字

3.3. 字體樣式

作用：設置文字傾斜效果

屬性名：font-style

屬性值：

• 正常（不傾斜）：normal
• 傾斜：italic

3.4. 行高

作用：設置多行文本的間距

屬性名：line-height

屬性值

• 數字 + px
• 數字（當前標簽font-size屬性值的倍數）

3.5. 行高居中（單行垂直居中）

垂直居中技巧：行高屬性值等于盒子高度屬性值

注意：該技巧適用于單行文字垂直居中效果

3.6. 文本縮進

屬性名：text-indent

屬性值：

• 數字 + px
• 數字 + em（推薦：1em = 當前標簽的字號大小）

3.7. 水平對齊方式

作用：控制內容水平對齊方式

屬性名：text-align

屬性值：

小技巧：利用 text-align 也可以控制圖片、行內標簽（span、strong、b...）等內容水平居中

案例：卡片居中 d d d

3.8. 文本修飾線

屬性名：text-decoration

屬性值：

3.9. 文字顏色 color

屬性名：color

屬性值：

提示：只要屬性值為顏色，都可以使用上述四種顏色表示方式，例如：背景色。

4. 元素顯示模式

4.1. 基本認知

1 塊級元素 div h系列 ul li

• 獨占一行
• 寬度默認是父級的100%
• 添加寬高屬性生效

2 行內元素 span strong a

• 一行可以顯示多個
• 設置寬高屬性不生效
• 寬高尺寸由內容撐開

3 行內塊元素 img input

• 一行可以顯示多個
• 設置寬高屬性生效
• 寬高尺寸也可以由內容撐開

4.2. 轉換顯示模式

屬性名：display

屬性值：

5. 調試工具

作用：檢查、調試代碼；幫助程序員發現代碼問題、解決問題

1. 打開調試工具

• • 瀏覽器窗口內任意位置 / 選中標簽 → 鼠標右鍵 → 檢查
  • F12

1. 使用調試工具

6. 作業綜合：

6.1. 作業1：

《自然》評選改變科學的10個計算機代碼項目

2077年01月28日14:58 新浪科技 收藏本文

2019年，事件視界望遠鏡團隊讓世界首次看到了黑洞的樣子。不過，研究人員公布的這張發光環形物體的圖像并不是傳統的圖片，而是經過計算獲得的。利用位于美國、墨西哥、智利、西班牙和南極地區的射電望遠鏡所得到的數據，研究人員進行了數學轉換，最終合成了這張標志性的圖片。研究團隊還發布了實現這一壯舉所用的編程代碼，并撰文記錄這一發現，其他研究者也可以在此基礎上進一步加以分析。

這種模式正變得越來越普遍。從天文學到動物學，在現代每一項重大科學發現的背后，都有計算機的參與。美國斯坦福大學的計算生物學家邁克爾·萊維特因“為復雜化學系統創造了多尺度模型”與另兩位研究者分享了2013年諾貝爾化學獎，他指出，今天的筆記本電腦內存和時鐘速度是他在1967年開始獲獎工作時實驗室制造的計算機的1萬倍。“我們今天確實擁有相當可觀的計算能力，”他說，“問題在于，我們仍然需要思考。”

如果沒有能夠解決研究問題的軟件，以及知道如何編寫并使用軟件的研究人員，一臺計算機無論再強大，也是毫無用處的。如今的科學研究從根本上已經與計算機軟件聯系在一起，后者已經滲透到研究工作的各個方面。近日，《自然》（Nature）雜志將目光投向了幕后，著眼于過去幾十年來改變科學研究的關鍵計算機代碼，并列出了其中10個關鍵的計算機項目。

最初的現代計算機并不容易操作。當時的編程實際上是手工將電線連接成一排排電路來實現的。后來出現了機器語言和匯編語言，允許用戶用代碼為計算機編程，但這兩種語言都需要對計算機的架構有深入的了解，使得許多科學家難以掌握。20世紀50年代，隨著符號語言的發展，特別是由約翰·巴克斯及其團隊在加州圣何塞的IBM開發的“公式翻譯”語言Fortran，這種情況發生了變化。利用Fortran，用戶可以用人類可讀的指令來編程，例如x = 3 + 5。然后由編譯器將這些指令轉換成快速、高效的機器代碼。

6.2. 作業2：

在希望的田野上 | 湖北秋收開鐮 各地多舉措保增產增收

來源：央視網 | 2222年12月12日 12:12:12

央視網消息：眼下，湖北省秋收開鐮已有一周多的時間。水稻收割已經超過四成，玉米收割七成。湖北省通過大力推廣新品種水稻，建設高標準農田等一系列措施，為秋糧穩產提供有力支撐。

中稻占據了湖北全年糧食產量的一半以上。在湖北的主產區荊門市，370萬畝中稻已經收割四成以上。

王化林說的新品種，是湖北省研發的雜交水稻“華夏香絲”，不僅產量高，還具有抗病、抗倒、抗高溫的特性。在荊門漳河鎮的一工程示范田內，像“華夏香絲”這樣抗旱節水的品種還有20多個，這些水稻新品將在荊門全面推廣，確保來年增產增收。

此外，湖北還大力推進高標準農田建設。截至今年6月，已建成3980萬畝高標準農田。目前，湖北全省仍有1800多萬畝中稻正在有序收割中，預計10月中旬收割完畢。

6.3. 作業3：

CSS（層疊樣式表）
層疊樣式表 (Cascading Style Sheets，縮寫為 CSS），是一種 樣式表 語言，用來描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之類的 XML 分支語言）文檔的呈現。CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題。CSS 是開放網絡的核心語言之一，由 W3C 規范 實現跨瀏覽器的標準化。CSS 節省了大量的工作。 樣式可以通過定義保存在外部.css 文件中，同時控制多個網頁的布局，這意味著開發者不必經歷在所有網頁上編輯布局的麻煩。CSS 被分為不同等級：CSS1 現已廢棄， CSS2.1 是推薦標準， CSS3 分成多個小模塊且正在標準化中。CSS 介紹 如果你是 Web 開發的新手，請務必閱讀我們的 CSS 基礎 文章以學習 CSS 的含義和用法。
CSS 教程 我們的 CSS 學習區 包含了豐富的教程，它們覆蓋了全部基礎知識，能使你在 CSS 之路上從初出茅廬到游刃有余。
CSS 參考 針對資深 Web 開發者的 詳細參考手冊 ，描述了 CSS 的各個屬性與概念。

6.4. 作業4：

6.5. 作業5：

自己整理前兩天xmind （簡易版即可）

7. 測量工具PxCook的使用

• 量尺寸
• 吸取顏色