css实例教程:css命令,适配,注解,selector

日期:2020-12-13 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

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的1一部分,可是被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 systems 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" />
上面的描述意为:csstitle分成两组,defaultBig Text。又每组又被分成printscreen 假如有好几个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 style style是引进style sheet最通用性的方法。 <style type="text/css"> type:style一直应用type特性,当应用css时,type的值是“text/css”。 Media:与link中1样。 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); /* es 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 与老版本号访问器的适配难题 访问器对不可以鉴别的tag1律忽视。可是假如访问器不可以鉴别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特性是1个新特性,能够用到出現body元素中的全部元素上。 能够看到style的值是1个标识符串,应用和css1样的英语的语法。 可是这个标识符串只能是1个设计风格申明块declaration block。不可以将@import和css 标准放到这个标识符串中。便是说只能放css文本文档中出現在花括号中的文字。 留意:inline style不被强烈推荐应用,在xhtml1.1中inline style是抵制的 deprecated。由于,它显示信息违反数据信息和显示信息分离出来的标准。这个标准也是应用css的 缘故。 2 selector css关键的特性是将标准运用到元素集上的工作能力。 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