|
二. CSS知识
1. css特点
控制显示样式
重用
控制灵活
被所有浏览器支持
实现页面与效果分离
2. css的属性
position:absolute; 绝对位置，固定不能动
top:10px; 离顶部的距离
left:10px; 离左边的距离
margin:auto; 边界，指离上个容器的距离
padding:10pt; 离文字的距离
width:100%; 宽度
height:100%; 高度
3. 样式表
1) 行内样式表
<p style=“color:red;font-family:system;font-size:36px">
<h2 style=“font-style:bold;text-align=left;color=red”>
2) 内嵌样式表
语法规则：<head><style type=“text/css”>选择器</style></head>
Html选择器：h2{color:red;font-size=24px} p{…}
Class选择器：.fire{color:red;} <td class=fire …>
ID选择器：#fire{color:red;} <td id=“fire” …>
3) 外部样式表
<link rel="stylesheet" type="text/css" href="main.css" />
<style type=“text/css” @import aa.css </style>
4) 三大选择器
当在 HTML中定义为 id=“divID”时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为 class=“divID”时，则在CSS 中对应的设置语法是.divID。
如果id=“divID”这个层中包括了一个<img></img>， 则这个 img 在 CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在 class=“divID”这个层中时，则设置语法应该是.divID img {}。
HTML中的一切元素都是可以定义的， 例如 table、 tr、 td、 th、 form、 img、 input...等等，如果你要在 CSS中设置它们，则直接写入元素的名称加上一对大括号{}就可以了。
<head>
<style type="text/css">
body{text-align:right;color:red;font-family=system;font-size=72px;font-style=normal;}
.class1{color:yellow;}
#id1{color=green;}
</style>
<link href="a.css" type="text/css" rel="stylesheet" ></style>
</head>
<body>
测试
<h2 style="text-align=left;">h2</h2>
<div id=id1>id1</div>
<div class=class1>class1</div>
</body>
4. css文件编写
1) 写一个a.css文件，一定要以“;"结尾，否则不会显示样式
.body {
font-family: "宋体";
font-size: 12px;
background-color: #FFFFFF;
font-weight: normal;
}
.table
{
font-family: "宋体";
font-size: 12px;
width : 90%;
height :90%
}
.td
{
font-family: "宋体";
font-size: 12px;
}
.input{
font-family: "宋体";
font-size: 12px;
}
.title{
font-family: "宋体";
font-size: 40px;
font-weight: bold;
color:red;
vertical-align: center;
border: solid 10px green;
}
2) 写一个a.html文件
<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
关于明天停水的通知
<BR>
<div class="s1">
将从上午8：00开始，晚上会有水
</div>
</body>
</html>
5. 用css换肤
1) html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link id="linkx" href="styles1.css" rel="stylesheet" type="text/css" />
<script>
function skin(){
var v = document.all.s.options[document.all.s.selectedIndex].value;
var skinx = "styles" + v + ".css";
document.all.linkx.href = skinx;
}
</script>
</head>
<body>
<select name="s" style="position:absolute; width:100pt;left:665pt;" onchange="skin();">
<option value="1">样式1</option>
<option value="2">样式2</option>
<option value="3">样式3</option>
</select>
<div id="d1">板块1</div>
<div id="d2">板块2</div>
<div id="d3">板块3</div>
</body>
</html>
2) styles1.css
#d1{
position:absolute;
top:10pt;
left:20pt;
width:200pt;
height:200pt;
background-color:#CC3333; //背景颜色
color:#33FF33; //字体颜色
}
#d2{
position:absolute;
top:10pt;
left:230pt;
width:300pt;
height:200pt;
background-color:#FF0000;
}
#d3{
position:absolute;
top:220pt;
left:20pt;
width:510pt;
height:200pt;
background-color:#33FF00;
}
3) styles2.css
#d1{
position:absolute;
top:220pt;
left:20pt;
width:510pt;
height:400pt;
background-color:#33FF00;
background-image:url(14.JPG);
background-repeat:no-repeat;
}
#d2{
position:absolute;
top:10pt;
left:430pt;
width:100pt;
height:200pt;
background-color:#FF0000;
}
#d3{
position:absolute;
top:10pt;
left:20pt;
width:400pt;
height:200pt;
background-color:#006666;
color:#33FF33;
}
4) styles3.css
#d1{
position:absolute;
top:10pt;
left:20pt;
width:200pt;
height:200pt;
background-color:#006666;
color:#33FF33;
}
#d2{
position:absolute;
top:10pt;
left:240pt;
width:200pt;
height:200pt;
background-color:#FF6633;
color:#003366;
}
#d3{
position:absolute;
top:10pt;
left:460pt;
width:200pt;
height:200pt;
background-color:#336699;
color:#FF6600;
}
6. css嵌套
<html>
<head>
<style type="text/css">
#mydiv{
color:#FF0000;
}
#mydiv div.ee{
font-weight:bold;
}
.dc{
color:blue;
}
.dc div{
font-style:italic;
background-color:#FFFF00;
}
.dc div.aa{
border-bottom-style:solid;
border-bottom-width:thin;
border-bottom-color:#3300CC;
border-top-style:solid;
border-top-width:thin;
border-top-color:#999999;
border-left-style:solid;
border-left-width:thin;
border-left-color:#999999;
border-right-style:solid;
border-right-width:thin;
border-right-color:#999999;
}
</style>
</head>
<body>
<div id="mydiv">中华人民共和国
<div class="ee">中华人民共和国</div>
</div>
<div class="dc">
北大青鸟1
<div>北大青鸟2</div>
<div>北大青鸟3</div>
<div class="aa">北大青鸟4</div>
</div>
</body>
</html>
7. 一行三列布局
<html>
<head>
<style type="text/css">
#left {
position: absolute;
top: 15px;
left: 0px;
border: 5px solid red;
background: #FFF;
width: 150px;
height:400px;
}
#middle {
margin: 0px 160px 0px 160px;
border: 5px solid #666;
background: #FFF;
height:400px;
}
#right {
position: absolute;
top: 15px;
right: 0px;
border: 5px solid #666;
background: #FFF;
width: 150px; /* ie5win fudge begins */
height:400px;
}
</style>
</head>
<body>
<DIV id=left><P>left</P></DIV>
<DIV id=middle>中间的部分</DIV>
<DIV id=right></DIV>
</body>
</html>
8. 一行三列布局(吊顶)
<html>
<head>
<style type="text/css">
body{
margin:2px;
}
#top{
width:100%;
border:solid thin 1px;
background-color:#3366FF;
height:80px;
}
#left {
position: absolute;
top: 90px;
left:2px;
border: 1px solid #666;
background: #FFF;
width: 150px;
}
#middle {
margin: 6px 160px 0px 160px;
border: 1px solid #666;
background: #FFF;
}
#right {
position: absolute;
top: 90px;
right: 0px;
border: 1px solid #666;
background: #FFF;
width: 150px; /* ie5win fudge begins */
}
</style>
</head>
<body>
<div id="top">中华人民共和国是一个伟大的民族。</div>
<DIV id="left">中华人民共和国中华人民共和国中华人民共和国生命之冷藏室</DIV>
<DIV id="middle">中<br />间<br />的<br />部分</DIV>
<DIV id="right">看吧，天是多么的蓝啊，地是多么的广。</DIV>
</body>
</html>
|
一共有 0 条评论