二.css介绍

一.三种引入样式
1.内嵌样式：写在html中 style标签里面
2.行内样式：写在具体的标签的style属性
3.引入外部样式表：可以将样式规则写在外部文件，再引入到html中
　　<link type="text/css" rel="stylesheet" href="../css/theme.css">

二.样式选择器
1.html选择器：该样式规则的名字和html标签一致，作用域当前网页中的该标签
2.类选择器：每个标签都可以写一个class属性，其样式规则就是.+类名{样式规则}
3.id选择器：每个标签都可以写一个id属性，其样式规则就是#+id名{样式规则}

例子：

　　图片文件

　　index.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>新疆旅游网</title>
  6     <link type="text/css" rel="stylesheet" href="css.css"/>
  7 </head>
  8 <body>
  9 <!--整个外层的页面容器-->
 10 <div id="container">
 11     <!--banner条-->
 12     <div id="banner"><img src="images/banner.jpg"/></div>
 13     <!--全局导航菜单模块-->
 14     <div id="globallink">
 15         <ul>
 16             <li><a href="#">首页</a></li>
 17             <li><a href="#">新疆简介</a></li>
 18             <li><a href="#">风土人情</a></li>
 19             <li><a href="#">吃在新疆</a></li>
 20             <li><a href="#">路线选择</a></li>
 21             <li><a href="#">自助行</a></li>
 22             <li><a href="#">摄影摄像</a></li>
 23             <li><a href="#">游记精选</a></li>
 24             <li><a href="#">资源下载</a></li>
 25             <li><a href="#">雁过留声</a></li>
 26         </ul>
 27     </div>
 28     <!--左边模块-->
 29     <div id="left">
 30         <div id="weather">
 31             <h3><span>天气查询</span></h3>
 32             <ul>
 33                 <li>乌鲁木齐&nbsp;&nbsp;&nbsp;雷阵雨 20℃-31℃</li>
 34                 <li>吐鲁番&nbsp;&nbsp;&nbsp;多云转阴 20℃-28℃</li>
 35                 <li>喀什&nbsp;&nbsp;&nbsp;阵雨转多云 25℃-32℃</li>
 36                 <li>库尔勒&nbsp;&nbsp;&nbsp;阵雨转阴 21℃-28℃</li>
 37                 <li>克拉马依&nbsp;&nbsp;&nbsp;雷阵雨 26℃-30℃</li>
 38             </ul>
 39         </div>
 40         <div id="today">
 41             <h3><span>今日推荐</span></h3>
 42             <ul>
 43                 <li><a href="#"><img src="images/tuijian1.jpg"></a></li>
 44                 <li><a href="#">喀纳斯河</a></li>
 45                 <li><a href="#"><img src="images/tuijian2.jpg"></a></li>
 46                 <li><a href="#">布尔津</a></li>
 47                 <li><a href="#"><img src="images/tuijian3.jpg"></a></li>
 48                 <li><a href="#">天山之路</a></li>
 49             </ul>
 50         </div>
 51     </div>
 52     <!--中间模块-->
 53     <div id="middle">
 54         <div id="ghost"><a href="#" title="魔鬼城探秘"><img src="images/ghost.jpg" border="0"></a></div>
 55         <div id="beauty">
 56             <h3><span>美景寻踪</span></h3>
 57             <ul>
 58                 <li><a href="#"><img src="images/beauty1.jpg"></a></li>
 59                 <li><a href="#"><img src="images/beauty2.jpg"></a></li>
 60                 <li><a href="#"><img src="images/beauty3.jpg"></a></li>
 61                 <li><a href="#"><img src="images/beauty4.jpg"></a></li>
 62             </ul>
 63         </div>
 64         <div id="route">
 65             <h3><span>线路精选</span></h3>
 66             <ul>
 67                 <li><a href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a></li>
 68                 <li><a href="#">乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯</a></li>
 69                 <li><a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a></li>
 70                 <li><a href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a></li>
 71             </ul>
 72         </div>
 73     </div>
 74     <!--右边模块-->
 75     <div id="right">
 76         <div id="map">
 77             <h3><span>新疆风光</span></h3>
 78 
 79             <p><a href="#" title="点击看大图"><img src="images/map1.jpg"></a></p>
 80 
 81             <p><a href="#" title="点击看大图"><img src="images/map2.jpg"></a></p>
 82         </div>
 83         <div id="food">
 84             <h3><span>小吃推荐</span></h3>
 85             <ul>
 86                 <li><a href="#">17号抓饭</a></li>
 87                 <li><a href="#">大盘鸡</a></li>
 88                 <li><a href="#">五一夜市</a></li>
 89                 <li><a href="#">水果</a></li>
 90             </ul>
 91         </div>
 92         <div id="life">
 93             <h3><span>宾馆酒店</span></h3>
 94             <ul>
 95                 <li><a href="#">美丽华大饭店</a></li>
 96                 <li><a href="#">海德大饭店</a></li>
 97                 <li><a href="#">银都大饭店</a></li>
 98                 <li><a href="#">鸿福大饭店</a></li>
 99                 <li><a href="#">友好大酒店</a></li>
100                 <li><a href="#">棉麻宾馆</a></li>
101                 <li><a href="#">电信宾馆</a></li>
102             </ul>
103         </div>
104     </div>
105     <!--脚注模块-->
106     <div id="footer">
107         <p>艾萨克 &copy;版权所有 <a href="mailto:demo@demo.com">demo@demo.com</a></p>
108     </div>
109 </div>
110 </body>
111 </html>

