VB.net 2010 视频教程 VB.net 2010 视频教程 VB.net 2010 视频教程
当前位置:
主页 > 网站开发 > css >
  • div+css视频教程之成为CSS高手之路(四)~CSS在DW中的

  • 2015-07-29 21:43 来源:未知
·    成为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的文字→属性面板→HTMLID→选择刚刚建立的ID规则即可完成套用。
 
e.结果如下图:选取的文字变成绿色,9pt大小了。
 
f.原始码画面如下:在<head>和</head>之间会有ID规则语法,而在<body>和</body>之间会找到套用了此ID规则的文字,其卷标中加上了ID表示套用。
 
g.使用ID建立CSS语法的架构类似于『类别』,不同的是ID名称前面是用#起始而不是用.起始。
#ID名称 {
                 属性1:设定值1;
                 属性2:设定值2;
                 ......
               }
      最后再统整一下,所谓的『整页套用』就是将CSS语法写在文件头区域内(<head>),且其影响范围是整个页面,只要符合规则定义的对象在此页面中,都会受到规则的控制,后续设计岚将说明第二种CSS宣告方式-『个别设,敬请期待。
 
相关教程
关于我们--广告服务--免责声明--本站帮助-友情链接--版权声明--联系我们       黑ICP备07002182号