作业_CSS基本语法

实验二 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:黑体;
}

情感小驿

&nbsp&nbsp姓名：孙悟空

&nbsp&nbsp网龄：1024年

&nbsp&nbsp星座：天秤

&nbsp&nbsp QQ号：442937820

&nbsp&nbsp爱好：飞天，看漫画

&nbsp&nbsp喜欢的歌曲：《齐天大圣》

我知道自己的，无奈中对自己轻语。

我不知道自己，无奈自己软弱。

我认识自己，在梦里。

我不认识自己，在现实中。

    </div>
    <div id="B4">
        <img src="test2/BANNER.GIF" width="95%" height="80%" border="0" 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;
}

信息与网络中心

---

&nbsp&nbsp校园网将全面启用IEEE 802.1x实名上网认证系统，该西永采用radius服务器，实现在交换机端口就能认证。清大家在本站下载哭护短，并领取认证账号。

&nbsp&nbsp这将使我校的网络安全防范达到一个更高的水平，请多支持。

---

&nbsp&nbsp信息与网络管理中心是主要负担全院饿校园网络规划、建设、监控及管理；网络开发和研究；远程教学应用及研究；部分计算机课程教学工作。

&nbsp&nbsp中心环境优雅、人员团结，设备先进。基础教学功能齐全，充满了生机和活力。

---

&nbsp&nbsp中心环境优雅、人员团结，设备先进。基础教学功能齐全，充满了生机和活力。	&nbsp&nbsp中心环境优雅、人员团结，设备先进。基础教学功能齐全，充满了生机和活力。	&nbsp&nbsp中心环境优雅、人员团结，设备先进。基础教学功能齐全，充满了生机和活力。

                        </table>
                    </div>
                </div>
                <div id="CC2">
                    <div id="CC21">
                    <br>
                    &nbsp&nbsp
                    <img src="test3/images/images/xiaoguo_r7_c10.png" width="70%" height="70%" border="0" alt="">
                    </div>
                    <div id="CC22">
                    &nbsp&nbsp<img src="test3/images/images/xiaoguo_r10_c10.png" width="180" height="30" border="0" alt="">
                    &nbsp&nbsp<img src="test3/images/images/xiaoguo_r11_c10.png" width="180" height="30" border="0" alt="">
                    &nbsp&nbsp<img src="test3/images/images/xiaoguo_r13_c10.png" width="180" height="120" border="0" alt="">
                    &nbsp&nbsp<img src="test3/images/images/xiaoguo_r15_c10.png" width="180" height="24" border="0" alt="">
                    </div>
                    <div id="CC23">
                    &nbsp&nbsp<img src="test3/images/images/xiaoguo_r18_c10.png" width="180" height="30" border="0" alt="">
                    &nbsp&nbsp<img src="test3/images/images/xiaoguo_r21_c10.png" width="180" height="47" border="0" alt="">
                    &nbsp&nbsp<img src="test3/images/images/xiaoguo_r15_c10.png" width="180" height="22" border="0" alt="">
                    </div>
                    <div id="CC24">

                    </div>
                </div>
            </div>
        </div>
        <div id="D">
            <table height="100%" width="50%" align="center" >
                <tr>
                    <td>网站首页&nbsp|</td>
                    <td>加入收藏&nbsp|</td>
                    <td>邮箱登录&nbsp|</td>
                    <td>留言簿&nbsp</td>
                </tr>
            </table>
        </div>
        <div id="E">
            <br>
            <p align="center">版权所有*2009&nbsp信息与网络中心&nbspEmail：tangsix@163.com</p>
        </div> 
    </div>
</body>