VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > css >

  • div+css视频教程之成为CSS高手之路(四)~CSS在DW中的

·    成为CSS高手之路(四)~CSS在DW中的设定与语法宣告方式Part II-整页套用的CSS规则(下)
分享:          
 
      今天『成为CSS高手之路』系列文章之四，继续针对『整页套用的CSS规则』作后半段的说明，能够让规则套用在整个页面的方法除了前文『成为CSS高手之路(三)~CSS在DW中的设定与语法宣告方式Part I-整页套用的CSS规则(上)』所提到的设定方法之外，还有其他几种设定方式，其影响范围也都是一整个页面的。
 
      以下要介绍以『类别』(CLASS)、『ID』以及『标签』三种方式所建立的CSS规则，这三种规则的宣告有个共通性-『都必须写在<head>及</head>之间，且用<style>标签来定义CSS的内容』，这一点我们在上一篇文章有提过，温故知新一下，但是这三种方式还是有其宣告与使用上的差异性，以下来分别介绍。 
1.本文范例初始画面如下： 开启Dreamweaver建立新页面后，输入以下五段文字。
    
2.在第一段以到第四段文字分别套用<h1>与<h2>的html卷标样式。
a.反白选取要设定的文字
  
b.属性面板→『HTML模式』→『段落』→选择『标题1』(h1)作套用。
 
 c.使用相同的流程之对第三、四段文字套用『标题2』(h2)格式，结果画面如下：
  
d.原始码画面如下：我们看到在<body>和</body>中看到了这几行原始码
 
到目前这个步骤，我们只纯粹使用html标签的套用，以下我们来加入CSS样式规则。
3.利用『卷标』建立CSS规则：此种方法是针对特定的HTML元素为设定对象，规则建立后只要是该HTML元素都会全部套用此规则。
a.CSS样式面板→新增CSS规则
 
b.在『选取器类型』选择『卷标(重新定义HTML元素)』，选取器名称则输入『h1』，因为我们要针对h1标签作定义，设定好按下『确定』。
 
c.进行样式设定，这里设计岚用16pt以及红色文字色彩为设定内容，完成按下『确定』。
 
d.此时就会发现页面中所有套用<h1>卷标的文字都会变成16pt、红色文字了，这就是用『卷标』方式宣告CSS规则的特性
e.原始码画面如下：
 
f.从上图红框中发现：
i.CSS规则语法也在<head>和</head>之间
ii.前后用<style>和</style>标签作定义
iii.以『卷标』方式定义CSS的语法结构如下：
    元素名称 {
                 属性1:设定值1;
                 属性2：设定值2;
                 ......
               }
4.以『类别』(CLASS)方式宣告CSS：上面方法是针对该元素的所有对象统一套用CSS，但如果我们想针对页面『特定的HTML元素』作格式设定，就适合这个方法， 例如：设计岚想针对第二段套用了<h1>的文字做个别设定：
 a.新增CSS规则：
 
b.选取器类型选择『类别』(可套用至任何HTML元素)，选取器名称可自定义，但只能用英文和数字以及 _ 底线符号，不可用中文和以数字做开头，也不要用特殊符号。
 
c.我将文字的颜色改成『蓝色』，文字大小改成18pt，完成设定后按下确定。
 
d.由于是用『类别』方式定义CSS，所以不会有任何文字自动套用，我们要设定将规则套用在哪个对象身上，这边设计岚反白第二段文字→属性面板→HTML→类别→选择刚刚建立的『h1_blue』规则就可以套用。
 
e.套用了会发现，只有我们指定的文字会套用规则，其他的文字不受影响，这就是以『类别』建立CSS规则的特性。
  
f.原始码画面如下：我们会发现使用『类别』所建立的CSS规则和使用『卷标』的方式建立规则一样，都必须将语法写在<head>和</head>之间，且也都会放在<stylle>和</style>之间，其语法格式如下：
.类别名称 {
                 属性1:设定值1;
                 属性2：设定值2;
                 ......
               }
     上面的语法结构与『卷标』不同的地方在于，『类别』方式建立的规则，在类别名称前面必须要有一个『句号』(.)作为起始。
5.使用『ID』建立CSS规则：使用的方式类似『类别』。
a.新增CSS规则：
 
b.『选取器类型』请选择『ID』(仅套用至一个HTML元素)，选取器名称可自定义，命名规则同『类别』，完成后按下『确定』。
 
c.在此我设定文字大小为9pt，文字色彩为『绿色』，完成按下『确定』。
 
d.反白要套用ID的文字→属性面板→HTML→ID→选择刚刚建立的ID规则即可完成套用。
 
e.结果如下图：选取的文字变成绿色，9pt大小了。
 
f.原始码画面如下：在<head>和</head>之间会有ID规则语法，而在<body>和</body>之间会找到套用了此ID规则的文字，其卷标中加上了ID表示套用。
 
g.使用ID建立CSS语法的架构类似于『类别』，不同的是ID名称前面是用#起始而不是用.起始。
#ID名称 {
                 属性1:设定值1;
                 属性2：设定值2;
                 ......
               }
      最后再统整一下，所谓的『整页套用』就是将CSS语法写在文件头区域内(<head>)，且其影响范围是整个页面，只要符合规则定义的对象在此页面中，都会受到规则的控制，后续设计岚将说明第二种CSS宣告方式-『个别设定』，敬请期待。
 

相关教程