CSS: The Definitive Guide 4th 筆記

icyhat發表於2018-11-23
CSSGUIIDE筆記

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上的讀者們的評分, 分清了精華和糟粕.

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

看看下面這整整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

相關文章