css的应用方式
使用link标签的外部样式表的应用
什么是外部样式表
所谓外部样式表就是我们在项目中单独书写的css样式文件，该文件专门用于规定元素的显示样式，后缀为.css。
注释为/*注释内容*/
link引用css文件的规范
web浏览器遇到link标签时，会查找并加载指定的样式表，使用样式表中的样式渲染HTML文档。
-
link标签必须写在head标签中。
-
使用link标签来引用css文件，一般除了href之外，还应该书写一些其他的属性：
-
media：值为一个或多个媒体描述符，指明媒体的类型和具有的功能。多个媒体描述符使用逗号分隔。用于做媒体查询。指定该属性后，只有设备符合该属性指定的要求后，该样式才会加载。
-
type：用于表示要引用文档的MIMETYPE类型，可以让浏览器更好的识别和加载对应的内容。
- 引用css文件时应该将该属性的值写为 text/css，表示了要加载的内容的数据类型。
-
rel： 用于表示当前要引用的文件【a】与当前文件【b】的关系，即，a是b的什么。
- 引用css文件时应该将该属性的值写为 stylesheet，表示引用内容为一个样式表
-
候选样式表
定义方式
将link引用外部css文件的规范中的rel属性加一个属性值alternate。没有alternate的样式表为文档页面默认加载的样式【首选样式】，若是有多个首选样式，且都带相同的title，则只会生效一个样式表，但不确定哪个生效。
title属性作用
还可以使用link的title属性来给候选样式表去指定名称。相同的title的样式表中的规则会被整合在一起，看作是一组。
若是没有指定title，则说明该样式表指定的样式始终生效。
media属性作用
可以通过media属性指定，在用户选择特定组别的样式表后，特定的设备应用不同样式。即，做媒体查询用。
作用
当有候选样式表时，用户可以自己根据样式表规定的title，选定生效哪些样式表。
使用style标签进行内部样式表书写
使用style标签可以在html文档中写css样式：将css规则写在style标签内部即可。
- 该标签应该始终定义type属性，值为text/css。
- 该属性也有media属性，功能和link的一样。
使用style标签引用外部样式表
做法
通过在文档中的style标签中写@import规则来进行外部css文件的引用。
@import规则
写法
@import后面要跟url函数，函数参数为一个相对地址或是绝对地址。这个地址可以使用双引号或单引号括住也可以不括。在url()后面可以跟媒体描述符，和link的media的写法和作用一样。
注意事项与示例
- 一个style标签可以有多个@import规则。@import规则必须写在style标签的最前面，否则会被忽略。
- 在@import之后还可以再书写另外的css规则。
<style type="text/css">
@import url(地址) screen,print;
</style>
行内样式的书写
若是想给某个元素单独设置css样式，那么可以使用该元素标签的style属性来书写css规则。注意：无法使用@import规则
除了 非body内元素【包括body自己】 外剩余的标签都可以书写此属性。【例如：head、title标签就是非body内元素】
<span style="color:black; font-size:10px"></span>
使用HTTP链接加载样式表【没必要】
使用.htaccess文件引用样式表
在Apache中，在后缀为.htaccess的文件中引用css文件。
Header add Link "</ui/testing.css>;rel=stylesheet;type=text/css
这样做，支持这种方式的浏览器就会在加载受此.htaccess文件所管理的文档时便会使用指定的样式表。
在服务器的httpd.conf文件中配置来引用
这样比上面的方法更为高效。
添加的配置如下
<Directory /pathg/to/ /public/html/directory>
Header add Link "</ui/testing.css>;rel=stylesheet;type=text/css`
<Directory>
COOKBOOK
不建议使用行内样式和HTTP链接加载样式表。
css的写法规则
css文件中禁止出现的内容
标签
无论是哪种形式的css样式表都不可以有HTML标签元素。
style书写的内部样式表中可以包含HTML注释标签，但是其他css样式表不行
书写语法
css声明定义与组成
css声明指的是一组css规则
一个声明由选择器和声明块所组成。声明块由花括号括住，花括号内可以书写具体css规则。
选择器 {
一些规则;
一些规则;
}
声明中各部分的作用
- 选择器用于表示哪些元素将会应用这个样式。
- 声明块中的规则集合则表示具体生效的样式。
css规则
定义
指的是声明中的某个属性的样式的一条描述。
h1 { color:black; background:black; }
上述代码中，color:black;就是一条规则。
规则的组成
一个css规则由属性和属性值组成，以分号结尾。
厂商前缀
css中的有些规则前面可能会有标注，例如-o-border-image。这是厂商前缀，浏览器厂商通过它来标记实验性或专属的属性、值或其他内容。
常用的厂商前缀如下：
-epub-国际数字出版论坛制定的ePub格式-moz-基于Mozilla的浏览器【例如：Firefox】-ms-微软IE-o-基于Opera的浏览器-webkit-基于Webkit的浏览器【如Safari和Chrome】
如今写css可以完全不使用厂商前缀，不过偶尔会遇到别人使用。
属性值的写法
属性值是可以有多个值的，多个值之间可以以空格、斜线或逗号进行分隔。
- 若是以空格为分隔符，每个子属性值被称为关键字，这些关键字会共同描述当前的属性。
- 有些属性是要求属性值中的关键字为一个
/隔开的2个数据组成的内容。比如font: large/150% sans-serif - 还有一些关键字是以逗号分割，例如声明多个背景图像等。这得看属性的规定。
示例
选择符 {
属性:属性值;
属性:属性值;
.
.
.
}
注释
/*多行注释内容*/
