[音乐]

大家好，今天呢我们来学习CSS的高级属性

首先呢我们来看一个列表属性，在列表属性里面主要有四个

属性，第一个是type，也就是它的类型，我们可以通过type

来设置列表项标志的类型；第二个呢是image

图像，那么我们可以将某一个图像设置为列表项的标志

第三个position，设置列表中列表项标志的具体位置

还有一个是一个组合属性，是我们前面三个属性的一个组合

当然了这个list-style这个组合属性呢这个里面在使用的时候呢前面三个的顺序呢可以任意

也可以只写其中的某一部分比如说我们只有类型和图片，那么这时候呢

剩下的项目都按照它缺省值来处理，我们看到这个有一个例子

ol我们知道，前面我们是html的列表

有序列表就是用ol来表示，那么这个里面我们用type的时候用到的是一个

lower-roman，是小写的罗马字母那么这总共呢有多少种可能性呢？大概十种

这个大家也不要去死记硬背，那么根据我们的情况，如果你要用到某一个具体的这个项目标志，那么我们就来设置相应的值就可以了

还有这个position，position呢它值呢主要有三种

一个是inside，再一个是outside，还有一个 inherit。

inside呢指的是列表项目标记放置在文本以内并且呢，如果说环绕文本的话，那么要标记对齐

outside呢，它是属于我们position的默认值保持标记位置位于文本的左侧，并且呢

列表项目标记放置在文本以外，这个主要体现在环绕文本呢不根据标记对齐，那么有可能会出现不对齐的形式

当然了，最后一个是继承，它指的是从父元素继承position属性的值。

Style继承，样式继承那么样式继承呢我们先来看一个例子，这里面呢我们定义，CSS里面我们定义了

四种样式，分别作用的对象是body、 p、 a、

h2，这个我们前面学HTML我们都知道 body是页面的主体，p呢是某一个段落，a呢是超链

h2是标题，那么我再看这个输出的内容从这个输出内容以及我们具体的CSS的定义

实际上我们可以看到This is a heading是一个标题，它采用了

加粗并且是文本居中，没有问题，是h2的这个标准样式还有一个，这是一个段落，A

styled paragraph，这个是一个段落，这个段落定义的是红色的

并且呢背景色是青色，然后呢，底下呢有一个列表，这个列表也有单独的定义

实际上我们还可以看到在这个段落中呢有一个Previous slides

这个是颜色是不一样并且加了下划线，这个其实就是我们的超链超链呢我们要求加上下划线

因此呢，实际上我们这四种样式里面呢它都有自己的特点，并且呢，实际上我们可以看到

最明显的h2，h2它并没有设置啥？背景颜色，没有设置背景颜色，那自然而然它就继承了body的

背景颜色，所以是黄色的，在这个段落里面它自己单独设置了背景颜色，所以就按它自己设置的

来处理，所以这个是我们样式的继承从这个上面的例子中呢实际上我们得到了一些结论

多种样式应用到一个元素的时候呢，样式呢会被继承并且在继承的时候呢实际上更紧的匹配

可以覆盖一般意义的继承，就像我们刚才所说的我们这个段落自己指定了一个背景样式

那么这样的话就可以覆盖掉原来body

它指定的背景颜色样式，那么有些时候呢样式

也会发生冲突，比如说在这里面呢大家可以看到我们定义了两类样式，其中第一个样式里面涉及到三个

标识、 html标识；第二个呢，是单独的一个h2，那么这两个里面都出现了

h2，并且呢颜色都出现了具体不同的值，一个是蓝色一个是红色

内容最后显示出来的是红色，那么这个告诉我们什么意思呢？实际上呢对这个h2而言，完全是按第二个样式来定义的

这个呢实际上给我们说明如果说冲突的话后面的样式是有优先权的，还有一个ID和ID选择器

ID还有后面我们讲的类实际上是CSS中非常中重要的

两个内容，我们先看ID，这里面呢HTML中我们出现了一个

ID的标签，并且呢这个ID的名称是mission 这个实际上就是我们在HTML中ID出现的情况

那么这个ID怎么用呢？这里面有一个CSS，我们直接给它设置为是倾斜的

所以呢这个mission所引入的这个段落呢最后可能会出现这样的情况

都倾斜了，那么这是ID的具体使用并且呢，由于它是ID，ID呢它具有唯一性

