1.在html中定义css的方式:嵌入式,外部引用式,内联式。
1.1嵌入式
css定义的内容位于style元素之间:如:
1 <head> 2 <style> 3 ...嵌入式css代码... 4 </style> 5 6 <head>
1.2外部引用式
css样式集在一个单独的文件中,这样做便于网站样式维护
1.2.1使用处理指令(PI):在html文档开头部分写一个关于样式表的处理指令语句,如:
1 <?xml-stylesheet type="text/css" href="mystyle.css"?> 2 <head> 3 4 .................... 5 </head>
注意:大多数浏览器仅当该文档被保存为.xhtml或.xml扩展名时才会有效,所以一般不推荐这样使用.
1.2.2使用@import指令:也就是在style元素之间使用@import指令导入外部的css样式表文件,如:
1 <head> 2 <style> 3 /*下面两行代码执行的效果相同*/ 4 @import "mystyle.css" 5 @import url("mystyle.css") 6 </style> 7 </head>
1.2.3使用link元素(常用的导入外部样式的方法)
1 <link href="mystyle.css" rel="stylesheet" type="text/css">
1.2.4使用HTTP消息报头链接到样式表:HTTP消息报头的link字段链接到一个外部样式表,link字段功能和html中link元素的功能相同,有相同的属性设置,如
1 link:<mystyle.css>;rel=stylesheet 2 3 等同于 4 5 <link href="mystyle.css" rel="stylesheet" type="text/css"/>
注意:http报头中可以使用多个link字段,从而可以使用link字段链接多个外部样式表,并且,http报头中的link字段比html中link元素具有优先级。
1.3内联式
每一个html元素中都包含一个style属性,使用该属性直接指定该元素样式。如:
1 <p style="color:red;font-weight:bold;">我来了</p>
注意:这种方式虽然比较直接,但不利于模块化管理,并且仅能用于一个元素,如果出现同名元素,必须重新定义。
2.css语法书写标准及功能
css告诉了浏览器怎样去呈现一个文档,有两种类型的样式规则:@规则和规则集
2.1css规则由选择器与规则块组成。规则块由{}符号组成,其间可以使任何字符,括号要成对出现,如:p{}
2.2@规则
@规则以一个关键字@开始,紧跟在后面的是一个标识符。目前有以下@规则:@import、@charse、@page、@media和@font-face。