学习一点CSS的语法.pptVIP

我们在前三章中已经熟悉了一些HTML和CSS的基本知识，还给张三做出了一个效果不错的电子简历。但是，如果面对更加复杂的需求，目前我们所了解的这些标签用法就有点捉襟见肘了，同时，我们在前几章中也遇到了一些不明白的名词，比如：伪类，选择符，等等。为了更扎实的学习CSS，有必要停下脚步，将前面的疑难解决之后再进行下一步的学习。本章的目的就是讲解CSS的几个重要名词，熟悉CSS的写法，为今后学习更多的HTML标签和CSS技巧做准备。12第4章学习一点CSS的语法4.1再访HTML4.1.1组成HTML页面的细胞---标签再复杂的事情也是由相对简单的部分组合而成的，HTML也不例外。构成HTML页面的细胞，就是一个又一个的标签。我们在本节首先将截至目前学习过的HTML和CSS知识总结提炼一下。在前面的三章中，我们已经介绍了若干基本的标签，它们是：p表示段落。body表示正文font表示字体的设置等。当然HTML的标签还有很多，在今后的章节中我们将陆续见到。不过，既然它们都被称作标签，肯定有一些共性，其中书写的语法都是类似的，即如下的样子：标签名称属性=属性值/标签名称具体而言，对某个标签应用CSS有如下两种方法：1行内样式表：在标签定义中增加style=”CSS属性”这样的代码。2外部样式表和内部样式表：首先在页面首部链接样式表文件或者直接编写样式表定义，然后在标签定义中增加class=”CSS选择器”来实现。3CSS属性和CSS选择器就构成了一条CSS规则。4那么，CSS属性和CSS选择器有什么区别呢？举个日常生活中的例子就比较好理解了。假设我们所在的单位要招聘员工，一名销售人员，一名网页设计师，其中网页设计师要求大学毕业，精通CSS/HTML，熟练使用Dreamweaver软件等；销售人员则要求与人沟通能力强，有一定的客户群体，有销售经验等。这条广告放置在招聘网站之后，单位的人事部门就收到了不少人的简历。那么，如何从这些简历中找到符合条件的人呢？54.1.2CSS规则的具体写法4.1.3标签应用CSS规则的具体写法CSS规则已经有了，那么该如何让标签应用这个规则呢？上节已经提到了两种情况，下面分别讲述。【CSS规则处于内部样式表和外部样式表之中时】在这种情况下，我们需要在标签中增加一个属性，声明class=”CSS选择器”即可。代码包含了代码中的内部样式表，同时还有两个h2标签。代码应用CSS规则：applycss-innerout.htmlhtmlheadtitle在标签中应用内部样式表中的CSS规则/titlestyle!—/*对页面上所有的H2标签都设置样式规则*/H2{ Color:white; Background-color:green;}--/style/headbodyh2class=h2这是一个在标签中声明style=h2的标题。/h2hrnoshadeheight=1h2这是一个在标签中没有声明style=h2的标题。/h2/body/html4.1.4CSS选择器的种类-八种武器上一节我们遗留了一个问题，本节的末尾相信能够解决它。首先，介绍一下CSS选择器的种类。我们知道，选择器就好比招聘工作职位时的条件一样，是为了从众多的HTML标签中挑选出我们所需要设置样式的标签。因此，CSS选择器的分类就是根据选择HTML标签方法的不同而区分的。CSS选择器共有如下两大类八种。简单选择器。包括：类型选择器（TypeSelectors）属性选择器（AttributeSeletors）ID选择器（IDSelectors）类选择器（ClassSelectors）通配选择器（UniversalSelectors）组合选择器后代选择器（DescendantCombinators）子选择器（ChildCombinators）兄弟选择器（SiblingCombinators）4.1.5伪类还记得在第3章我们所讲的链接4个状态吗？这里简单的复习一下，链接的状态一共有4种：链接正常状态。这时鼠标并未单击它。链接被掠过的状态。鼠标运动过程中某时刻处于链接之上，但尚未单击。链接被单击的状态。单击鼠标左键，链接产生作用，根据链接的设置，打开目标网页。链接单击后的状态。假如目标网页在新建窗口中打开，当前链接的状态。对应地，就有4种伪类，A:link表示链接正常状态。A:hover表示链接被鼠标掠过的情况。A:active表示链接被单击时的状态。A:visited表示链接单击后的状态。4.1.6伪类的排列顺序由于不同浏览器对于伪类支持的细节