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

转载于:https://juejin.im/post/5bf7c61fe51d4509834cb920