实验二 CSS基本语法
一、实验目的
1.掌握在网页中引用CSS的方法；
2.掌握CSS的基本语法规则；
3.掌握CSS的常用选择器。
二、实习题目
1.CSS的引入和基本选择器应用
(1) 内嵌样式表
将定义的样式以样式定义形式插入到文档的head区，此种方法样式将影响当前整个页面。
建立网页Css1.htm，代码如下：
技术的应用一
h1{
color:red;
font-family:”宋体”;
}
body{
color:black;
font-size:9pt;
}
.fnt{
color:blue;
font-family:”隶书”;
font-size:14pt;
}
这是标题一
这是正文…
这是使用fnt类后的效果
(2) 行内样式
将定义的样式以标记的属性形式插入，如：
,此种方法样式只影响当前标记所影响的区域。
建立网页Css2.htm，代码如下：
技术的应用一
h1{
color:red;
font-family:”宋体”;
}
body{
color:black;
font-size:9pt;
}
.fnt{
color:blue;
font-family:”隶书”;
font-size:14pt;
}
这是标题一
这是正文…
这是使用fnt类后的效果
这是种效果只属于此片段…
(3) 外部样式表
将所有样式的信息（样式规则）存放在一个单独的文件中（扩展名为css），然后用把它链接到每个HTML页面中。链接格式：
/out.css/
.h1_css{
color:red;
font-family:”宋体”;
}
.body_css{
color:black;
font-size:9pt;
}
.fnt_css{
color:blue;
font-family:”隶书”;
font-size:14pt;
}
技术的应用一
这是标题一
这是正文…
这是使用fnt类后的效果
这是种效果只属于此片段…
2.利用CSS对网页进行控制；
(1) 创建如图2-1所示表格页面（css3.htm）。
图2-1 未使用CSS样式前的网页
New Document
AB{
width:900px;
height:800px;
border:1px solid;
margin:0 auto;
}
A{
width:29%;
height:800px;
float:left;
border:1px dashed;
}
B{
width:70%;
height:800px;
float:left;
border:1px;
}
A1{
width:100%;
height:300px;
border:1px;
}
A2{
width:100%;
height:300px;
border:1px;
}
A3{
width:100%;
height:200px;
border:1px;
}
B1{
width:100%;
height:180px;
border-width:1px;
}
B2{
width:100%;
height:200px;
border:1px;
}
B3{
width:100%;
height:280px;
border:1px;
}
B4{
width:100%;
height:140px;
border:1px;
}
B21{
height:100%;
width:30%;
float:left;
border:1px;
}
B22{
font-size:15px;
height:100%;
width:70%;
float:left;
border:1px;
}
B31{
height:100%;
width:20%;
float:left;
border:1px;
}
B32{
height:100%;
width:50%;
float:left;
border:1px;
}
B33{
height:100%;
width:30%;
float:left;
border:1px;
}
p{
font-size:15px;
font-family:黑体;
}
情感小驿
 |
| |
| |
| |
| |
  姓名：孙悟空
  网龄：1024年
  星座：天秤
   QQ号：442937820
  爱好：飞天，看漫画
  喜欢的歌曲：《齐天大圣》
