视频教程笔记>> Mastering CSS - Second Edition by Rich Finelli from packtpub.com

Three types of style sheets: Inline, Embedded, and External.

---

 

The box-sizing property can be used to adjust this behavior:

• content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width.
• border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

来自 <https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing>

---

Two key characteristics of block elements:

1. They expand the full width available.
2. They force line break, which means they stack on top of each other.

---

The default font size of most browsers is 16px.

---

使用Google的html5shiv包（推荐）

1 2 3

<!--[if lt IE9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

由于国内google的服务器访问卡，建议调用国内的cdn

1 2 3

<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]-->

来自 <https://www.jb51.net/article/75430.htm>

---

http://www.richfinelli.com/troubleshooting-html-and-css/

 

 

------------------------------

You can hold Alt and left click to place cursors arbitrarily.

You can view and edit keyboard shortcuts via:

File → Preferences → Keyboard Shortcuts

Documentation:

https://code.visualstudio.com/docs/customization/keybindings

Official VS Code Keyboard shortcut cheat sheets:

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf

来自 <https://stackoverflow.com/questions/30037808/multiline-editing-in-visual-studio-code>

---

Specificity Weight

Points	Type
10000	!Important
1000	Inline Style
100	ID
10	Class(or pseudo class)
1	Element
0	Universal Selector(*)

 

---

.otf are fonts for the desktop.

---

 

 

 

 

---

Visual Studio Code Shortcuts:

! + tab will fill the documnt with a HTML template.

Lorem + number + tab, such as lorem5, will fill a text consists of 5 words.

---

Books and articles for further learning:

MOBILE FIRST

来自 <https://abookapart.com/products/mobile-first>

Autoprefixer CSS online

来自 <http://autoprefixer.github.io/>

Dan Cederholm CSS3 FOR WEB DESIGNERS

来自 <https://abookapart.com/products/css3-for-web-designers>

Ethan Marcotte RESPONSIVE WEB DESIGN

来自 <https://abookapart.com/products/responsive-web-design>

jQuery for Designers: Beginner's Guide

Natalie MacLees

来自 <https://www.packtpub.com/web-development/jquery-designers-beginners-guide>

https://shoptalkshow.com/ A podcast for web developers.

---

Tools and Resources:

https://travismaynard.com/writing/getting-started-with-gulp

http://smacss.com/

https://www.packtpub.com/web-development/designing-next-generation-web-projects-css3

https://css-tricks.com/using-svg/

CSS Tools: Reset CSS

来自 <https://meyerweb.com/eric/tools/css/reset/>

Ultimate CSS Gradient Generator

来自 <https://www.colorzilla.com/gradient-editor/>

http://bradfrost.github.io/this-is-responsive/

https://www.theleagueofmoveabletype.com/ for downloading open source fonts.

http://www.googlefonts.cn/ provides free web fonts

https://zurb.com/playground/foundation-icon-fonts-3 downloading icon fronts

https://caniuse.com/ for checking browsers' compatibilities of various elements.