[div+css第三讲.pptVIP

别具光芒《CSS网页布局案例剖析》 软件教研室:顾海燕 第1章　从基础开始 1.1　(X)HTML与CSS 1.2　基本CSS选择器 1.3　在HTML中引入CSS的方法 1.4　动手体验CSS 1.5　网页使用的编辑软件 1.6　CSS的复合选择器 1.7 CSS的继承特性 1.8　CSS的层叠特性 1.9　本章小结 1.5 网页使用的编辑软件 上面的实践中，我们完全是使用自己编写代码的方式完成的，这就要求制作者对CSS的属性非常了解，否则就会比较吃力。 除了普通的文本编辑软件之外，网页设计师也经常使用一些可视化的网页制作软件。 目前最流行的两个可视化网页制作软件是Adobe公司开发的Dreamweaver和微软公司开发的Expression Web，二者功能比较接近。 1.5.1 可视化网页制作软件的优点 网页制作这项工作出现的时间并不长，因此存在大量的入门用户，使用可视化的方式更适合入门，因此有很大的市场需求。 此外，一个重要原因是以前大都使用表格布局，给设计师提供了不用理解代码、直接在软件中拖曳就可以制作网页的可能，因此Dreamweaver等软件就得到了极大地普及。 在软件中可以同时显示网页代码的网页设计效果以及相关的很多功能。 在编辑CSS样式时，软件提供了CSS属性面板和对话框，在面板和对话框中可以通过“选择”的方式输入CSS属性值，而不必手工输入属性名称。 使用可视化方式设置的CSS，本质上和在代码视图中输入CSS样式代码是完全一样的。 1.5.1 可视化网页制作软件的优点 1.5.2 可视化软件的局限性 尽管软件中有CSS设置的面板，可以在里面选择并输入 CSS的属性值，但是如果用户并不真正理解这些属性的含义和作用，这些面板的作用也不大。 例如：padding: 15px; 如果用户已经深入的理解了这些属性的原理，就会发现用那些属性面板来设置CSS属性，效率并不高，还不如直接输入代码方便快捷。 这和表格布局是很不一样的，因为一个复杂的布局表格，要计算出表格HTML代码，是很花时间的，而软件可以生成出非常精确的代码，所以软件的作用就很大了，但是CSS完全不是这样的。 1.5.2 可视化软件的局限性 正确看待软件的作用 1.在输入代码的时候的代码提示功能和错误提示功能。 如输入属性的第一个字母时，可根据列出的属性进行选择，可避免写错，提高了效率。 2.尽管预览（设计）视图中的效果和实际浏览器中的效果有一定的差距，但是还是有些提示作用的。 因此，对待可视化的软件，不能过于依靠它，关键还是要自己把CSS彻底搞明白，然后根据自己的习惯，再来利用软件提高工作效率。 1.5.3 善于使用代码视图的功能 1.代码染色 代码视图支持代码染色。根据代码中每个单词的不同成分，软件以不同的颜色显示他们，这样可以帮助用户在繁多的代码中辨识需要寻找的位置。 1.5.3 善于使用代码视图的功能 2.快速选择代码 一个页面可能会很长，几百甚至几千行，这时如果需要找到某一个特定功能位置，就很麻烦。一个方便的方法是利用代码上端的“快速标记选择器”进行选择。 3.代码提示（智能感知） 在代码视图中，在需要输入属性名称的地方，会自动出现一个下拉框，列出属性名称。如color属性。 在输入一个属性名称以后，输入冒号，如果属性值是颜色，那么会出现可供选择的颜色名称列表。如color属性。 如果一个属性的属性值需要输入多个参数，在输入时除了提供备选值之外，还会给出参数含义的提示，这样也给设计师提供了很好的备忘录。如background-position属性。 1.5.3 善于使用代码视图的功能 4.错误提示 即使上面的措施都没有避免输入了错误的属性名称或属性值，软件还会给出提示。例如，如果把“color”属性名拼写错为“colorr”，那么在它的下面会出现红色波浪线。如果希望知道错误原因，只要把鼠标指针放到单词上面，软件就会给出错误原因的提示。因此只要在代码中看到有错误提示的地方，都应该修改正确。 如果用户可以非常熟练的使用代码视图的辅助功能，就可以大大提高编写的效率。 1.6 CSS的复合选择器 1.2节介绍了3种基本的选择器（标签选择器、类选择器、ID选择器），以这3种基本选择器为基础，通过组合，还可以产生更多种类的选择器，实现更强、更方便的选择功能。 在XHTML与CSS编码中有很多编码是雷同的，即“代码重用”，在CSS编码中，雷同的代码可以运用复合选择器等进行精简。 复合选择器：是两个或多个基本选择器通过不同方式连接而成的选择器。 1.6.1 “交集”选择器 “交集”选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。 注意： （1）第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器 （2）两个