CSS Structure
Applying CSS to HTML
1. External stylesheet
2. Internal stylesheet
place CSS inside a <style> element contained inside the HTML <head>
less efficient
hard to maintain
3. Inline styles
the least efficient
in HTML email to achieve compatibility
Selectors
: state
# ID
. class
* everything
space contain
Specificity
cascade and specificity controls the rule to deal with conflict.
1. Later styles replace conflicting styles that appear earlier in the stylesheet.
2. more specific element selector cancels the other conflicting style declaration.
Properties and values
a CSS declaration
CSS declaration blocks are paired with selectors to produce CSS rulesets
most-commonly used style
font-size; width; background-color; color; border
If a property is unknown, or if a value is not valid for a given property, the declaration is processed as invalid. It is completely ignored by the browser's CSS engine.
Functions
calc() function, which can do simple math within CSS
various values for transform, such as rotate().
transform: rotate(0.8turn)
@rules
provide instruction for what CSS should perform or how it should behave
@import 'styles2.css' : imports a stylesheet into another CSS stylesheet
@media : which is used to create media queries, use conditional logic for applying CSS styling
@media (min-width: 30em) {
body { background-color: blue; }
}
根据窗口大小判断
p.s. 在HTML的自适应图片中有用到
Shorthands
set several values in a single line
Comments
/* ... */
White space
property names never have white space
