《CSS設計指南》讀書筆記

時間 2019-11-10

原文原文鏈接

前言

代碼網址：http://www.stylinwithcss.com/css

第一章 HTML標記與文檔結構

1.html的含義

HTML 標記內容的目的是爲了賦予網頁語義（semantic）。就是要給你的網頁內容賦予某些用戶代理（user agent）可以理解的含義。
用戶代理：瀏覽器、給視障用戶朗讀網頁的屏幕閱讀器，以及搜索引擎放出的 Web 爬蟲都是用戶代理，它們須要顯示、朗讀和分析網頁。html

2.閉合標籤與自閉合標籤的區別

閉合標籤包含的是會顯示的實際內容，而自閉合標籤只是給瀏覽器提供一個對要顯示內容的引用。瀏覽器會在 HTML 頁面加載的時候，額外向服務器發送請求，以取得自閉合標籤引用的內容。數據庫

3.alt屬性的做用

視障用戶使用的屏幕閱讀器會大聲讀出 alt 屬性的內容，所以必定要給<img>標籤的這個 alt屬性添加讓人一聽（或一看）就能明白的內容。segmentfault

4.搜索引擎關鍵詞來源

title>h1瀏覽器

5.段落的做用

段落用於標記主要的文本內容，是全部文本元素中出場率最高的一個。簡言之，只
要有不適合放在其餘文本標籤中的文本，均可以把它放一個段落裏面。服務器

6.<!DOCTYPE html>含義

是一種簡化的 DOCTYPE，這一行就是爲了聲明：「如下是一個 HTML 文檔。」dom

7.html標籤

<html>標籤，也就是所謂的根級標籤，<html>標籤只有兩個直接的子標籤：<head>和<body>。字體

8.head標籤

幫助瀏覽器理解頁面的信息都包含在<head>標籤中搜索引擎

9.劃重點

不管你想了解哪一個 HTML 元素，第一個要問的問題都應該是：它是塊級元素，仍是行內元素？知道了這一點以後，就能夠在編寫標記的時候，預想到某個元素在初始狀態下是如何定位的，這樣才能進一步想好未來怎麼用 CSS 從新定位它。url

10.blockquote

引用，使用cite標籤包含做者姓名。

11.關於dom

DOM 是文檔對象模型，從瀏覽器的視角來觀察頁面中的元素以及每一個元素的屬性，由此得出這些元素的一個家族樹

2019.01.20 看了這本書的第一章，感受大部分都已經瞭解，不過也有收穫。
補充：html實體字符：http://www.w3school.com.cn/html/html_entities.asp

第二章 css工做原理

1.樣式表

樣式表：擴展名爲.css的文本文件

2.@import指令

在樣式表中連接其餘樣式表的方法：@import 指令如：@import url(css/styles2.css)

要注意的是，@import 指令必須出如今樣式表中其餘樣式以前，不然@import 引用的樣式表
不會被加載。

3.css選擇器

a.上下文選擇符

1）A,B 同時選擇A、B兩個元素

2）A B 選擇以A爲祖先（父）元素的B元素

3）A>B 選擇以A爲父元素（祖先元素不算）的B元素

4）A+B 選擇緊跟（中間沒有其餘元素）在A後面的第一個B元素

5）A~B 選擇跟（能夠不緊跟）在A後面的全部兄弟元素中的B元素

6）通配符：*
p * {color:red;} 只會把 p包含的全部元素的文本變成紅色。
這個選擇符有一個很是有意思的用法，即用它構成非子選擇符，好比： section * a {font-size:1.3em;}
任何是 section孫子元素，而非子元素的 a標籤都會被選中。至於 a的父元素是什麼，沒有關係。

b.類選擇器

<p class="specialtext featured">Here the span tag <span>may or may not</span> 
be styled.</p>

選擇同時存在這兩個類名的元素，能夠這樣寫：

