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

2020-05-11 18:28:13易采站长站整理

@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 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).