一个页面上呢允许给任何元素一个唯一的ID

每个页面ID必须唯一，并且只能用一次，就像我们的身份证号一样我们每个公民身份证号都是唯一的

ID呢也具有唯一性还有一类，它也是通过ID，这个我们前面给大家实际上说过，叫锚点

我们看看这个例子，它这里面呢有一个downloads前面带了个#

还有一个mission前面带了个#，这两个呢其实都是我通过我们的

ID来完成的，那么它最大的一个特点是前面带了一个#

利用它呢实际上我们可以连接到某个页面的某一部分

这个前面我们在HTML里面我们给大家提到过所以呢我们说一个链接可能包含ID，但是这个ID前面要加一个#

浏览器如果说载入相关页面的时候呢它可以滚动到包含某一个ID元素的地方

再一个就是类，CSS 里面另一个非常重要的内容，类的定义也很简单

你像这里面用了三个类，实际上是两种有一个是重复的，也就是说三段里面我用了两个类，一个是shout

一个是special，它的关键词呢就是class，最后的这个输出呢我们暂且不看，因- 为CSS我们这里还没给出

总之呢它这块儿用到了两个类，类呢可以为一组元素设置相同的样式

我们刚才提到ID，说ID呢只能用一次，但是在我们具体使用的时候呢，经常会遇到啥呢？

我们很多段落很多元素都需要设置相同的格式但是ID只能用一次，怎么办呢？

好，我们提出了类，很多元素呢都可以用相同的啥？样式所以呢，类呢是可以重复使用，可以多次使用的

这是它和ID的一个最大的差别类选择器

我们看那个CSS，这里面呢就是我们刚才两个类，一个是special，一个是shout

大家可能看到有一些差异，刚才我们用ID的时候是#，现在呢是

点，.special，.shout，并且呢这里面

还有个差别，前面一个呢直接是.special，后面是p.shout，什么意思呢？

实际上对special而言的话，它指的是任何元素都可以使用这个我们special，但是第二个就不一样了，它是p.shout

指的是仅仅p元素呢可以使用shout，所以呢这个是有差异的

因此呢造成这个输出内容呢也是有差异的所以这个是我们的类选择器

当然呢有些时候呢我们会出现啥？多个类的混合最典型的就像我们这里面第三行

也就是第二个段落，它出现了一个special空格shout

并且呢前面是一个class，那么实际上呢这个class 呢就是special和shout两个类的一个综合

因此呢实际上我们看第二段的话，也能够明显看出它既发生了倾斜

又是红色字体，也就是说把两个special 和shout这个CSS的相关属性和值综合起来了

所以这个叫多类的混合，再一个非常重要的叫

伪类选择器，为什么叫伪类呢我们不去研究它，但是大家应该知道我们CSS里面常用的伪类，一个是active

还有hover，link，visited，focus，比如像active 这个指的是，向被激活的元素添加样式。

我们点一个超链接，这个超链接被激活了。

还有一个 :hover，当鼠标悬浮在元素上方的时候。

:link，未被访问的链接。

:visited，已经被访问的链接。

:focus，它本身是焦点的意思，指的是拥有键盘输入焦点的相关样式。

所以呢，这个都和我们的超链是密切相关的。

有的同学在使用的时候呢，也能够发现这一点。

我们把鼠标移动到某个超链上，它的颜色就发生变化了，甚至大小会发生变化。

那么原因就是使用了伪类选择器。

这个呢我们也结合具体的例题，给大家再详细介绍。

这里面有一个简单的一个示例，大家可以看到这里面用到了四类 link、

visited、 hover、 active，并且定义的颜色都是不一样的。

自然而然，它实际上是为了区分我们每种状态，每种状态颜色都是不一样的。

这是伪类选择器的一个简单的例子。

还有一个非常重要的，这个实际上属于页面、页面布局的内容，分节 div。

可能我们同学都听说过 div + css。

实际上呢 div + css 严格意义上来讲，它并不是一个很科学的说法。

但是，实际上正是由于 div 和 css 结合起来能够实现我们页面的布局，并且非常简便快捷。

因此呢，实际上现在有很多输入机都是 div + css。

好，我们先把这个 css 内容给大家，还是前面的，一个 special，一个是 shout。

