CSS基础概念 1.1引用CSS样式表

CSS基本概念(Basic CSS Concepts)

为了理解CSS如何影响文档的效果,有一些关键概念必须要掌握。一旦理解了这些关键概念，甚至在某种程度上，就会更容易看到CSS是怎样操作这些属性和值的。

引用样式到文档

在HTML中引用CSS样式有四种方法。它们中包含了：HTML文档内部样式的引用、HTML文档外部样式表的引用。

1.LINK 元素

　　LINK元素在HTML和XHTML中创建，用来将外部样式表引入到当前HTML文档中

　　常见的语法

　　　　<link rel="..." type="text/css" href="..." media="...">

　　属性

　　rel="..."

　　　　此属性描述当前HTML文档与链接的外部文件的关系。对于外部样式表，有两种可能的值：stylesheet（样式表）和alternate stylesheet(备用样式表)。属性值stylesheet定义该文档将使用链接文档的样式。属性值alternate stylesheet指的是文档在没有默认渲染的情况下使用的样式表，在理论上，它可以由用户选择是否使用，从而改变文档的样式。浏览器必须提供一种机制，以便实现这种转换工作，但是，不幸的是大多数用户代理不提供这样的机制。此属性是必需的。

　　href="..."

　　　　此属性的值是外部样式表的链接。它的值可以使用绝对URL（absolute URL）或者相对URL（relative URL)。此属性是必需的。

　　type="text/css"

　　　　此属性用来声明链接文档的数据类型。当链接的是一个CSS样式表时，它的值必须为text/css。其他的样式表语言需要写不同的值（例如，text/xsl）。此属性是必需的。

　　media="..."

　　　　使用这个属性，可以声明这个样式表只适用于某些设备。默认值是all(所有),这意味着样式文档将被用于在所有设备中。CSS认可的值有如下：all(所有设备)、screen（计算机屏幕）、print（打印预览模式/打印页面）、projection（投影）、aural（音响）、braille（盲人点字法反馈设备）、embossed（压花）、handheld（手持终端小屏幕、有限带宽），tv（电视机类型设备低分辨率、有限的滚屏能力）。以上所有值都可以在media属性中使用，如果同时使用多个值可以使用逗号分隔的样式将它们格式化。 此属性是可选的。

　　注意：

　　　　在该方法中，在自身的文档中引入外部样式表。这些样式表的文件扩展名（也称为文件的后缀名，是操作系统用来标志文件类型的一种机制）通常是css，如main-style.css。

　　　　link元素必须放在HTML和XHTML的head元素中，但基于XML的标记语言，可能有其他的要求。

　　案例

　　　　<link rel="stylesheet" type="text/css" href="http://www.my.site/styles/basic.css" >

　　　　<link rel="stylesheet" type="text/css" href="article.css" media="screen,projiction">

　　　　<link rel="stylesheet" type="text/css" href="printout.css" media="print">

　　浏览器支持

　　　　所有浏览器都支持值为 "screen"、"print" 以及 "all" 的 media 属性。

　　　　提示：在全屏模式中，Opera 也支持 "projection" 属性值。

2.STYLE 元素

　　　　STYLE元素可以在HTML和XHTML中创建一个嵌入式样式表的容器。

　　常见的语法

　　　　<style type="text/css" media="...">

　　属性

　　　　type="text/css"

　　　　此属性与LINK元素上的属性相同。此属性是必需的。

　　　　media="..."

　　　　此属性与LINk元素上的属性相同。这属性是可选的。

　　注意

　　　　styel必须放在HTML和XHTML的head元素中。

　　案例

　　<style>

　　h1{color: purple; border-bottom: 1px solid maroon;}

　　h2{color: blue; background: cyan;}

　　</style>

　　<style type="text/css" media="all">

　　pre,code,tt{font-family: monospace; color:#333;}

　　pre{margin-left:3em;}

　　</style>

3.STYLE 属性

　　　　HTML和XHTML 1.1版本下，任何元素都可以使用style属性。

　　常见的语法

　　　　<elem style="...styles...">

　　注意

　　　　此属性的值是样式声明的任意组合。因为这种方法是通过文档的内部放置的元素信息来将样式和元素紧密的结合在一起。当有更好的解决方案（例如：嵌入式或外部样式表。）的时候，不建议使用style样式属性。

　　案例

　　　　<p style="color: red;">这段文字将是红色的。</p>

　　　　<h1 style="font-family: sana-serif; color:magenta; padding: 0.5em; border-bottom:2px solid green; background: cyan;">这个h1标签会给你造成视觉上的震撼。</h1>

 

4.@import 规则

　　　　@import 规则类似链接元素导入一个外部样式表。因为没有实用性（我开发这么久就没用过），详细信息以后会介绍。

5.名词解释：

　　　　User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。