div+css视频教程之CSS在DW中的设定与语法宣告方式

当前位置:

首页 > 网站开发 > css >

div+css视频教程之CSS在DW中的设定与语法宣告方式

·    成为CSS高手之路(三)~CSS在DW中的设定与语法宣告方式Part I-整页套用的CSS规则(上)
分享:

      今天『成为CSS高手之路』系列文章之三将来说明一下，CSS语法的宣告方式以及在Dreamweaver中要如何设定CSS，虽然有些人觉得应该直接用『写』得方式来学习CSS，但设计岚希望CSS被更多人所了解接受(包括初心者)，唯有大家不害怕CSS了，也才会愿意去深入研究它，所以即使直接使用软件的设定画面完成的CSS，只要使用得当，实用性还是相当高的。
     由于CSS的宣告方式很多种不同的方式，为了减轻各位学习上的负担，以及分别说明各种不同的方式，设计岚以一种方式一篇文章的方式来解说，大家可以分开阅读，也比较好掌握重点；首先Part I 设计岚先来讲解第一种方式-『在整个网页页面中套用CSS规则』要怎么设定以及宣告的方式。
     在这一系列的文章中，我们依然用上一篇的范例来做示范说明，下图为一个纯粹使用HTML语法撰写的页面：

1.网页页面内容图解说明： (顺便温故知新一下)

‧上图1为网页内文的大标题文字，套用了html语法中的<h1></h1>标签。

‧上图2为内文的段落文字，套用了<p></p>标签。

‧上图3表示在页面中插入了一张图片，套用了<img>标签。

‧上图4为在内文中插入一个3栏3列表格，使用的是<table></table>标签。

‧上图5表示在文字上加入了『超链接』，使用了<a></a>标签。

‧上图6表示网页的页面标题，使用了<title></title>标签。

接着我们将针对上述页面设定CSS样式并且加以说明。
2.在整个页面套用CSS的设定与宣告方式

a.在Dreamweaver中的设定：
i.执行『修改』→『页面属性』

ii.在分类中的『外观(CSS)』都是以CSS语法控制整页面格式的设定值

iii.在此我将文字设定为『新细明体』、12pt、粗体、蓝色；背景色彩为『#F9F』，然后按下『确定』。(如下图)

iV.预览画面如下：

由上图可得知，整页的所有文字(含表格文字)都变成了蓝色粗体的格式，唯一不变的只有大标题的尺寸(上图，因为大标题最初是设定了HTML语法的<h1>格式，所以尺寸上依然沿用<h1>的格式。

b.整页套用的CSS语法宣告方式说明：

在Dreamweaver的『分割』编辑模式中，我们可以看到原始码如上图，由此我们可以知道整页套用的CSS规则：
i.最常用的方式就是使用<style>标签来定义CSS的内容。
ii.而且定义的规则要写在html语法的<head>文件头区域内。
iii.为了让浏览器可以认得CSS样式，通常会在<style>卷标中加上type属性(如下图)。

iV.为了应付有些浏览器可能不支持CSS，于是会在<style>标签中加入，目的是让不支持CSS的浏览器可以直接忽略<style>中的内容而不会有错误讯息。
V.所以用上述几点规则所撰写的CSS规则，将会套用在整页中，至于套用在整页中的那些『内容』上，则要看我们的定义对象，以下加以说明。
首先我们来看看规则的内容(如下图)：

从上图我们可以得知，CSS宣告的方式：
i.上图中1和2分别代表两个不同的规则，分别定义不同的格式。
ii.上图中的红色字(body,td,th还有body)我们称为『元素名称』，也就是我们规则要套用的『对象』。
iii.而{ }中的文字中，冒号(:)前面我们称为『属性』(ex.font-family)；而冒号(:)后面我们称为『设定值』(ex.新细明体)。
iV.不同的属性定义结尾都会用一个 ; 做结束。
V.综合上述，CSS的基本宣告方式为：
元素名称 {属性1:设定值1;
            属性2:设定值2;
            属性3:设定值3;
              .......
                 }
Vi.而上述两个规则，其中的body,td,th定义了与文字格式相关的设定；而body则定义了背景颜色有关的设定。
      所以，当我们在页面属性中进行CSS格式设定时，Dreamweaver就帮我们撰写了这些CSS语法，如果我们理解了，也可以用手写方式定义。
      以上，就是CSS宣告方式第一种类~整页套用的介绍，后续我们将继续针对其他方式做说明。

栏目列表