那么下面的例子我们要用到这样的 css 定义，注意看，我们现在出现了一个这样的 HTML 代码。

div 然后后面跟了一个 class shout，最后有一个 div 的结束。

那么这一段文字呢，实际上呢就是一个分区，它 div 本身呢其实就是在 HTML

页面中呢，它的一个部分，或者是一个分割区，把它独立开来。

我们可以认为它是一个容器，就是 div 的功能。

该标签呢实际上用来指出页面的逻辑区域。

缺省情况下，它是不显示的，但是呢可以应用样式。

第二个呢一般应用于相对来说面积比较大，一个连续的区域。

实际上还有一类，span，span 呢它只是在一个小范围内去应用。

那么，这里面有一个例子大家可以看一下，这块呢，在第一个段落里面有一个

class special，实际上是这个 Spectacular 这个单词。

那么，第二个段里面有一个 any advertised

price，最后这个结果呢是这样的，大家可以看到，

span 呢，它实际上也是不显示的，但是可以

应用样式，并且应用样式的时候呢，也跟我们前面的 div

这个没有什么太大的差别，不在屏幕显示，可以应用样式。

这是我们 span 的用法。

好，我们来学习一下上下文选择器。

首先，看一个代码。

这个红色部分呢是我们 HTML 代码，我们现在用红色的这个标注一下。

现在是这样的，说明每个列表项中我们都重复加了一个 newsitem

，同一个类，这个显然是重复度比较高，而且比较麻烦，现在我们这样里面有

4 个列表项，如果是 40 个、 400 个项呢？显然呢，如果这样加的话太费时间、

效率太低，那怎么办呢？实际上呢，我们可以这么去做，我们通过一个后代选择器。

后代选择器的语法呢，outerSelector，然后呢空格，innerSelec- tor，

里面呢都跟我们前面定义是一样，是它的属性和值。

那么对于这么一个例子，我们现在把刚才这个变一下，这个

newslist，我们从这个 li，也就是列表的具体项变到 ui，变到这块。

那么这样一来呢，实际上呢我们就能够做到

我们刚才所需求的，哪怕你这后面再添加任意多列表项目。

但是，这里面需要注意，我们在这块儿用的时候呢，大家注意看，

css 定义呢实际上已经发生了一些变化。

怎么定义呢？首先呢，newslist 是我们的一个类，所以加一个点， .newslist，然后是空格 li。

所以，在这块儿呢，这个 outerSelector 是 .newslist，

innerSelector 是我们 li，那么指的是，对类 newslist

下面的列表项，使用我们所设置的格式，黄色的、加粗的。

这个我们可以来看一下它的运行效果，没有问题。

然后，我们再往下看一眼，子元素选择器。

outerSelector、 innerSelector，这个好像都没有太大的差别，包括属性值。

唯一的差别在于啥呢，把空格变成了一个大于号。

这有什么区别呢？好，不急，我们先看一看具体的例子。

现在呢，我们有这么一个例子，实际上是一个列表的嵌套。

那么我们同样采用了这个 css ，大家注意看。

首先呢，给 li，也就是列表，我们定义了一种样式。

同样的我们还定义了一个子元素选择器的样式，这个和我们语法也是一样的，把刚才的这个空格换成大于号。

那么，如果是这样的 css 设置的话，诸位想一想，这个最后出现的结果是什么样子呢？·

你们先试想一下，好，我们来看一下它这个结果到底是什么样子，跟你们想象的是否是一致的。

我们现在看到的结果呢，不知道和你们诸位想象的是否是一致，我们给大家解释一下为什么会是这个结果。

好，首先来看，我们顶层的列表项是黄色的，我们找顶层的列表项是黄色的。

那么应该是 newslist 下面的 li，它这个背景色是黄色的，并且是加粗的，没有问题。

然后第二层的列表项，它是黑色的，并且呢那个背景色呢，是青色的、

没有加粗，那么也就意味着，实际上呢，我们在这个顶层列表项我们使用了 .newslist > li。

在二级列表项里面，我们只使用了一个单独定义的 li，为什么会出现这样的情况呢？

实际上，这个就是我们所说的子元素选择器。

所谓的子元素选择器呢，意味着在子元素选择器里面定义的所有的属性的值，

只针对子元素一级的是有效的。

那么再往下的话，就不是子元素了，属于孙子元素。