`.specialtext.featured {font-size:120%;}

`
注意，CSS 選擇符的兩個類名之間沒有空格，由於咱們只想選擇同時具備這兩個類名的那個元素。若是加了空格，那就變成了「祖先/後代」關係的上下文選擇符了。

每一個類名分別用一個 HTML class 屬性的作法是常見的錯誤，正確的作法是像上面的代碼那樣，只用一個 class 屬性，但給它設定多個值（不太理解，但感受是重點，後面估計還會有講解）

c.ID選擇器

<h3 id="bio">Biography</h3> 
<a href="#bio">Biography</a>

href 中 # 表示這個連接的目標在當前頁面中，於是不會觸發瀏覽器加載頁面（若是沒有#，瀏覽器就會嘗試加載 bio目錄下的默認頁面了）

用戶單擊前面的連接時，頁面會滾動到 ID值爲 bio的 h3 元素的位置。若是連接的 href 屬性裏只有一個#，那麼點擊該連接會返回頁面頂部。

那麼返回頂部的代碼就能夠寫成

<a href="#">Back to Top</a>

注意：若是你暫時不知道某個 href 應該放什麼 URL，也能夠用 # 做爲佔位符，但不能把該屬性留空。由於 href 屬性值爲空的連接的行爲跟正常連接不同。這樣，團隊中的其餘人未來能夠用中間層（好比 PHP）變量替換#，以便動態接收來自數據庫的 URL。

小結：何時用ID，何時用類

ID 的用途是在頁面中惟一地標識一個元素，每一個 ID 名在頁面中都只能用一次。到了後面讀者會發現，我常常會給頁面中每一個頂級區域都添加一個 ID，從而獲得很是明確的上下文，以便編寫 CSS 時只選擇嵌套在相應區域內的標籤。（mark一下，後面留意）

類的目的是爲了標識一組具備相同特徵的元素，每一個類能夠被多個元素使用。

要避免 Web 開發專家 Jeffrey Zeldman 說的「類氾濫——標記中的麻疹」出現。什麼意思呢？就是說你不要像使用 ID 同樣，每一個類都指定一個不一樣的類名，而後再爲每一個類編寫規則。若是你確實有這種隨意使用類的習慣，那說明你可能像大多數對 CSS 充滿激情的初學者同樣，還不瞭解繼承和上下文選擇符的做用。因而，你可能會給每一個標籤都重複寫一樣的樣式（好比爲頁面中不少標籤分別指定相同的字體）。實際上，繼承和上下文選擇符能讓不一樣的籤共享樣式，從而下降你須要編寫和維護的 CSS 量。

e.屬性選擇器

1）屬性名選擇

img[title] {border:2px solid blue;}
<img src="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />

帶有 title屬性的 HTML img元素，title屬性有什麼值，可有可無。
小知識：alt屬性中的文本會在圖片因故未能加載時顯示，或者由屏幕閱讀器朗讀出來。而 title屬性會在用戶鼠標移動到圖片上時，顯示一個包含相應文本的提示。

2）屬性值選擇

img[title="red flower"] {border:4px solid green;}

在圖片的 title 屬性值爲 red flower 的狀況下，纔會爲圖片添加邊框。

f.僞類和僞元素

之前總結過，結合這本書的新知識再從新怎裏一下。
http://www.javashuo.com/article/p-zkqrapra-cy.html 僞類與僞元素

4.關於color

color屬性設定的是前景色（？）。前景色既影響文本也影響邊框，但人們一般只用它設定文本顏色。

2019.1.21 今天一天都在爲生活中的事情奔波，亂七八糟的事情一堆，煩心。晚上作了點蛋撻，也翻車了==。不過作蛋撻的時候仍是挺開心的，由於總想着立刻就有香甜酥脆，軟糯潤滑，能把隔壁小孩饞哭的蛋撻吃了。有美好的指望，總能讓人幹勁十足！！

2019.1.24 又看了一點，紀錄一下。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。