Openlayers学习笔记——StylingControls

此节介绍前我们先来点网页设计知识准备：

一 CSS(层叠样式表)
  CSS是层叠样式表英文单词 Cascading Style Sheets的首字母缩写，它是一种指定HTML元素表现形式的标记语言。
   HTML、CSS、javascript这三种语言都有不同的服务特点，
   HTML是用来创建我们所看到的网页的结构和内容的；
   CSS是用来控制网站站点中元素的展现的；
   javascript是处理网站站点上逻辑部分的。
因此在构建网站时需要具备这三方面的能力。

二 OpenLayers and CSS

  Openlayers几乎为每个创建的HTML元素引用类名、IDs，因此要我们知道怎么使用类名、IDs就能定制个人地图的UI。
 
   1.OpenLayers样式--themes
   在Openlayers中，主题themes是被用来控制UI元素的外观的，一套主题是由一个Css文件和相关UI图片组成的，Openlayers默认在用户地图应用了多种样式，这套主题命名为default。创建自己的主题也是很容易的。
   在定制用户地图自己的UI样式前，需要创建个文件夹theme_floder来保存CSS文件和UI图片。引用UI样式的三个步骤：
   % 在地图页面上添加CSS文件的引用路径；
   % 在Openlayers中指定地图中引用的UI图片位置；
   % 在地图map对象中指定theme属性。
      map=new Openlayers.Map(‘map_element’,{theme:'theme_folder'});


  2创建自己的主题（themes）
    %在页面引入CSS文件；
<link rel='stylesheet' href='control_style.css' />
   %创建地图map对象
map = new OpenLayers.Map('map_element', {
  controls: [new OpenLayers.Control.Navigation()]
});
   %创建Controls对象
map.addControl(new OpenLayers.Control.ScaleLine());
   %修改默认类名的样式
.olControlNavToolbar {
  top: 0;
}
.olControlNavigationItemInactive {
  background: #787878 !important;
  border: 2px solid #232323;
  cursor: pointer;
  left:0 !important;
  top:0 !important;
}
.olControlNavigationItemActive {
  background: #dedede !important;
  border: 2px solid #787878;
  cursor: pointer;
  left:0 !important;
  top:0 !important;
}
   %在地图上添加Controls
map.addControl(new Openlayers.Control.OverviewMap());