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