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());