Inline Styles
尽管CSS是不同于HTML的语言,但使用inline styles也可以在HTML code写入CSS code。
为给HTML element添加样式,你可以直接在opening tag内添加style属性,然后你可以设置它等于你想要应用的CSS style(s) 。
![1339015-ca3a136a7dd134bd.png](https://upload-images.jianshu.io/upload_images/1339015-ca3a136a7dd134bd.png)
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 内部。
![1339015-6b9b4fae44236fe9.png](https://upload-images.jianshu.io/upload_images/1339015-6b9b4fae44236fe9.png)
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 应如下图:
![1339015-d28f67686d3db253.png](https://upload-images.jianshu.io/upload_images/1339015-d28f67686d3db253.png)
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:
![1339015-a09b73b88a1df2b3.png](https://upload-images.jianshu.io/upload_images/1339015-a09b73b88a1df2b3.png)
In the example above, all paragraph elements will be selected using a CSS selector.
Class Name
![1339015-b546edad7fa769a1.png](https://upload-images.jianshu.io/upload_images/1339015-b546edad7fa769a1.png)
To select this element using CSS, we could use the following CSS selector:
![1339015-402f07df43c4e2db.png](https://upload-images.jianshu.io/upload_images/1339015-402f07df43c4e2db.png)
To select an HTML element by its class using CSS, a period (.) must be prepended to the class’s name.
Multiple Classes
![1339015-5de33bc7b02037b3.png](https://upload-images.jianshu.io/upload_images/1339015-5de33bc7b02037b3.png)
ID Name
如果an HTML element需要被单独赋予样式,可以为其添加ID属性。
![1339015-cbf7d08861cd3b85.png](https://upload-images.jianshu.io/upload_images/1339015-cbf7d08861cd3b85.png)
要在CSS选择它,则需在ID名前加#。
![1339015-d06b2d7a7d3a8828.png](https://upload-images.jianshu.io/upload_images/1339015-d06b2d7a7d3a8828.png)
Specificity 明确性
Specificity 是指浏览器要应用哪一个CSS样式。ID优先级最高,其次clss,最后是tag。
![1339015-2e45944d005cdcf8.png](https://upload-images.jianshu.io/upload_images/1339015-2e45944d005cdcf8.png)
上图中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:
![1339015-61281f4d96071c18.png](https://upload-images.jianshu.io/upload_images/1339015-61281f4d96071c18.png)
The code above would select only the h1 elements that have a class of special.
Nested Elements
CSS 也可以选择那些嵌套在 other HTML elements 内的elements。
![1339015-68bad9403beccb3e.png](https://upload-images.jianshu.io/upload_images/1339015-68bad9403beccb3e.png)
若要选中嵌套在内部的<li>:
![1339015-f128ba9c26713990.png](https://upload-images.jianshu.io/upload_images/1339015-f128ba9c26713990.png)
在CSS选择器前加一个 tag, class, or ID 会增加其specificity。
Important
!important 可被应用于属性中,带有 !important 的属性将覆盖(override)所有其他样式,无论其优先级多高。故其很少被使用,因为它很难被覆盖。
CSS中!important的语法结构如下:
![1339015-1b347a4eba48bc3f.png](https://upload-images.jianshu.io/upload_images/1339015-1b347a4eba48bc3f.png)
因为 !important 被用于p选择器的颜色属性中,故所有的p elements 都将边blue,即使下方还有一个相对于p选择器更明确的.main p selector。
Multiple Selectors
为使CSS更加concise(简洁),可以使multiple selectors,它防止了重复的代码出现。
举例来说,下图代码有重复啰嗦(repetitive)的属性:
![1339015-6fa89fdd66064626.png](https://upload-images.jianshu.io/upload_images/1339015-6fa89fdd66064626.png)
为不使font-family: Georgia在两个选择器中重复两次,我们可以通过逗号(comma)将两个选择器隔开,再应用其共同的样式:
![1339015-1b453369bd8e8c45.png](https://upload-images.jianshu.io/upload_images/1339015-1b453369bd8e8c45.png)
By separating the CSS selectors with a comma, both the h1 and the .menu elements will receive the font-family: Georgia styling.