浅谈CSS样式表在网页布局中应用.docVIP

浅谈CSS样式表在网页布局中应用 　　摘#8195;要：因特网的快速发展,使得网络成为人们生活工作中不可缺少的媒介,各种制作网站的新技术不断涌现。随着前端技术版本的不断更新和开发方法的不断改进，近几年国内主要门户网站都利用CSS技术对网站进行了重构,而用CSS技术设计的网站在市场上主流的浏览器中都能得到很好的展现。在这里我浅谈一下CSS样式表在网页布局中的应用。 　　关键词：CSS样式表；样式；元素；CSS 网页布局 　　 　　一、什么是CSS样式表 　　Cascading Style Sheets（简称CSS），翻译为“层叠样式单”或“串联样式单”，又简称“样式表”。 　　Internet的发展使得Html在网页制作中被广泛应用，而Html的排版和界面效果在网页设计中的局限性日益暴露，随着CSS的出现， CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。 　　CSS的引入是用来扩展Html的，而不是用来替代Html的。也就是说CSS离不开Html，它是一项辅助工具，是对Html功能的一种补充。CSS与网页语言之间无缝集成，能够更精确地控制网页布局，优化网页结构，可以更加灵活地控制网页中文字的字体、大小、颜色等属性，可以与脚本语言相结合，从而使网页中的元素实现动态效果，简化代码，提高下载速度。创建CSS样式表的过程，就是对各种CSS属性设置的过程，所以了解CSS的属性设置是非常重要的。 而样式就是一个规则，它提示浏览器如何将Html文档中的内容展现给浏览者，每个Html标签都有一些特定的属性，它的值决定了浏览器如何显示这个标签。 　　 　　二、CSS样式表的分类 　　样式表的分类可以分成三种： 　　1.内嵌样式（Inline Style） 　　Inline Style是在标签中加入Style属性，后面附有一些属性及属性的值。 　　2.内部样式表（Internal Style Sheet） 　　内部样式表是写在网页的。内部样式表只对所在的网页有效。 　　3.外部样式表（External Style Sheet) 　　将所有样式定义放在一个单独的CSS文件中，与Html文件分开存放。这样一个样式表文件可以被许多网页同时使用。 　　 　　三、创建样式 　　无论是哪种类型的样式，其创建方式基本上要经过以下步骤： 　　1.定义样式的类型 　　在网??内部创建样式文件和建立单独的样式文件；定义样式的类型。 　　2.设定样式的外观 　　对样式外观的设定，包括文字、背景、边框、列表等内容。 　　3.应用样式 　　对于标签样式和CSS选择器，样式是自动应用于网页的，但对于自定义的样式，则需要特别设定应用的范围。 　　四、掌握CSS的元素 　　1.元素是CSS显示的基础 　　Html中的所有标签都是元素。每个元素都被一个方框包围。有两种类型： ①可替换元素。②不可替换元素。 　　2.常用的元素及作用 　　◆p：描述大段的文本或文章。 　　◆br：插入一个换行符。 　　◆li：引起列表中的一个项目。 　　◆a：表面超链接的起始或目的位置。 　　◆img：在文档中嵌入图像或视频剪辑。 　　◆ol：绘制文本的编号列表。 　　◆border 边框：padding（空白）；margin（边界）。 　　◆span：描述标签或提示性文本。 　　◆h系列：以标题样式渲染文本。 　　 　　五、CSS 网页布局 　　CSS网页布局的基本思路：在CSS布局中，结构和语义具有相同的内涵，它要求网页设计者必须清楚自己设计的页面要展示的内容，并根据这些内容把一个网页分成不同的内容块，以及每块内容的目的，然后再根据这些内容的目的用不同语义元素建立相应的Html结构。 　　第一步：规划网站。 　　规划网站主要由五个部分构成: 　　（1）导航条：具有按钮的特效。 　　（2）网站头部图标：包含网站的Logo和站名。 　　（3）网站的主要内容。 　　（4）边框：一些附加信息。 　　（5）网站底栏：包含版权信息等。 　　第二步：创建Html模版及文件目录等。 　　第三步：将网站分为五个Div，这是网页基本布局的基础。 　　（1）将“第一步”提到的五个部分都放入盒子中，在Html文件中写入。 　　（2）为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在CSS文件中写入。 　　第四步：网页布局与Div浮动等。 　　往主要内容的盒子中写入一些文字。在Html文件中写入。除网页主要框架之外的附加结构表现（Layout）包括以下内容：①主导航条；②标题（heading），包括网站名和内容标题；③内容；④页脚信息，包括版权，认证，副导航条（可选）。