在DW 4中用CSS样式表来美化网页

　　样式表单的出现，使网页设计师们的工作感到大为轻松，因为用样式表单能够很轻松的在网页上实现很多效果，例如链结的颜色，按钮的样式，表单的边框等。使网页里不再是一成不变的使用软件默认的字体等。

　　首先我们来配置字体。汉字字体只有宋体的9pt大小和10.5pt的大小是看起来是最舒服的。9pt的字是中文windows系统使用的字体，也许大家都看习惯了吧，所以这种字体被广泛的应用于绝大多数的中文站点中，而随着电脑的更新换代，17寸的显示器越来越多的走进用户的家庭，9pt的字体看起来就小的多了，于是10.5pt的字又被广泛应用。在网页中用这两种字体，看起来是很美观的。

　　有了样式表，我们无需逐一去定义每一段的字体、字体大小、字体颜色，在Dreamweaver4里面，在页面上单击右键，找到CSS Style，选择new style，弹出一个面板窗口如图1所示。




　　在type处选择Redefine HTML Tag，在Name处会出现一些选项，其中比较重要的有Body，Td，Tr等。选中Body后按OK，会跳出一个窗口出来让您保存这个CSS文档，取个您记得的名字，我们这里取abc.css，然后按确定，出现一个面板，这就是配置CSS属性的面板了，其中Type就是字体的有关配置。将Font选为“宋体”（实际上也能够不选，因为默认的是宋体），然后在下面的Size那里填入9，后面的选框选择points，（也能够写成12px），其他的能够不选。Color是字体的颜色，能够根据自己喜好配置。然后按确定。这样一来，您再在网页里编辑的文字就全部是宋体9pt的大小了，看起来是不是美观多了？

　　但是，网页里全部都是个颜色，一个大小的字体，实在是没有多少美的感觉。对！我们需要多定义几个样式单的属性，来使网页漂亮起来。在网页上按右键选择css style，再选择edit style sheet，选中刚才您存的那个css文档，然后按Edit，出现一个新的面板，按new，又出现了如图1的面板，依然选择Redefine Html Tag，能够定义Td，Tr一类的字体大小和颜色，定义后，网页里的td和tr表格里的字体颜色会和原来的不相同。

　　定义在td和tr里仍然不好控制？这样我们需要来定义一个新的样式单，按前步骤打开了图1以后，选择第一项Make Custom Style(class)，在Name的地方填一个名字，比如.abc等，注意前面的一个小数点千万不要忘记了。按确定，定义好字体大小颜色后，选种您想要改变的字，按右键，选择Css Styles，找到abc，在abc上单击一下，您会发现字体如您先前的配置改变了。

　　有的用户在设计网页的时候，经常会用到不同颜色的背景，而网页的链结色默认的都是兰色，虽然能够更改，但是一种链结的色彩依然不会很清楚的显示在背景色不同的网页上，而css样式单能够很轻松的解决这个问题，让一个网页里有多种不同的链结颜色。

　　按前步骤到达图1步骤时，选择Use Css Selector，在Name处下拉菜单，发现会有a:link，a:hover，a:visited，a:active四个选项，分别代表链结属性，鼠标移动到链结上的属性，链结被访问后属性和链结焦点状态下的属性。假如选择a:link等则是默认选择。网页任何的链结都会遵循这四个选项的配置。假如要实现不同的链结属性，则需要增加样式单。在Name处填入a.abc:link，按确定，在面板里填入和默认配置不同的颜色，按确定。然后依次配置a.abc:hover，a.abc:visited，a.abc:active的属性。配置完毕后，在网页的源代码里，找到需要更改的链结，在< a href=”***.html>的里面加入class=”abc”，这样，该链结显示的就是您更改过的属性。就能够实现一个网页里出现多种链结的色彩了。当然不但仅是色彩，还能够将hover的字体配置的比link稍微大一点，这样就会出现鼠标移动到链结上字体会变大的效果。

　　许多网页编辑软件默认的表单样式都不是很美观，有时候设计网页的时候为了配合背景等，希望将表单里的字体，背景色，边框粗细做一些变化，这些用CSS样式单相同能够很轻松的实现。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有