前端开发基础篇一.docx

【通用选择器】

到这里，前三种基本的选择器说完了，但是还需要给大家介绍一个CSS选择器中功能最强大但是用的最少的一种选择器“通用选择器”，就是“*”星号。

*{此处为CSS代码}

强大之处是因为他对整个网页中所有HTML标签进行样式定义，这种功能类似“标签选择器”，覆盖的对象更加广泛，是整个HTML的所有标签，功能是强大，但是这样反而限制了它的灵活性。

对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，所以要对HTML内的所有的标签进行重置，会将下面的代码加到CSS文件的最顶端：

*{margin:

0;padding:

0;}

为什么要这么用呢，因为每种浏览器都自带有CSS文件，如果一个页面在浏览器加载页面后，发现没有CSS文件，那么浏览器就会自动调用它本身自带的CSS文件，但是不同的浏览器自带的CSS文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的页面能够在不同的浏览器显示出来的效果都是一样的，那么我们就需要对HTML标签重置，就是上面的代码了，但是这样也有不好的地方，因为HTML4.01中有89个标签，所以相当于在页面加载CSS的时候，先对这89个标签都加上了{margin:

0;padding:

0;}，在这里我不建议大家这么做，因为89个标签中需要重置的标签是很少数，没有必要将所有的标签都重置，用到哪些标签就定义哪些标签，如下:

body,div,p,a,ul,li{margin:

0;padding:

0;}

如果还需要dl、dt、dd标签重置，那就在上面加上就可以了，如下:

body,div,p,a,ul,li,dl,dt,dd{margin:

0;padding:

0;}

用到哪些就写哪些，这点也可以看做衡量页面重构师制作页面水平的高低，以及是否专业的一个方面。

OK！

选择器的内容大家应该都明白了，如果不能完全理解也没有关系，到实战篇的时候使用一下就清楚了，但是这些选择器的格式应该记住，也是为后面实战做准备的，只有按照老师的要求，整个教程学下来才能达到相应的效果。

下面就继续讲解一下“选择器的集体声明”和“选择器的嵌套”

【选择器的集体声明】

在我们使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开，比如：

h1,h2,h3,h4,h5,h6{color:

#900;}

还有像上面刚刚讲的标签重置，就是利用的选择器的集体声明：

body,div,p,a,ul,li,dl,dt,dd{margin:

0;padding:

0;}

再举个例子，无论什么样的选择器，“标签选择器”，“ID选择器”，“类选择器”，只要是选择器，只要有公共的CSS代码，就可以用“选择器的集体声明”，起到精简代码的作用，有一段代码如下：

1.#header{font-size:

14px;background:

#ccc;}

2.div{font-size:

14px;width:

960px;}

3..blue{font-size:

14px;color:

#009;}

4..h1{font-size:

14px;font-weight:

normal;}

我们就可以将上面的代码进行精简，把公共的CSS代码用选择器的集体声明提取出来，有点类似小学的“提取公因式”似的，如下：

1.#header,div,.blue,h1{font-size:

14px;}

2.#header{background:

#ccc;}

3.div{width:

960px;}

4..blue{color:

#009;}

5..h1{font-weight:

normal;}

这是选择器的集体声明的经典应用，把共同的部分提取出来，这么做的好处，相同的部分共同定义，不同的部分单独定义，保证风格统一，样式修改灵活，这也是优化CSS代码的一块，要记住！

【选择器的嵌套】

选择器也是可以嵌套的，如：

#div1pa{color:

#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/

这样的好处就是不需要在单独的为ID为div1的标签内的p标签内的a标签单独定义class选择器或者ID选择器，CSS代码不就少了嘛~同样也是CSS代码优化的一块。

好，这节课主要讲解了四种CSS代码选择器、选择器的集体声明、选择器的嵌套三块知识，要掌握好，掌握牢固了，再强调一遍，这节也是为后面章节的实战做准备的，如果后面学习过程中对这节知识有遗忘，那就赶紧回来翻翻！

下课！

【知识三】CSS选择器命名及常用命名

规范的命名也是Web标准中的重要一项，标准的命名可以使代码更加易读，而且利于搜索引擎搜索，比如定义了两个div，一个id命名为“div1”，另外一个命名为“News”，肯定第二个比较易读，而且搜索引擎抓取率要高，在团队合作中还可以大大提高工作效率。

为了达到这种效果我们就要规范化命名（语义化命名）！

说个题外话，规范化命名的代码，会显着你更加专业！

关于CSS命名法，和其他的程序命名差不多，主要有三种：

骆驼命名法，帕斯卡命名法，匈牙利命名法。

看他们的名字挺不好理解的，不要被吓到了，其实很容易，不信的话继续往下看~

【骆驼命名法】

说到骆驼大家肯定会想到它那明显的特征，背部的隆起，一高一低的，我们的命名也要这样一高一低，怎么才能这样，就用大小写字母呗~，大写的英文就相当于骆驼背部的凸起，小写的就是凹下去的地方了，但是这个也是有规则的，就是第一个字母要小写，后面的词的第一个字母就要用大写，如下：

#headerBlock

第一个单词（header）的第一个字母（h）用小写，第二个单词（block）的第一个字母用大写（B），如果第二个单词后面还有单词呢？

那就是下面这种情况

.navMenuRedButton

第一个单词（nav）的第一个字母（n）用小写，第二个单词（menu）的第一个字母用大写（M），第三个单词（red）的第一个字母也用大写（R），第四个单词（button）的第一个字母还是用大写（B），同样后面所有单词的首字母都要大写。

【帕斯卡命名法】

这种命名法同样也是大小写字母混编而成，和骆驼命名法很像，只有一点区别，就是首字母要大写，如下：

#HeaderBlock

和骆驼命名法只有一点区别，就是所有单词的首字母都要大写，当然也包括第一个单词（header）的首字母（h）了，也要大写。

.NavMenuRedButton

如果有多个，也是全部单词的首字母均要大写。

题外话，如果说“骆驼命名法”是单峰驼的话，那么“帕斯卡命名法”就是双峰驼了~

【匈牙利命名法】

匈牙利命名法，是需要在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解，比如：

#head_navigation

.red_navMenuButton

以上三种，前两种（骆驼命名法、帕斯卡命名法）在命名CSS选择器的时候比较常用，当然这三种命名法可以混合使用，只需要遵守有一个原则“容易理解，方便协同工作”就OK了，或者说“即使不懂代码的人看了代码也知道这块起什么作用”，没有必要强调是哪种命名法，根据个人喜好使用就行。

以下为页面模块的常用命名：

头：

header

内容：

content/container

尾：

footer

导航：

nav

侧栏：

sidebar

栏目：

column

页面外围控制整体布局宽度：

wrapper

左右中：

leftrightcenter

登录条：

loginbar

标志：

logo

广告：

banner

页面主体：

main

热点：

hot

新闻：

news

下载：

download

子导航：

subnav

菜单：

menu

搜索：

search

友情链接：

friendlink

页脚：

footer

版权：

copyright

滚动：

scroll

小技巧：

tips

【知识四】盒子模型

盒子模型，是XHTML+CSS布局页面中的核心！

要想学会用CSS布局页面，就首先要理解盒子模型！

什么是盒子模型？

对于初学者来说，不容易理解，但是对于生活中的盒子大家应该熟悉，大到集装箱，小到铅笔盒，盒子模型你完全可以理解成现实生活中的盒子就可以了，不然怎么能起个名字叫“盒子模型”呢?

好！

既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西，