css教程:css指令,兼容,注释,selector

概述1．2 跟css有关的标记，指令1．2．1 link<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />link标记的用意是允许将html与其他文档相关联。Css用link将css文档与html文档想关联。Css文档虽然不是html的一部分，但是被html… 1．2 跟CSS有关的标记，指令1．2．1 link<link rel="stylesheet" type="text/CSS" href="sheet1.CSS" media="all" />link标记的用意是允许将HTML与其他文档相关联。CSS用link将CSS文档与HTML文档想关联。CSS文档虽然不是HTML的一部分，但是被HTML使用，从外部style sheets引入它。link在head元素内，但是不能放在任意head子元素的内部，比如Title。CSS文档的后缀名虽然不要求，但是有些浏览器不能识别非“.CSS”的文件。link的属性：    rel：代表relation，设为stylesheet。    type：描述数据的类型，设为text/CSS，告诉浏览器style sheet是CSS格式的。以后还会有其他的style sheet，比如xsl。    href：style sheet的url。    Media：指定style sheet的使用范围。下列大多数值还不被任何浏览器支持，常用的是all，print，screen。Opera支持projection。可以为media指定多个值，比如media="screen,projection"all Use in all presentational media. aural Use in speech synthesizers,screen readers,and other audio renderings of the document. braille Use when rendering the document with a Braille device. embossed Use when printing with a Braille printing device. handheld Use on handheld devices like personal digital assistants or web-enabled cell phones. print Use when printing the document for sighted users and also when displaying a "print prevIEw" of the document. projection Use in a projection medium,such as a digital projector used to present a slIDeshow when delivering a speech. screen Use when presenting the document in a screen medium like a desktop computer monitor. All web browsers running on such sy@R_419_6563@s are screen-medium user agents. tty Use when delivering the document in a fixed-pitch environment like teletype printers. tv Use when the document is being presented on a television.    Title：利用Title定义多个CSS文档相互替换的关系。       比如存在如下定义：    <link rel="stylesheet" type="text/CSS" href="sheet1.CSS" Title="Default" /> <link rel="alternate stylesheet" type="text/CSS" href="bigtext.CSS" Title="Big Text" /> <link rel="alternate stylesheet" type="text/CSS" href="zany.CSS" Title="Crazy colors!" />那么能同时支持多个CSS定义的浏览器中会有如下表现：

       还可以通过将Title设定为相同的value来分组：

<link rel="stylesheet" type="text/CSS"

   href="sheet1.CSS" Title="Default" media="screen" />

<link rel="stylesheet" type="text/CSS"

   href="print-sheet1.CSS" Title="Default" media="print" />

<link rel="alternate stylesheet" type="text/CSS"

   href="bigtext.CSS" Title="Big Text" media="screen" />

<link rel="alternate stylesheet" type="text/CSS"

   href="print-bigtext.CSS" Title="Big Text" media="print" />

上面的表述意为：CSS被Title分为两组，default和Big Text。又每一组又被分为print和screen。

 如果有多个link元素，那么只有rel等于stylesheet的link可用。如果可用的link有多个，就会将它们同时作用于HTML文档，如下：<link rel="stylesheet" type="text/CSS" href="basic.CSS" /> <link rel="stylesheet" type="text/CSS" href="splash.CSS" /> 1．2．2 stylestyle是引入style sheet最通用的方式。<style type="text/CSS">type：style总是使用type属性，当使用CSS时，type的值是“text/CSS”。Media：与link中一样。 style以<style type="text/CSS">开头，以</style>结束，中间是多个styles。这些styles或者指向style sheet文档，或者以内嵌的方式表达。Style元素可以包含多个styles，也可以通过@import指令引入多个指向外部style sheet的链接。1．2．3 @import指令用法：

