Inline Styles
尽管CSS是不同于HTML的语言，但使用inline styles也可以在HTML code写入CSS code。
为给HTML element添加样式，你可以直接在opening tag内添加style属性，然后你可以设置它等于你想要应用的CSS style(s) 。
Inline styles are a quick way of directly styling an HTML element.
The <style> Tag
Inline styles 是一个快速为HTML加样式的方法，但也有其局限性。如果你需要为multiple <h1> elements加样式，你必须手动地（manually）为 each element add inline styling 。
幸运的是，通过使用 <style> element，HTML允许你在其内部写入CSS code， CSS can be written between opening and closing <style> tags。但是使用时， <style> element 必须放置在 <head> element 内部。
The .css file
开发者为避免mixing code，故将HTML and CSS code 存放在不同的文件内。
通过使用.css后缀，你可以创建一个CSS文件，如：style.css
Linking the CSS File
你可以使用<link> element来链接HTML and CSS files。它必须被放在the head of the HTML file 内。它是自闭和标签，且有以下三个属性：
href — like the anchor element, the value of this attribute must be the address, or path, to the CSS file.
type — this attribute describes the type of document that you are linking to (in this case, a CSS file). The value of this attribute should be set to text/css.
rel — this attribute describes the relationship between the HTML file and the CSS file. Because you are linking to a stylesheet, the value should be set to stylesheet.
当链接好了之后，<link> element 应如下图：
Tag Name
CSS can select HTML elements by using an element’s tag name. A tag name is the word (or character) between HTML angle brackets.
For example, in HTML, the tag for a paragraph element is <p>. The CSS syntax for selecting <p> elements is:
In the example above, all paragraph elements will be selected using a CSS selector.
Class Name
To select this element using CSS, we could use the following CSS selector:
To select an HTML element by its class using CSS, a period (.) must be prepended to the class’s name.
Multiple Classes
ID Name
如果an HTML element需要被单独赋予样式，可以为其添加ID属性。
要在CSS选择它，则需在ID名前加#。
Specificity 明确性
Specificity 是指浏览器要应用哪一个CSS样式。ID优先级最高，其次clss，最后是tag。
上图中h1颜色应为firebrick，因为 the class selector is more specific than the tag selector。
为使样式易于编辑，最好的方式是：优先使用a tag selector，若不行，添加a class selector，若还不够明确，再添加an ID selector。
Chaining Selectors
If there was a .special class for h1 elements, the CSS would look like:
The code above would select only the h1 elements that have a class of special.
Nested Elements
CSS 也可以选择那些嵌套在 other HTML elements 内的elements。
若要选中嵌套在内部的<li>:
在CSS选择器前加一个 tag, class, or ID 会增加其specificity。
Important
!important 可被应用于属性中，带有 !important 的属性将覆盖（override）所有其他样式，无论其优先级多高。故其很少被使用，因为它很难被覆盖。
CSS中!important的语法结构如下：
因为 !important 被用于p选择器的颜色属性中，故所有的p elements 都将边blue，即使下方还有一个相对于p选择器更明确的.main p selector。
Multiple Selectors
为使CSS更加concise（简洁），可以使multiple selectors，它防止了重复的代码出现。
举例来说，下图代码有重复啰嗦（repetitive）的属性：
为不使font-family: Georgia在两个选择器中重复两次，我们可以通过逗号（comma）将两个选择器隔开，再应用其共同的样式：
By separating the CSS selectors with a comma, both the h1 and the .menu elements will receive the font-family: Georgia styling.