第4章学习一点CSS的语法ppt.ppt

《第4章学习一点CSS的语法ppt.ppt》由会员分享，可在线阅读，更多相关《第4章学习一点CSS的语法ppt.ppt（13页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第4章学习一点CSS的语法ppt Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望4.1 再访HTML4.1.1 组成HTML页面的细胞-标签再复杂的事情也是由相对简单的部分组合而成的，HTML也不例外。构成HTML页面的细胞，就是一个又一个的标签。我们在本节首先将截至目前学习过的HTML和CSS知识总结提炼一下。在前面的三章中，我们已经介绍了若干基本的标签，它们是：表示段落。表示正文表示字体的设置等。当然HTML的标签还有很多，在今后的章节中我们将陆续见到。不过，

2、既然它们都被称作标签，肯定有一些共性，其中书写的语法都是类似的，即如下的样子：4.1.2 CSS规则的具体写法具体而言，对某个标签应用CSS有如下两种方法：行内样式表：在标签定义中增加style=”CSS属性”这样的代码。外部样式表和内部样式表：首先在页面首部链接样式表文件或者直接编写样式表定义，然后在标签定义中增加class=”CSS选择器”来实现。CSS属性和CSS选择器就构成了一条CSS规则。那么，CSS属性和CSS选择器有什么区别呢？举个日常生活中的例子就比较好理解了。假设我们所在的单位要招聘员工，一名销售人员，一名网页设计师，其中网页设计师要求大学毕业，精通CSS/HTML，熟练使用

3、Dreamweaver软件等；销售人员则要求与人沟通能力强，有一定的客户群体，有销售经验等。这条广告放置在招聘网站之后，单位的人事部门就收到了不少人的简历。那么，如何从这些简历中找到符合条件的人呢？4.1.3 标签应用CSS规则的具体写法CSS规则已经有了，那么该如何让标签应用这个规则呢？上节已经提到了两种情况，下面分别讲述。【CSS规则处于内部样式表和外部样式表之中时】在这种情况下，我们需要在标签中增加一个属性，声明class=”CSS选择器”即可。代码包含了代码中的内部样式表，同时还有两个h2标签。代码 应用CSS规则：applycss-innerout.html在标签中应用内部样式表中的

4、CSS规则这是一个在标签中声明style=h2的标题。这是一个在标签中没有声明style=h2的标题。4.1.4 CSS选择器的种类-八种武器上一节我们遗留了一个问题，本节的末尾相信能够解决它。首先，介绍一下CSS选择器的种类。我们知道，选择器就好比招聘工作职位时的条件一样，是为了从众多的HTML标签中挑选出我们所需要设置样式的标签。因此，CSS选择器的分类就是根据选择HTML标签方法的不同而区分的。CSS选择器共有如下两大类八种。简单选择器。包括：类型选择器（Type Selectors）属性选择器（Attribute Seletors）ID选择器（ID Selectors）类选择器（Cla

5、ss Selectors）通配选择器（Universal Selectors）组合选择器后代选择器（Descendant Combinators）子选择器（Child Combinators）兄弟选择器（Sibling Combinators）4.1.5 伪类还记得在第3章我们所讲的链接4个状态吗？这里简单的复习一下，链接的状态一共有4种：链接正常状态。这时鼠标并未单击它。链接被掠过的状态。鼠标运动过程中某时刻处于链接之上，但尚未单击。链接被单击的状态。单击鼠标左键，链接产生作用，根据链接的设置，打开目标网页。链接单击后的状态。假如目标网页在新建窗口中打开，当前链接的状态。对应地，就有4种伪类

6、，A:link 表示链接正常状态。A:hover 表示链接被鼠标掠过的情况。A:active 表示链接被单击时的状态。A:visited 表示链接单击后的状态。4.1.6 伪类的排列顺序由于不同浏览器对于伪类支持的细节不同，伪类的不同顺序在个别情况下也会造成一些小麻烦，约定俗成的顺序就如代码4-12中所写的那样：A:link Color:Blue;A:visitedColor:Purple;A:hoverColor:Yellow;A:activeColor:Green;4.2 盒模型讲完了选择器这个重要的概念，下面来讲另一个同样重要，但理解起来不那么复杂的名词-盒模型。在开始之前，首先要明白H

7、TML标签可以被分为块元素、内联元素和可变元素。4.2.1 块元素、内联元素和可变元素块元素、内联元素和可变元素是HTML标签的3种不同类型。其中，块元素（block element）和内联元素（inline element）是主要的，它们的最大差异就是块元素一般都从新行开始。下面来分别介绍。【块元素】块元素（block element）顾名思义，它好比一块砖或者一个盒子，方方正正，同时能够包含其他元素，也就是可以成为其他标签的容器。块元素一般来说，都以一个新行开始，块元素标签内部是内联元素或者其他块元素的组合。常见块元素是段落标签,等等。当然，也有特殊情况，比如我们在后面章节将要讲到的表单标

8、签，它只能用来容纳其他块元素。如果没有特别设置CSS样式，多个块元素的显示将会按照顺序以每次另起一行的方式一直往下排-这是默认的布局方式。我们可以通过设置CSS改变它，把块元素摆放到想要的位置上去，而不是每次都单独另起一行。总结一下，块元素的特点就是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。如果与我们日常写的文章相类比，块元素类似一个段落。4.2.2 盒模型块元素或者以块元素方式显示的其他标签在浏览器中显示的时候，如果背景色和网页背景色不相同，可以看出有上、下、左、右四个边界，好像一个盒子，如图所示。一些块级元素：h2、div、p、s

9、pan标签 4.3 文档类型在第三章的末尾，我们用Dreamweaver为张三制作了一个电子简历，在代码中，我们发现有这样一行：这句代码是Dreamweaver自动为每一个新创建的网页加入的，如果有机会使用别的网页制作网站开发软件，比如Visual Studio等，都会发现它们也会增加类似的一行。那么，这行看起来很怪异的代码到底有什么作用呢？4.4 小结本章介绍了CSS技术中几个重要的概念和它们的应用：HTML页面的树形结构；选择器和它的种类；伪类；盒模型以及文档类型。选择器是用来选择页面上符合条件的标签的，只有将这些标签选择出来，才能有的放矢的应用样式。选择器的分类标准根据选择标签的方法而定，对于我们初学者，要熟练掌握如下的3种选择器：类型选择器：定义网页上某一种标签的样式，一次能定义一类标签，方便但不灵活。ID选择器：定义网页上某一个ID的标签样式，精确，但只能定义一个，用得多了会比较麻烦。类选择器：可以灵活的设置样式，不限于某一类的标签，只要在标签属性中加上Class=类选择器名称就可以应用样式，是最常用的一种选择器。