<style type="text/CSS">

 @import url(styles.CSS); /* @import comes first */@import url(blueworld.CSS);@import url(zany.CSS); h1 {color: gray;} </style>可见其作用类似link，l         通知浏览器将外部style sheet载入。l         并且可以载入多个style sheet。区别是l         位置与语法不同。@import被包含在style元素中，并且必须在其他CSS规则之前。l         每一个import的style sheet都会被使用，没有替代规则。相对于link的media属性，import有：@import url(sheet2.CSS) all; @import url(blueworld.CSS) screen; @import url(zany.CSS) projection,print;@import的重要用途：在导入的某个style sheet A中，A需要也使用外部的style sheet，这时link元素显然无用。比如CSS文档中，是不可能出现link元素的，这时使用@import，如下：@import url(http://example.org/library/layout.CSS); @import url(basic-text.CSS); @import url(printer.CSS) print; body {color: red;} h1 {color: blue;}1．3 与老版本浏览器的兼容问题浏览器对不能识别的tag一律忽略。但是如果浏览器不能识别style元素，style会以普通文本的形式出现在网页的最上面。解决方案：在style里面加上注释符号，这样旧版本的浏览器不会以文本方式显示，新版本浏览器可以正确使用style元素。具体如下：<style type="text/CSS"><!-- @import url(sheet2.CSS); h1 {color: maroon;} body {background: yellow;} --></style>1．4 CSS中的注释CSS的注释类似c：/* This is a CSS1 comment */Comments can span multiple lines,just as in C++:/* This is a CSS1 comment,and it can be several lines long without any problem whatsoever. */但是注意：CSS的注释不能被嵌套。1．5内联风格inline style将style放到HTML元素描述的地方，就是inline style<p style="color: gray;">The most wonderful of all breakfast foods is  the waffle--a rIDged and cratered slab of home-cooked,fluffy goodness... </p>这个style属性是一个新属性，可以用到出现body元素中的所有元素上。可以看到style的值是一个字符串，使用和CSS一样的语法。但是这个字符串只能是一个风格声明块declaration block。不能将@import和CSS规则放到这个字符串中。就是说只能放CSS文档中出现在花括号中的文本。 注意：inline style不被推荐使用，在xhtml1.1中inline style是反对的deprecated。因为，它显示违背数据和显示分离的原则。这个原则也是使用CSS的原因。2 selectorCSS核心的特点是将规则应用到元素集上的能力。 CSS2规范种关于selector的部分，http://www.w3.org/TR/REC-CSS2/selector.HTML  CSS的模式匹配pattern matching规则（CSS规范，地址如上）：

Pattern	Meaning	Described in section
*	Matches any element.	Universal selector
E	Matches any E element (i.e.,an element of type E).	Type selectors
E F	Matches any F element that is a descendant of an E element.	Descendant selectors
E > F	Matches any F element that is a child of an element E.	Child selectors
E:first-child	Matches element E when E is the first child of its parent.	The :first-child pseudo-class
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).	The link pseudo-classes
E:active E:hover E:focus	Matches E during certain user actions.	The dynamic pseudo-classes
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifIEs how language is determined).	The :lang() pseudo-class
E + F	Matches any F element immediately preceded by an element E.	Adjacent selectors
E[foo]	Matches any E element with the "foo" attribute set (whatever the value).	Attribute selectors
E[foo="warning"]	Matches any E element whose "foo" attribute value is exactly equal to "warning".	Attribute selectors
E[foo~="warning"]	Matches any E element whose "foo" attribute value is a List of space-separated values,one of which is exactly equal to "warning".	Attribute selectors
E[lang|="en"]	Matches any E element whose "lang" attribute has a hyphen-separated List of values beginning (from the left) with "en".	Attribute selectors
div.warning	HTML only. The same as div[class~="warning"].	Class selectors
E#myID	Matches any E element ID equal to "myID".	ID selectors

总结

以上是内存溢出为你收集整理的css教程:css指令,兼容,注释,selector全部内容，希望文章能够帮你解决css教程:css指令,兼容,注释,selector所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。