　　css.css

  1 * {
  2     padding: 0px;
  3     margin: 0px
  4 }
  5 
  6 body {
  7     background-color: #2286c6;
  8     font-size: 12px;
  9     font-family: Arial;
 10 }
 11 
 12 #container {
 13     margin: 0px auto; /*使容器水平居中*/
 14     width: 780px;
 15     height: 600px;
 16     background-color: #123456;
 17     text-align: left;
 18 }
 19 
 20 #globallink ul {
 21     list-style-type: none;
 22 }
 23 
 24 #globallink ul li {
 25     float: left;
 26     width: 78px;
 27     text-align: center;
 28 }
 29 
 30 #globallink ul li a {
 31     display: block;
 32     padding: 9px 6px 11px 6px;
 33     background: url("images/button1.jpg") no-repeat;
 34 }
 35 
 36 #globallink ul li a:link, #globallink ul li a:visited {
 37     color: #004a87;
 38     background: url("images/button1.jpg") no-repeat;
 39 }
 40 
 41 #globallink ul li a:hover {
 42     color: #ffffff;
 43     background: url("images/button1_bg.jpg") no-repeat;
 44     text-decoration: none;
 45 }
 46 
 47 #left {
 48     width: 200px;
 49     background-color: #ffffff;
 50     padding: 0px 0px 5px 0px;
 51     color: #d8ecff;
 52     float: left;
 53 }
 54 
 55 #weather {
 56     background: url("images/weather.jpg") no-repeat -5px 0px;
 57     margin: 0px 5px;
 58     background-color: #5ea6eb;
 59 }
 60 
 61 #weather h3 {
 62     padding: 24px 0px 0px 74px;
 63 }
 64 
 65 #weather ul {
 66     list-style-type: none;
 67     margin: 8px 5px 0px 5px;
 68     padding: 10px 0px 8px 5px;
 69 }
 70 
 71 #weather ul li {
 72     background: url("images/icon1.gif") no-repeat 0px 6px;
 73     padding: 1px 0px 0px 10px;
 74 }
 75 
 76 #middle {
 77     background-color: #ffffff;
 78     width: 400px;
 79     margin: 0px 2px;
 80     padding: 5px 0px;
 81     float: left;
 82 }
 83 
 84 #middle div {
 85     margin: 0px 5px;
 86 }
 87 
 88 #middle h3 span {
 89     display: none;
 90 }
 91 
 92 #beauty h3 {
 93     background: url("images/picture_h1.gif") no-repeat;
 94     height: 41px;
 95 }
 96 
 97 #route h3 {
 98     background: url("images/route_h1.gif") no-repeat;
 99     height: 41px;
100     clear: both;
101 }
102 
103 #beauty ul, #route ul {
104     list-style-type: none;
105     margin: 15px 1px 12px 1px;
106 }
107 
108 #beauty ul li {
109     float: left;
110     width: 97px;
111     text-align: center;
112 }
113 
114 #beauty ul li img {
115     border: 1px solid #4ab0ff;
116 }
117 
118 #route ul li {
119     background: url("images/icon1.gif") no-repeat 20px 7px;
120     padding: 3px 0px 0px 30px;
121     margin: 10px 0px 0px 0px;
122 }
123 
124 #route ul li a:link, #route ul li a:visited {
125     color: #004e8a;
126     text-decoration: none;
127 }
128 
129 #route ul li a:hover {
130     color: #000000;
131     text-decoration: underline;
132 }
133 
134 #today h3 {
135     color: #003973;
136     background: url("images/icon2.gif") no-repeat 5px 7px;
137     background-color: #bbddff;
138     padding: 4px 0px 2px 15px;
139     margin: 0px 0px 5px 0px;
140 }
141 
142 #today {
143     background-color: #5ea6eb;
144     margin: 0px 5px;
145     padding: 0px 0px 10px 0px;
146 }
147 
148 #today ul {
149     list-style-type: none;
150 }
151 
152 #today ul li {
153     text-align: center;
154 }
155 
156 #today ul li img {
157     border: 1px solid #ffffff;
158     margin: 8px 0px 0px 0px;
159 }
160 
161 #today ul li a:link, #today ul li a:visited {
162     color: #d8ecff;
163     text-decoration: none;
164 }
165 
166 #today ul li a:hover {
167     color: #ffff00;
168     text-decoration: underline;
169 }
170 
171 #right {
172     background-color: #ffffff;
173     width: 176px;
174     padding: 0px 0px 5px 0px;
175     float: left;
176 }
177 
178 #right div {
179     margin: 0px 5px;
180     background-color: #5ea6eb;
181 }
182 
183 #right div h3 {
184     background: url("images/icon2.gif") no-repeat 5px 15px;
185     padding: 10px 0px 10px 15px;
186     margin: 0px 0px 5px 0px;
187     background-color: #bbddff;
188 }
189 
190 #map p {
191     text-align: center;
192 }
193 
194 #map p img {
195     border: 1px solid #ffffff;
196 }
197 
198 #food ul, #life ul {
199     list-style-type: none;
200     padding: 0px 0px 10px 0px;
201     margin: 18px 10px 0px 10px;
202 }
203 
204 #food ul li, #life ul li {
205     background: url("images/icon1.gif") no-repeat 3px 9px;
206     padding: 3px 0px 4px 12px;
207     border-bottom: 1px dashed #eeeeee;
208 }
209 
210 #food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited {
211     color: #ffffff;
212     text-decoration: none;
213 }
214 #food ul li a:hover,#life ul li a:hover{
215     color: #000000;
216     text-decoration: underline;
217 }
218 
219 #footer {
220     width: 100%;
221     height: 30px;
222     background-color: yellow;
223     margin: 1px 0px 0px 0px;
224     padding: 1px 0px;
225     clear: both;
226 }
227 #footer p{
228     text-align: center;
229     background-color: #5ea6eb;
230     padding: 8px 0px;
231 }
232 #footer p a{
233     color: #ffffff;
234     text-decoration: none;
235 }