CSS: The Definitive Guide 4th 筆記

Cover

該書信息: O'Reilly Media; 4 edition (November 9, 2017), Eric A. Meyer and Estelle Weyl

1. O'Reilly, 重音在後, ou 'ruai li
2. 雖然是第四版, 2017年出版, 全書1000多頁,不知寫了多少年, 部份內容是必定會有落後的甚至錯誤的, 你我或者大神都是.
3. Definitive 權威, 重音在f開頭, 所有是i音.c
   1. 看, 這一句就是白話解釋, 通俗易懂可是浪費時間, 通用性差, 可重複利用性差.
4. Definitive /ɛtˈsɛtərə/. the best, cannot be improved
   1. 很簡短, 可是很不簡單. 重音標記, 加上ɛ, t, s, ə, r, 5個音. 組件化?原子?字母和單詞, 組件和頁面, 原子和分子, 有啥區別呢? 都是用簡單的有限的模型按照必定的規則組成更復雜的模型. 而沒有掌握規則和原子的時候, 你就只能死記硬背有多少種分子了.
5. etc: Et cetera, /ɛtˈsɛtərə/; 拉丁音, cetera 讀 凱特若..是否是很像拼音..
6. 你問我爲何學個技術還要學英語? 由於我想要在技術的這條路上走的再深刻一些, 而這門技術的發源地就是英文的世界, 人家先進, 國際通用, 就要好好虛心學習.
7. visual presentation for the web: 互聯網的可視化介紹..
8. 關於做者, 有道給出這兩個全是德國的姓, 艾瑞克 A. 瑪雅 愛'斯代奧 哇奧

Table of Contents

歡迎來到一本書的核心部分:

1. 第一層核心就是標題: CSS: The Definitive Guide

表示這本書自認爲CSS的一本最牛逼的指導書, 固然我花費時間看這本書是由於Amazon上評價靠前. 對, 能忽悠讀者買的說明營銷策略好, 讀者看了以後才以爲好, 說明內容引人入勝, 能說服不少人. 想象一下你們都會被什麼說服呢? 真理! 堅持用真理說服人 : )

說到這個我又想到標題黨的新聞, 由於新聞平臺只須要流量, 新聞質量怎麼樣重要麼? 跟錢沒有直接關係. 因此各類標題黨橫行, 你只要點進來就算我有本事, 至於內容是否是屎, 噁心到讀者, 反正讀者又不能踩一踩或者點贊計算文章質量, 新聞平臺也不關注.這就是沒有反饋, 沒有監管, 勢必就會大量的濫竽充數的東西.

都是同行陪襯的好, 謝謝Amazon上的讀者們的評分, 分清了精華和糟粕.

2. 第二層和新就是章節名

看看下面這整整20個章節, 到底這本書寫了啥. 是否是本身想要看的內容, 要不要讀下去.

看看這本書目錄

1. CSS and Documents
2. Selectors
3. Specificity
4. Values and Units
5. Fonts
6. Text Properties
7. Basic Visual Formatting
8. Padding, Borders, Outlines, and Margins
9. Colors, Backgrounds, and Gradients
10. Floating and Shapes
11. Positioning
12. Flexible Box Layout
13. Grid Layout
14. Table Layout in CSS
15. Lists and Generated Content
16. Transforms
17. Transitions
18. Animation
19. Filters, Blending, Clipping, and Masking
20. Media-Dependent Styles A. Animatable Properties B. Basic Property Reference C. Color Equivalence Table

嘮嘮嗑 CSS, Cascading Style Sheets

1. cascade 大瀑布中飛流直下的的一小束瀑布, 而後是否是想到了黑瀑布的長髮錯落有致的垂下去?對, 就是一遍遍的
2. sheets 就是帶信息的頁或者紙張咯, 翻譯變成了表

Preface /ˈprefɪs/

1. sophisticated page styling
   1. experience of life, good judgment about socially importantant things
   2. well designed, advanced and complicated machine
   3. have a knowledge and experience of difficult or complicated subjects, understand them well