我知道自己的，无奈中对自己轻语。
我不知道自己，无奈自己软弱。
我认识自己，在梦里。
我不认识自己，在现实中。
</div>
<div id="B4">
<img src="test2/BANNER.GIF" width="95%" height="80%" alt="">
</div>
</div>
</div>
</body>
图2-5 第4题网页效果
Css：#ALL{
width:800px;
height:900px;
border:1px solid;
margin:0 auto;
}
A{
width:100%;
height:130px;
}
B{
width:100%;
height:70px;
background-color:red;
position:relative;
}
C{
width:100%;
height:600px;
position:relative;
}
D{
width:100%;
height:40px;
background:url(test3/images/images/xiaoguo_r24_c1.png) repeat-x ;
}
E{
width:100%;
height:60px;
background-color:#84C1FF;
}
CC{
width:95%;
height:95%;
border:2px solid #FF9224;
position:absolute;
left:20px;
top:15px;
}
CC1{
width:69%;
height:100%;
border-right:2px solid #FF9224;
float:left;
}
CC2{
width:30%;
height:100%;
float:left;
}
CC11{
width:100%;
height:5%;
}
CC12{
width:100%;
height:20%;
}
CC13{
width:100%;
height:5%;
}
CC14{
width:100%;
height:20%;
}
CC15{
width:100%;
height:8%;
}
CC16{
width:100%;
height:45%;
}
CC21{
width:100%;
height:15%;
}
CC22{
width:100%;
height:40%;
}
CC23{
width:100%;
height:20%;
}
CC24{
width:100%;
height:20%;
}
B1{
border:0 none;
width:100%;
height:55%;
background-color:#84C1FF;
}
B2{
border:0 none;
width:100%;
height:45%;
}
BB{
width:160px;
height:70px;
position:absolute;
left:620px;
bottom:0px;
background-color:white;
}
TABLEA{
width:65%;
height:112%;
border-style:none;
}
TABLEB{
width:100%;
height:100%;
border-style:none;
}
CC121{
width:35%;
height:100%;
float:left;
}
CC122{
width:65%;
height:100%;
float:left;
}
CC141{
width:35%;
height:100%;
float:left;
}
CC142{
width:65%;
height:100%;
float:left;
}
i{
position:absolute;
left:40px;
top:40px; }
m{
position:absolute;
left:40px;
top:190px; }
TABLEC{
width:85%;
height:85%;
border:0px none ;
}
img{
background-repeat: no-repeat;
background-size: cover;
border:0;
}
p{
font-size:15px;
}
信息与网络中心
| | |
| | | | |
  校园网将全面启用IEEE 802.1x实名上网认证系统，该西永采用radius服务器，实现在交换机端口就能认证。清大家在本站下载哭护短，并领取认证账号。
  这将使我校的网络安全防范达到一个更高的水平，请多支持。
  信息与网络管理中心是主要负担全院饿校园网络规划、建设、监控及管理；网络开发和研究；远程教学应用及研究；部分计算机课程教学工作。
  中心环境优雅、人员团结，设备先进。基础教学功能齐全，充满了生机和活力。
| | | |
|   中心环境优雅、人员团结，设备先进。基础教学功能齐全，充满了生机和活力。 |   中心环境优雅、人员团结，设备先进。基础教学功能齐全，充满了生机和活力。 |   中心环境优雅、人员团结，设备先进。基础教学功能齐全，充满了生机和活力。 |
</table>
</div>
</div>
<div id="CC2">
<div id="CC21">
<br>
  
<img src="test3/images/images/xiaoguo_r7_c10.png" width="70%" height="70%" alt="">
</div>
<div id="CC22">
  <img src="test3/images/images/xiaoguo_r10_c10.png" width="180" height="30" alt="">
  <img src="test3/images/images/xiaoguo_r11_c10.png" width="180" height="30" alt="">
  <img src="test3/images/images/xiaoguo_r13_c10.png" width="180" height="120" alt="">
  <img src="test3/images/images/xiaoguo_r15_c10.png" width="180" height="24" alt="">
</div>
<div id="CC23">
  <img src="test3/images/images/xiaoguo_r18_c10.png" width="180" height="30" alt="">
  <img src="test3/images/images/xiaoguo_r21_c10.png" width="180" height="47" alt="">
  <img src="test3/images/images/xiaoguo_r15_c10.png" width="180" height="22" alt="">
</div>
<div id="CC24">
</div>
</div>
</div>
</div>
<div id="D">
<table height="100%" width="50%" align="center" >
<tr>
<td>网站首页 |</td>
<td>加入收藏 |</td>
<td>邮箱登录 |</td>
<td>留言簿 </td>
</tr>
</table>
</div>
<div id="E">
<br>
<p align="center">版权所有*2009 信息与网络中心 Email：[email protected]</p>
</div>
</div>
</body>