孙子元素的话，是没有效果的。

那么在这种情况下呢，当然它不管是子元素还是孙子元素，都属于我们的啥，

列表，因此呢，孙子元素就用到了这个 li，

而我们的子元素就用到了 .newslist > li。

因此，这是我们最终看到的这个结果，好，这是子元素选择器。

我们再来看一个示例，这里面呢，我们首先看这个 css

，明显地这是一个后代选择器，li strong。

li 我们找 li，后面要跟一个 strong，那么 li

strong 意味着这一部分内容是 best，那么也就是 best

最后要加一个下划线，最后输出的结果没有问题，正确。

然后再来看一个示例，我们还是看 css。

这个 css 感觉比较长，首先呢是一个 id，它的名字是 ad 带了一个 # 号。

然后呢，第二部分是 li.important。

最后一级，是 strong，那么也就意味着实际上呢，这个是我们的一个后代选择器的一个三层结构。

最外面的是 ad，我们找，在 HTML 里面找到 ad。

然后再找底下的 li，我们找到了，li 里面有一个 important， important 里面有一个 strong。

结果这个内容呢还是 best，目的还是得设置下划线，所以，

最终这个结果应该还是 best 带了一个下划线，其他的一概不变。

结果跟我们想象的是一致的，其实呢，紧跟的还有一个列表，就是这个 act。

它实际上 act while supplies，这里面呢，实际上有

ad、有 li，但是这里面没有 important。

除了 important 之外呢，这里面实际上跟前面完全是一样的，就差一个 important。

那么即使在这种情况下，因为我们是属于这个后代继承，所以呢，你既然没有 important，所以你也不能应用这个样式。

因此呢，我们底下的任何元素，像这个 while supplies last，

没有加下划线，所以这也能够帮助大家去理解我们整个这个应用。

特征，我们这个说了很多，但是有些时候呢总会有些冲突。

比如说，我们这块，看到这个 HTML 还有这个 css，尤其这个 css，大家可能看了都有点头疼。

是不是啊，因为它这里面的定义太多了，现在问，你这个结果到底是什么呢？大家可以看一下，

你这个相关的文字它实际上四种里面都有，div p，div

p有，还有一个 top>p，并且是属于子继承、子选择器，没有问题。

再一个 p，p 当然也是了， .new 一个类没有问题，也是，所以这四种实际上都有。

在这里面都出现了，那结果到底是什么样子呢？我们来看一下啊，我们先看结果，然后再分析为什么。

啊，我们看到结果了，最后是啥，居中显示，我们再回过头来看看哪一个样式是居中显示。

好，我们看到了，实际上就是这个第二条， #top >

p，这个设置的是居中，其他都是左、右，要么是两端对齐。

那么为什么会居中呢？实际上就涉及到我们当出现冲突的时候，我们怎么去处理它。

当然我们这里面给出来一个原则，高分者优先。

什么分数呢？如果出现冲突，我们以最高分者、优先级最高，这样的原则去处理。

那么分数怎么得呢？我们给了一个规则，规则中规定任何 HTML 元素，我们给它记 1 分。

如果遇到类，我们记 10 分，遇到 ID 我们记 100 分。

这样的话呢，相关的元素、类、 ID 都有自己的记分值。

那么，因此如果说我们有相关的这个选择器，我们可以给它一个得分，这个里面我们可以看到。

你怎么算分呢？比如一个 p，它就是一个标识，所以记1 分。

比如一个 .banner，这是一个类，记 10 分。

好，再看，div.box > p.banner，

div，元素，1 分；box 是一个类，10 分，就 11 分了。

然后p呢，是一个元素，1分，12 分了； banner，类，10 分，22 分。

所以呢，我们可以通过这样的话，就计算它的得分值，最后呢，算出到底以哪个 css 选择器的样式为准。

好了，咱们在这一讲里面呢，给大家介绍了 css

的一些高级属性，并且我们给大家介绍了，像 div、

span 这样应用于样式的相关的 HTML 元素。

而且呢，我们给出了在 css 样式中的一些冲突的处理办法。

这些所学的内容呢，还需要我们大家在这个大量的实践中去不断的练习，掌握它。

好，那么我们这一讲呢先给大家讲到这里，谢谢大家！

CSS高级属性

基于.Net的Web开发技术

与讲师见面