学习一点CSS的语法.ppt
第4章 学习一点CSS的语法,我们在前三章中已经熟悉了一些HTML和CSS的基本知识，还给张三做出了一个效果不错的电子简历。但是，如果面对更加复杂的需求，目前我们所了解的这些标签用法就有点捉襟见肘了，同时，我们在前几章中也遇到了一些不明白的名词，比如：伪类，选择符，等等。为了更扎实的学习CSS，有必要停下脚步，将前面的疑难解决之后再进行下一步的学习。本章的目的就是讲解CSS的几个重要名词，熟悉CSS的写法，为今后学习更多的HTML标签和CSS技巧做准备。,4.1 再访HTML,4.1.1 组成HTML页面的细胞-标签,再复杂的事情也是由相对简单的部分组合而成的，HTML也不例外。构成HTML页面的细胞，就是一个又一个的标签。我们在本节首先将截至目前学习过的HTML和CSS知识总结提炼一下。在前面的三章中，我们已经介绍了若干基本的标签，它们是：表示段落。表示正文表示字体的设置等。当然HTML的标签还有很多，在今后的章节中我们将陆续见到。不过，既然它们都被称作标签，肯定有一些共性，其中书写的语法都是类似的，即如下的样子：,4.1.2 CSS规则的具体写法,具体而言，对某个标签应用CSS有如下两种方法：行内样式表：在标签定义中增加style=”CSS属性”这样的代码。外部样式表和内部样式表：首先在页面首部链接样式表文件或者直接编写样式表定义，然后在标签定义中增加class=”CSS选择器”来实现。CSS属性和CSS选择器就构成了一条CSS规则。那么，CSS属性和CSS选择器有什么区别呢？举个日常生活中的例子就比较好理解了。假设我们所在的单位要招聘员工，一名销售人员，一名网页设计师，其中网页设计师要求大学毕业，精通CSS/HTML，熟练使用Dreamweaver软件等；销售人员则要求与人沟通能力强，有一定的客户群体，有销售经验等。这条广告放置在招聘网站之后，单位的人事部门就收到了不少人的简历。那么，如何从这些简历中找到符合条件的人呢？,4.1.3 标签应用CSS规则的具体写法,CSS规则已经有了，那么该如何让标签应用这个规则呢？上节已经提到了两种情况，下面分别讲述。【CSS规则处于内部样式表和外部样式表之中时】在这种情况下，我们需要在标签中增加一个属性，声明class=”CSS选择器”即可。代码包含了代码中的内部样式表，同时还有两个h2标签。代码 应用CSS规则：applycss-innerout.html在标签中应用内部样式表中的CSS规则这是一个在标签中声明style=h2的标题。这是一个在标签中没有声明style=h2的标题。,4.1.4 CSS选择器的种类-八种武器,上一节我们遗留了一个问题，本节的末尾相信能够解决它。首先，介绍一下CSS选择器的种类。我们知道，选择器就好比招聘工作职位时的条件一样，是为了从众多的HTML标签中挑选出我们所需要设置样式的标签。因此，CSS选择器的分类就是根据选择HTML标签方法的不同而区分的。CSS选择器共有如下两大类八种。简单选择器。包括：类型选择器（Type Selectors）属性选择器（Attribute Seletors）ID选择器（ID Selectors）类选择器（Class Selectors）通配选择器（Universal Selectors）组合选择器后代选择器（Descendant Combinators）子选择器（Child Combinators）兄弟选择器（Sibling Combinators）,4.1.5 伪类,还记得在第3章我们所讲的链接4个状态吗？这里简单的复习一下，链接的状态一共有4种：链接正常状态。这时鼠标并未单击它。链接被掠过的状态。鼠标运动过程中某时刻处于链接之上，但尚未单击。链接被单击的状态。单击鼠标左键，链接产生作用，根据链接的设置，打开目标网页。链接单击后的状态。假如目标网页在新建窗口中打开，当前链接的状态。对应地，就有4种伪类，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 盒模型,讲完了选择器这个重要的概念，下面来讲另一个同样重要，但理解起来不那么复杂的名词-盒模型。在开始之前，首先要明白HTML标签可以被分为块元素、内联元素和可变元素。,4.2.1 块元素、内联元素和可变元素,块元素、内联元素和可变元素是HTML标签的3种不同类型。其中，块元素（block element）和内联元素（inline element）是主要的，它们的最大差异就是块元素一般都从新行开始。下面来分别介绍。【块元素】块元素（block element）顾名思义，它好比一块砖或者一个盒子，方方正正，同时能够包含其他元素，也就是可以成为其他标签的容器。块元素一般来说，都以一个新行开始，块元素标签内部是内联元素或者其他块元素的组合。常见块元素是段落标签,等等。当然，也有特殊情况，比如我们在后面章节将要讲到的表单标签，它只能用来容纳其他块元素。如果没有特别设置CSS样式，多个块元素的显示将会按照顺序以每次另起一行的方式一直往下排-这是默认的布局方式。我们可以通过设置CSS改变它，把块元素摆放到想要的位置上去，而不是每次都单独另起一行。总结一下，块元素的特点就是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。如果与我们日常写的文章相类比，块元素类似一个段落。,4.2.2 盒模型,块元素或者以块元素方式显示的其他标签在浏览器中显示的时候，如果背景色和网页背景色不相同，可以看出有上、下、左、右四个边界，好像一个盒子，如图所示。,一些块级元素：h2、div、p、span标签,4.3 文档类型,在第三章的末尾，我们用Dreamweaver为张三制作了一个电子简历，在代码中，我们发现有这样一行：这句代码是Dreamweaver自动为每一个新创建的网页加入的，如果有机会使用别的网页制作网站开发软件，比如Visual Studio等，都会发现它们也会增加类似的一行。那么，这行看起来很怪异的代码到底有什么作用呢？,4.4 小结,本章介绍了CSS技术中几个重要的概念和它们的应用：HTML页面的树形结构；选择器和它的种类；伪类；盒模型以及文档类型。选择器是用来选择页面上符合条件的标签的，只有将这些标签选择出来，才能有的放矢的应用样式。选择器的分类标准根据选择标签的方法而定，对于我们初学者，要熟练掌握如下的3种选择器：类型选择器：定义网页上某一种标签的样式，一次能定义一类标签，方便但不灵活。ID选择器：定义网页上某一个ID的标签样式，精确，但只能定义一个，用得多了会比较麻烦。类选择器：可以灵活的设置样式，不限于某一类的标签，只要在标签属性中加上Class=类选择器名称就可以应用样式，是最常用的一种选择器。,
