# CSS * [Reference](#reference) * [Basic structure](#basic-structure) * [Selector](#selector) * [Good to know](#good-to-know) * [Font](#font) * [Background](#background) * [Image](#image) * [Display](#display) * [Box](#box) * [Coding Standard](#coding-standard) * [Repaint/Reflow](#repaintreflow) * [Misc](#misc) ## Reference * Visual guide to CSS: * 中文文案排版指北: ## Basic structure ``` html head body header nav section article aside footer ``` html ```markup //- nav ``` css ```css // usually split in this way: layout.css color.css typography.css // use one parent css to include them: @import url(layout.css); @import url(color.css); @import url(typography.css); @media print { body { /* css text */ } } ``` viewport `` ## Selector Prefer class over id: id is only faster when id is the key selector, it's slower when `#home a`, because browser **read from right to left** so `#home a` is read as finding all `a` then pick `#home`. [css selector specificity](http://www.htmldog.com/guides/css/intermediate/specificity/) * `div p` win `p` * same style, last one win * you give every ID selector (“#whatever”) a value of 100, every class selector (“.whatever”) a value of 10 and every HTML selector (“whatever”) a value of 1. Then you add them all up and hey presto, you have the specificity value descendant selector * `#id-name h2 { } /* it means select h2 under the id 'id-name' */` * by default, it selects all nested chilren no matter how deep they are. * to select the direct child: `#id-name > h2` select sibling using '+' ```css h1+p{} // select all p comes after h1 ``` the pattern of the selector: context + element + pseudo-class/elements ```css div#greentea > blockquote p:first-line // p is the element. ``` pseudo-class `:hover` * Style for specific state: `a:link { color: green; }, :hover, :visited` * Style for specific position: `p:nth-child(2n) { color: green; }` pseudo-elements `::before` * Style for certain parts of a element. It's applied to content. * Input elements have no content, that's why ::before is not applied. ## Good to know * `strong` vs `em` vs `b` * `em` emphasis * `strong` added importance * `b` (style only) * `dl` `dd` * List: the only element we can place as a direct child of the `