1.3 CSS基本原则
级联样式表（CSS）是描述网页中HTML元素如何显示的一门语言。例如，CSS通常用来定义一个或多个页面中的常见的样式元素，比如字体、背景颜色、字体大小、链接颜色和其他多种与网页视觉设计相关的方面。让我们看下面的代码片段。
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map{
padding:0;
border:solid 2px #94C7BA;
margin:5px;
}
#header {
border: solid 2px #94C7BA;
padding-top:5px;
padding-left:10px;
background-color:white;
color:#594735;
font-size:14pt;
text-align:left;
font-weight:bold;
height:35px;
margin:5px;
overflow:hidden;
}
.roundedCorners{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.shadow{
-webkit-box-shadow: 0px 4px 8px #adadad;
-moz-box-shadow: 0px 4px 8px #adadad;
-o-box-shadow: 0px 4px 8px #adadad;
box-shadow: 0px 4px 8px #adadad;
}
</style>
1.3.1 CSS语法
CSS遵循特定的规则来定义选择哪种HTML元素和如何设计元素。CSS规则包括两个主要部分：一个选择器和一个或多个声明。选择器就是典型的需要样式化的HTML元素。图1-6中，选择器是p。HTML中
元素代表一个段落。CSS规则中的第二个部分包括一个或多个声明，它们每一个都由一个属性和值构成。属性代表需要改变的样式属性。在我们的例子中，设置color属性为red。实际上，该CSS规则定义了段落中的所有文本颜色是红色的。
https://yqfile.alicdn.com/e8e6be1c1025dc6dc857f9c48324fa68bed738ce.png" >
我们使用p{color:red;}，如图1-6所示。
下列示例中CSS规则包括多个声明。声明总是使用花括号括起来，每个声明以分号结束。此外，属性和值之间使用冒号。在这个特殊例子中，使用了两个定义：一个是段落的颜色，另一个是段落的文本对齐方式。请注意声明是通过分号进行分割的。
p {color:red; text-align:center}
CSS注释用来解释代码，你应该养成和任何其他编程语言中一样为CSS代码进行注释的习惯，且注释通常会被浏览器忽略。注释以斜线后跟一个星号开始，以星号后面跟斜线结束，其中的所有内容都是注释，将会被忽略。
/*
h1 {font-size:200%;}
h2 {font-size:140%;}
h3 {font-size:110%;}
*/
此外，为特定的HTML元素指定选择器，你可以使用id选择器来为任何与id选择器匹配的任意HTML元素的id值来定义样式。id选择器在CSS中是通过井号（#）后面跟id值定义的。
比如，在下列示例代码中，你看见三个id选择器：rightPanel、leftPanel和map。在ArcGIS API for JavaScript应用程序中，总是会有一个map。当你定义
标签来作为map的容器时，定义一个id选择器，并通常赋值成map。在这种情况下，我们使用CSS来为地图定义多种样式，包括5像素的间距及特定颜色的实心样式边框和边框的弧度，如图1-7所示。
#rightPanel {
background-color:white;
color:#3f3f3f;
border: solid 2px #224a54;
width:20%;
}
#leftPanel {
margin: 5px;
padding :2px;
background-color:white;
color:#3f3f3f;
border:solid 2px #224a54;
width:20%;
}
#map {
margin:5px;
border: solid 4px #224a54;
-mox-border-radius:4px;
}
https://yqfile.alicdn.com/3195b06a3c888f5d5e4d5ee1089c6db5b8d3543e.png" >
不同于id选择器专门为单个元素设置样式，类选择器可以为一组元素指定样式，它们都有相同的HTML类属性。类选择器通过.后面跟类名字来定义。你也可以指定受影响的样式只有特定的THML元素和专门的类。下列代码显示了这两种情况下的例子。
.center {text-align:center;}
p.center {text-align:center;}
你的HTML代码可以用下列方式引用类选择器。
<p class="center">This is a paragraph</p>
有三种方式可以将CSS插入到你的应用程序中：行内样式、内嵌样式和链接样式。
1.3.2 行内样式
第一种定义HTML元素的CSS规则方法是使用行内样式。但是我们不推荐使用这种方式，因为它和呈现层混杂在一起很难维护。只有在需要定义一组有限范围内CSS规则的情况下，才选择这种方式。使用行内样式，仅需将style属性放置在指定的HTML标签内部。
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
1.3.3 内嵌样式
内嵌样式将所有的CSS规则应用到指定的Web页面中。只有那个专门页面中的HTML元素才能访问到样式规则。这里所有的CSS规则都定义在
标签之间并且包裹在
这些都是你需要理解的一些CSS基本概念。你可以使用CSS来定义几乎任何网页的样式，包括背景、文字、字体、链接、列表、图像、表格、地图和其他任何可见的对象。