请选择 进入手机版 | 继续访问电脑版

驱动 化学 物理论文 酒店管理系统 08cms 第七章 qq空间 放大电路 英语论文 下载 脆梨漫画 起诉 精品课 奇迹MU 站帮网 片资源库 爱家 智能门铃 数据库清空 翻译软件

查看: 1915|回复: 0

教你了解DIV CSS系列教程(3-4讲)

[复制链接]
发表于 2012-4-25 00:45:39 | 显示全部楼层 |阅读模式
  第3讲 网页分析学—代码分析
  网页设计是一个不断借鉴并且创新的过程,而研究网页的构成除开布局的分析以外,还有代码分析.
  代码分析是通过分析相关的代码来研究小细节部分是如何构成,如何书写.如果说布局分析是从整个网页的框架来说的,那么,代码分析就是细化这个框架,让这个框架有血肉,有灵魂.
  代码分析的基本方法--参考点法:
  即通过在所见即所得上的某个明显的参考点来找出在所见非所得模式下的相关代码.这个参考点可以是某个词,某张图片.
  如在3-4讲附录中的校内网页面中,顶部的菜单栏(附录1-2略为1-2,下同)
  我们可以通过明显的参考点,首页,个人主页等词汇来找寻它在代码中的对应位置(2-1)
  又如栏目标题(1-3),我们通过它的题目,可以用”最近谁看过”这个作为参考点,我们可以找到它在代码中对应的位置(2-2).
  代码分析是作为一个网页制作者所应该掌握的基本技能.
  代码分析需要注意的几点:
  1 代码分析应该尽量让参考点更加具体
  如,我们用”首页”这个词作为参考点来说:如果单是”首页”这个词,我们可以在校内页面找到以下几行(2-3)
  如果我们用更加具体的参考点来描述,如我们再在参考点中加入”个人主页”这个词,就能更加的准确,这个道理和使用搜索引擎是一样的
  2 代码分析应该注意前后
  代码分析应该注意前后的限制标记,这个在CSS中尤其重要,因为CSS并不像HTML中的属性一样,是定义哪就到哪,它可以定义整个<body>区域,也可以单单只定义一个层区域.这个我们在后面的CSS中会详细说明
  3 代码分析应该有头有尾
  正如标记有头有尾一样,当然,这里排除了部分特殊标记.我们的代码分析也是应该有头有尾的, 即我们分析是从一个标记的开始到这个标记的结束.
  第4讲 CSS的基本书写模式
  了解CSS
  CSS全名为层叠样式表,是一种新的定义标记的方式.
  CSS的书写
  CSS的书写共有3类
  一是书写以CSS为后缀的文件,在网页中调用的形式
  <link href=\"111.css\" rel=\"stylesheet\" type=\"text/css\">
  <link>标记是作为连接的说明,type说明它的类型是CSS文本,rel说明它的性质是样式表,href表示它连接到111.css这个文件
  二是书写在<style type=”text/css”></style>之间,通常出现在网页头部中
  <style>标记表示这个是一个样式,type说明这个样式是CSS文本
  三是书写在标记内,以style引用.
  如<img src=”1.gif” style=”border:1px;”>
  注意事项
  CSS的书写以”{“开头,以”}”结尾,每个属性间以”;”分割,属性定义以”:”来开始
  如.1{color:#ccc;font-size:10px;}
  CSS的分类
  CSS有3种类型:
  1 自定义CSS
  1-1 ID
  以”#”+名称的形式,它一般用于单独的区域
  如#111{color:#ff0000;}
  它的调用是以id开头
  如<img src=”1.gif” id=”111”>
  其中<img>是定义图片调用,src定义调用路径,这里的src=”1.gif”是说明显示该网页同目录下的1.gif文件
  1-2 class
  以”.”+名称的形式,它一般用于大量定义
  如.clear{clear:both;}
  它的调用是以class开头
  如<div class=”clear”></div>
  1-3以style属性开头
  3 重定义标记
  以标记为名称
  如body{background:#000;}
  4 特殊的CSS,CSS选择符
  常用的有四种
  a:link 设定正常状态下链接文字的样式
  a:active 设定鼠标单击时的链接外观
  a:visited 设定访问过的链接外观
  a:hover 设定鼠标放置在链接文字上时,文字的外观
  举几个例子
  重定义1-3的栏目样式
  <DIV class=box id=userVisitor>
  <H3>最近谁看过*****的页面</H3>
  首先我们通过DIV里的id可以看到,控制这个层区域的ID是userVisitor
  <h3>是标题标记,标题标记有<h1>-<h6>,从1-6依次减小.
  我们用重定义标记的方法定义下栏目样式
  先定义下它的开头为#userVisitor h3
  由于IE和FF(firefox)中<h1>到<h6>标记字体大小不一样,所以我们需要先重定义下字体大小(12px)
  然后定义它的背景色(#000黑色),以及字体颜色(#fff白色)
  代码如下(2-4)
  CSS书写的注意事项
  1 CSS的冲突性
  不同的样式在定义了同一个目标时按照就近原则进行.
  举个例子:
  <span style=\"color:#000000; font-size:12px;\">我是黑色</span>
  我们定义一个class,为
  .white{color:#fff;}
  那么下面这段
  <span style=\"color:#000000; font-size:12px;\" class=\"white\">我还是黑色</span>
  我们重新定义一个<span>
  <span id=”1” style=\"color:#000000; font-size:12px;\"><span id=”2” style=\"background-color:#000;\" class=\"white\">我变白色了</span>我是黑色</span>
  从上面我们可以看到规律.即,先从最靠近的属性开始解析.
  2 CSS的命名以字母,数字,下划线命名均可
  如#111
  #11abc
  #abc
  #abc_111
  都是合法的
  3 CSS中的命名是严格区分大小写的
  如.White和.white就不是同一个class
回复

使用道具 举报

使用 高级模式(可批量传图、插入视频等)
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表