2. improved accessibility
3. saving time and effort

面向當下和將來, 無論過去的坑

conventions

conventions

1. formal meeting, agreement
2. behaviour and attitudes consider to be normal and right

e.g.

1. <font-family>:Any italicized words between 「<」 and 「>」 give a type of value, or a reference to another property’s values.
2. constant width or / ,: literally without quotes
3. combine components
   1. help me, combined in this order
   2. (X|Y|Z), a vertical bar, must occur, one of the set, 單元素子集
   3. (X||Y||Z), a vertical double bar, must occur, any order or any amount of elements, 非零子集.
   4. (X&&Y), a double ampersand, both occur, but any order, 必須包含
   5. [...], brackets, for grouping things together
4. modifiers
   1. asterisk(*), repeat 0 or more times
   2. plus(+), repeat 1 or more times
   3. octohorpe(#), repeat 1 or more times, separated by commas
   4. question mark(?), optional
   5. exclamation point(!), required a result [what?is?happening]!
   6. pair of numbers in curly braces {M,N}, repeated from M to N times(included)

1. CSS and Documents

History

from 1994, simple declarative styling language, cascade保證了各級做者和讀者均可以改變樣式, 固然最後見到文檔的說了算.

CSS 從3開始放棄了總體發佈, 改成modules, 有的level 4, 有的還在level 1, 每一年CSS工做小組也發佈Snapshot document, 你能夠查看這個總體的快照.

Elements

basic of HTML

Replaced and Nonreplaced Elements

not all elements are created equally. img and p, span and div,

Replaced elements

Replaced elements are those where the element’s content is replaced by something that is not directly represented by document content.

• img
• input, replaced by radio, checkbox etc

Nonreplaced elements

內容由元素提供, 由瀏覽器渲染.

Element Display Roles

display: basic types

1. block-level
   1. generate an element box fill its parent content area, no other elements at its side.
   2. breaks before and after the element box
   3. list 還會額外生成一些符號
   4. img 好像是個box, 但其實通常不是.
2. inline-level
   1. generate an element box within a line of text and not break up the flow of that line
   2. no breaks before or after, 因此和其餘元素和諧相處

display的這兩個值和HTML5 已經取消了的block元素和inline元素, 是有本質區別的, 儘管有類似的地方.

HTML 中行內元素沒法嵌套塊級元素, 但CSS中不一樣嵌套的元素的的display的值沒有限制.

display

values:

[ <display-outside> ‖ <display-inside> ] | <display-listitem> | <display-internal> |
<display-box> | <display-legacy>

init value: inline
applies to: all elements
computed value: as specified
inherited no
animatable no


複製代碼

這些符號若是感到陌生, 請參考開始的符號解釋, 也就是display有5種子類型, 第一種類型能夠包含非空子集.

下面是每種類型的具體值是什麼

<display-outside>
    block | inline | run-in
<display-inside>
    flow | flow-root | table | flex | grid | ruby
<display-listitem>
    list-item && <display-outside>? && [ flow | flow-root ]?
<display-internal>
    table-row-group | table-header-group | table-footer-group | table-row |
    table-cell | table-column-group | table-column | table-caption | ruby-base
    | ruby-text | ruby-base-container | ruby-text-container
<display-box>
    contents | none
<display-legacy>
    inline-block | inline-list-item | inline-table | inline-flex | inline-grid

複製代碼

而後就講了一段默認全是文字的xml文本, 默認inline多麼醜陋的一堆文字, 經過不斷的指定CSS,它變得愈來愈工整清晰.

Bringing CSS and HTML Together

首先就是HTML是用來定義結構的,有什麼元素, 互相包含誰, 而不是各個元素好很差看.

The link Tag

導入

1. link必須是head的親兒子.
2. @import url(sheet2.css) 必須在style中的開頭, 或外部樣式表的開頭.

後綴名雖然不重要, 但最好按傳統來就以(.css)結尾..

rel, relation stylesheet

type, text/css, 瀏覽器就知道這個樣式表是css樣式表 儘管其餘的方法可能還沒出生.. 相似的還有js type

<link rel="stylesheet" type="text/css" href="visual-sheet.css" media="screen, projection">

media descriptors, 這裏的media就是一個篩選器, 只有在screen和投影中才會使用.

Alternate stylesheets

<link rel="stylesheet" type="text/css"
 href="sheet1.css" title="Default">
<link rel="alternate stylesheet" type="text/css"
 href="bigtext.css" title="Big Text">
<link rel="alternate stylesheet" type="text/css"
 href="zany.css" title="Crazy colors!">
複製代碼

可供用戶選擇的樣式(火狐和Opera支持..)

<link rel="alternate stylesheet" type="text/css"
 href="bigtext.css" title="Big Text" media="screen">
<link rel="alternate stylesheet" type="text/css"
 href="print-bigtext.css" title="Big Text" media="print">
複製代碼

title 能夠相同, 對應不一樣的media 給出不一樣的style

多個寫着default的title的link rel=stylesheet, 只有一個會被使用, 若是不給title, 那麼就是必定會使用的style.

The style Element

document stylesheet, embedded stylesheet

<style type="text/css" media="screen">
    @import url(sheet2.css);
</style>
複製代碼

注意可使用@importlink to external stylesheet, 別忘了分號..

The @import Directive

這個和link的區別就是

1. 位置不一樣(一個head下, 一個樣式中首行, 不管style元素仍是樣式表)
2. 語法名不一樣.

特殊語法, 能夠直接指定media

@import url(sheet2.css) all;
@import url(blueworld.css) screen;
@import url(zany.css) projection, print;
複製代碼

#import 通常用在.css文件中, 由於那裏沒有HTML中的link 只能用@import

若是放錯位置, 是否要丟棄@import在各類瀏覽器實現不同, 因此聽人勸, 不惹事.說放第一行, 就放第一行.

HTTP Linking

滾犢子把, 又是火狐和Opera支持的語法. 咋滴, 寫沒有必要的代碼上癮? 不用通用的解決方案, 本身發明一個自我感受良好??

Inline Style

body內的元素均可以使用, 只針對某個元素的一條style規則(就是一條規則的花括號內), 不能用@import,

<img style="color: blue;">

Stylesheet Contents

Markup

style 元素中的HTML註釋能夠用, 除此以外其餘標記都不能用

Rule Structure

selector and declaration block(one or more declarations(property:value;)

Vendor prefixing

供應商的前綴,

-epub- International Digital Publishing Forum ePub format
-moz- Mozilla-based browsers (e.g., Firefox)
-ms- Microsoft Internet Explorer
-o- Opera-based browsers
-webkit- WebKit-based browsers (e.g., Safari and Chrome)
複製代碼

Whitespace Handling

CSS Comments

Media Queries

Usage

1. link[media]
2. style[media]
3. @import url() screen;
4. @media

Simple Media Queries

h1 {color: maroon;}
@media projection {
 body {background: yellow;}
}
複製代碼

encapsulate all rules in an @media block, 至關於沒加..

@media all {
 h1 {color: maroon;}
 body {background: yellow;}
}
複製代碼

Media Types

最基本的查詢單位是 media 類型,

1. all
2. print
3. screen
4. projection
5. 部分支持handheld

指定多個時,

<link type="text/css" href="frobozz.css" media="screen, print">
<style type="text/css" media="screen, print">...</style>
@import url(frobozz.css) screen, print;
@media screen, print {...}
複製代碼

Media Descriptors

最簡單的是查詢設備類型, 如今更多描述符, 逗號分開, 只要有一個條件知足, 就能夠應用.

<link href="print-color.css" type="text/css"
 media="print and (color), screen and (color-depth: 8)" rel="stylesheet">
@import url(print-color.css) print and (color), screen and (color-depth: 8);
複製代碼

意思是print只要是彩色或者screen只要顏色深度有8層, 就應用該樣式.

@media all and (min-resolution: 96dpi) {...}
@media (min-resolution: 96dpi) {...}
複製代碼

若是沒有設備, 默認就是全部設備.

兩個logical keywords

1. and
2. not (negate the entire query)只可否定全部, 出如今開頭.
3. 沒有OR, 可是默認的逗號排列狀況就是OR的意思
4. only， @import url() only all 只能用在開頭

only 專門用來建立backward incompatibility，也就是用來不給舊版這個樣式，區分開新舊。由於新版的認識only， 就應用，而不支持媒體查詢的不認識 only all這個設備，因此形成舊版的不會採起這個樣式。

注意這裏的backward 就是向後兼容, 這個後是回頭的後, 不是日後、之後的後..因此不要用中文記它的意思..backward就是backward

Media Feature Descriptors and Value Types

媒體特性描述符 和 值 的類型

width
min-width
max-width
device-width
min-device-width
max-device-width
height
min-height
max-height
device-height
min-device-height
max-device-height
aspect-ratio
min-aspect-ratio
max-aspect-ratio
device-aspectratio
min-device-aspectratio
max-device-aspectratio
color
min-color
max-color
color-index
min-color-index
max-color-index
monochrome
min-monochrome
max-monochrome
resolution
min-resolution
max-resolution
orientation
scan
grid

複製代碼

還有兩個新的<ratio>, <resolution>

Feature Queries

特性查詢, 若是支持CSS的某些property，那麼就採用。

@supports (color: black) {
 body {color: black;}
 h1 {color: purple;}
 h2 {color: navy;}
}
複製代碼

若是支持color屬性，而且能夠設置爲黑色，那麼你就把body變黑，h1變紫，h2變海軍藍。

又好比：若是支持grid 那麼就在原來的float、inline、block佈局中更新section的佈局

@supports (display: grid ) {
 section#main {display: grid;}
 /* styles to switch off old layout positioning */
 /* grid layout styles */
}
複製代碼

這樣就實現了漸進加強，老舊的就不改動佈局， 若是是新版那就更新佈局。

feature queries 能夠和 media queries組合，誰均可以嵌套誰

可是若是本身嵌套本身呢？以下

@supports (display: grid) {
 @supports (shape-outside: circle()) {
 /* grid-and-shape styles go here */
 }
}
複製代碼

能夠改成and

@supports (display: grid) and (shape-outside: circle()) {
 /* grid-and-shape styles go here */
}
複製代碼

日樂購，feature queries 支持or。。。

@supports (shape-outside: circle()) or
 (-webkit-shape-outside: circle()) {
 /* shape styles go here */
}
複製代碼

logical keyword 能夠組合搭配括號使用

@supports (color: black) and ((display: flex) or (display: grid)) {
 /* styles go here */
}
複製代碼

好比顏色支持黑色的而且是flex佈局或者grid佈局的

爲啥要給屬性名和屬性值呢

拿display來講，由於IE4就支持display了，可是它不會支持grid，因此指定的更精準，才能獲得想要的。

不少特性可能支持的不完整，好比只支持一點點，瀏覽器可能也會在查詢的時候告訴你我支持。

Summary

能夠將重複的css外置放在一塊兒供別的頁面引用，節省帶寬，而沒必要每一個文檔都要帶一份樣式，不少文檔的樣式可能重疊了不少。

經過 feature queries 實現了 progressive enhancement.

2. Selectors

選擇器的做用範圍不一樣，因而某些樣式能夠被重複引用，而且易於修改維護。

Basic Style Rules

一切來源於需求，想省事就要總結出公式，抽象出主幹。

原則就是分模塊，區分信息的原子性和類似性。徹底獨特的給id，類似的給class，類似的元素就是元素選擇器，類似的狀態就是僞類。。。

Element Selectors

element of HTML or XML

Declarations and Keywords

聲明塊包含了不少聲明，

一個聲明包含property, colon, value, semicolon.

通常含有子屬性的父屬性能夠有不少值用空格間隔並列，好比border: 1px solid red;

font: large/150% sans-serif;這裏的斜槓是歷史緣由。。也說明這兩個屬性的緊密性。slash 還出如今不少地方。

有的分割還用逗號來表示，

.box {box-shadow: inset -1px -1px white,
 3px 3px 3px rgba(0,0,0,0.2);
 background-image: url(myimage.png),
 linear-gradient(180deg, #FFF 0%, #000 100%);
 transform: translate(100px, 200px);
}
a:hover {transition: color, background-color 200ms ease-in 50ms;}

複製代碼

Grouping

Grouping Selectors

h1, h2, h3 {color: gray;}

/* group 1 */
h1 {color: silver; background: white;}
h2 {color: silver; background: gray;}
h3 {color: white; background: gray;}
h4 {color: silver; background: white;}
b {color: gray; background: white;}
/* group 2 */
h1, h2, h4 {color: silver;}
h2, h3 {background: gray;}
h1, h4, b {background: white;}
h3 {color: white;}
b {color: gray;}
/* group 3 */
h1, h4 {color: silver; background: white;}
h2 {color: silver;}
h3 {color: white;}
h2, h3 {background: gray;}
b {color: gray; background: white;}

複製代碼

像這兩組誰好呢？並非取決於誰代碼少，而是看放在一塊兒的究竟是湊巧仍是邏輯強關聯，也就是說有些屬性被不少標籤所用，是由於邏輯上他們同樣的話，那就把它們放在一組，而若是隻是湊巧，後期改動的時候還要拆開，那就在一開始不要合併成一組。

The universal selector

displayed as an asterisk(*)

* {color: red;}

specificity 0-0-0

Grouping Declarations

h1 {
 font: 18px Helvetica;
 color: purple;
 background: aqua;
}
複製代碼

h1{font:18px Helvetica;color:purple;background:aqua;}
複製代碼

前者佔空多但易讀易修改，後者佔空少可是不容易閱讀和修改。

要利用其長處而不是短處，因此開發的時候咱們須要容易閱讀和修改，那麼選前者，而分發產品給用戶的時候，他們只須要快，並不須要看代碼修改代碼，因此選擇後者壓縮過空格的樣式。

當某一句聲明錯誤時（key或value或者不匹配或者省略了），瀏覽器只照顧已經用分號寫正確的聲明，而且拋棄該錯誤declaration。

加分號、加分號，加分號，記得上次不加分號裸奔了很久，可是忽然之間React就錯誤了，後來我又一個個加上了分號，而後錯誤就沒了。

Grouping Everything

selectors, declarations 均可以被group

New Elements in Old Browsers

document.createElement('main');

這一塊兼容性問題交給Babel吧

Class and ID Selectors

僅僅選擇元素和他們的並集也不過如此了，可是若是不依賴元素呢？那就要額外製定id、class用來表示單個仍是一羣

P39 Todo

Class Selectors

Multiple Classes

ID Selectors

Deciding Between Class and ID

Attribute Selectors

Simple Attribute Selectors

Selection Based on Exact Attribute Value

Selection Based on Partial Attribute Values

A Particular Attribute Selection Type

The Case Insensitivity Identifier

Using Document Structure

Understanding the Parent-Child Relationship

Decendant Selectors

Selecting Children

Selecting Adjacent Sibling Elements

Selecting Following Siblings

Pseudo-Class Selectors

Combining Pseudo-Classes

Structural Pseudo-Classes

Dynamic Pseudo-Classes

UI-State Pseudo-Classes

The :target Pseudo-Classes

The :lang Pseudo-Classes

The Negation Pseudo-Classes

Pseudo-Element Selectors

Styling the First Letter

Styling the FIrst Line

Restrictions on ::first-letter and ::first-line

Styling (or Creating) Content Before and After Elements

Summary