CSS基础一
<html>
<head>
<title>标题在这里</title>
</head>
<body>
<h2>CSS的各种标记</h2>
<p>从这里开始正文的内容</p>
</body>
</html>
<html>
<head>
<title>标题在这里</title>
</head>
<body>
<h2><font color="#0033CC" face="幼圆">标记文字01</font></h2>
<p>CSS标记正文内容01</p>
<h2><font color="#0033CC" face="幼圆">标记文字02</font></h2>
<p>CSS标记正文内容02</p>
<h2><font color="#0033CC" face="幼圆">标记文字03</font></h2>
<p>CSS标记正文内容03</p>
<h2><font color="#0033CC" face="幼圆">标记文字04</font></h2>
<p>CSS标记正文内容04</p>
</body>
</html>
<html>
<head>
<title>标题在这里</title>
<style>
<!--
h2{
font-family:黑体;
color:#FF0000;
}
-->
</style>
</head>
<body>
<h2>标记文字01</h2>
<p>CSS标记正文内容01</p>
<h2>标记文字02</h2>
<p>CSS标记正文内容02</p>
<h2>标记文字03</h2>
<p>CSS标记正文内容03</p>
<h2>标记文字04</h2>
<p>CSS标记正文内容04</p>
</body>
</html>
<html>
<head>
<title>页面标题</title>
<style>
<!--
ul{
list-style-type:none;
display:inline;
}
-->
</style>
</head>
<body>
<ul>
<li>浏览器区别1</li>
<li>浏览器区别2</li>
</ul>
</body>
</html>
<html>
<head>
<title>标题在这里</title>
</head>
<body>
<p style="color:#0000FF; font-size:18px; font-weight:bold;">CSS内容1</p>
<p style="color:#000000; text-decoration:underline; font-style:italic;">正文CSS2</p>
<p style="color:#FF33CC; font-size:28px; font-weight:bold;">CSS正文内容3</p>
</body>
</html>
<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
color:#FF33CC;
text-decoration:underline;
font-style:italic;
font-size:28px;
}
-->
</style>
</head>
<body>
<p>紫红色、斜体、下划线、28px的效果1</p>
<p>紫红色、斜体、下划线、28px的效果2</p>
<p>紫红色、斜体、下划线、28px的效果3</p>
<p>紫红色、斜体、下划线、28px的效果4</p>
</body>
</html>
<html>
<head>
<title>标题在这里</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<h2>第一行标题1</h2>
<p>紫红色、斜体、下划线、28px的效果1</p>
<h2>第二行标题2</h2>
<p>紫红色、斜体、下划线、28px的效果2</p>
</body>
</html>
<html>
<head>
<title>标题在这里</title>
<style type="text/css">
<!--
@import url(1.css);
-->
</style>
</head>
<body>
<h2>第一行标题1</h2>
<p>紫红色、斜体、下划线、28px的效果1</p>
<h2>第二行标题2</h2>
<p>紫红色、斜体、下划线、28px的效果2</p>
<h3>第三行标题3</h3>
<p>紫红色、斜体、下划线、28px的效果3</p>
</body>
</html>
<html>
<head>
<title>class选择器</title>
<style type="text/css">
<!--
.first{
color:blue; /* 蓝色 */
font-size:17px; /* 文字大小 */
}
.second{
color:red; /* 红色 */
font-size:20px; /* 文字大小 */
}
.third{
color:cyan; /* 青色 */
font-size:23px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<p class="first">class类别选择器1</p>
<p class="second">class类别选择器2</p>
<p class="third">class类别选择器3</p>
<h3 class="second">h3同样适用</h3>
</body>
</html>
<html>
<head>
<title>标记选择器.class</title>
<style type="text/css">
<!--
h4{ /* 标记选择器 */
color:red;
font-size:18px;
}
h4.special{ /* 标记.类别选择器 */
color:blue; /* 蓝色 */
font-size:24px; /* 文字大小 */
}
.special{ /* 类别选择器 */
color:green;
}
-->
</style>
</head>
<body>
<h4>标记选择器1.class1</h4>
<h4>标记选择器2.class2</h4>
<h4 class="special">标记选择器3.class3</h4>
<h4>标记选择器4.class4</h4>
<h4>标记选择器5.class5</h4>
<p class="special">使用于别的标记</p>
</body>
</html>
<html>
<head>
<title>ID选择器</title>
<style type="text/css">
<!--
#one{
font-weight:bold; /* 粗体 */
}
#two{
font-size:31px; /* 字体大小 */
color:#999900; /* 颜色 */
}
-->
</style>
</head>
<body>
<p id="one">ID选择器使用1</p>
<p id="two">ID选择器使用2</p>
<p id="two">ID选择器使用3</p>
</body>
</html>
<html>
<head>
<title>选择器集体声明</title>
<style type="text/css">
<!--
h1, h2, h3, h4, h5, p{ /* 集体声明 */
color:purple; /* 文字颜色 */
font-size:14px; /* 字体大小 */
}
h2.special, .special, #one{ /* 集体声明 */
text-decoration:underline; /* 下划线 */
}
-->
</style>
</head>
<body>
<h1>选择器集体声明h1</h1>
<h2 class="special">选择器集体声明h2</h2>
<h3>选择器集体声明h3</h3>
<h4>选择器选择器集体声明h4</h4>
<h5>集体声明h5</h5>
<p>选择器集体声明p1</p>
<p class="special">选择器集体声明p2</p>
<p id="one">选择器集体声明p3</p>
</body>
</html>
<html>
<head>
<title>CSS选择器的嵌套声明</title>
<style type="text/css">
<!--
p b{ /* 嵌套声明 */
color:maroon; /* 颜色 */
text-decoration:underline; /* 下划线 */
font-size:30px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<p>选择器嵌套<b>使用CSS标</b>记的方法</p>
选择器嵌套之外<b>的标</b>记并不生效
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS的子选择器</title>
<style type="text/css">
ul.myList > li > a{ /* 子选择器 */
text-decoration:none; /* 没有下划线 */
color:#336600;
}
</style>
</head>
<body>
<ul class="myList">
<li><a href="http://picasaweb.google.com/isaacshun">isaac's Picasa</a>
<ul>
<li><a href="#">CSS1</a></li>
<li><a href="#">CSS2</a></li>
<li><a href="#">CSS3</a></li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS的属性器</title>
<style type="text/css">
a[title=CSS1]{
text-decoration:none; /* 没有下划线 */
color:#336600;
}
</style>
</head>
<body>
<ul class="myList">
<li><a href="http://picasaweb.google.com/isaacshun">isaac's Picasa</a>
<ul>
<li><a href="#" title="CSS1">CSS1</a></li>
<li><a href="#" title="CSS2">CSS2</a></li>
<li><a href="#" title="CSS3">CSS3</a></li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>设置文字效果</title>
<style type="text/css">
p{
font-family:黑体; /* 文字字体 */
font-size:35px; /* 文字大小 */
color:#0033CC; /* 颜色 */
font-weight:bold; /* 粗体 */
font-style:italic; /* 斜体 */
text-decoration:line-through; /* 删除线 */
}
</style>
</head>
<body>
<p>CSS设置文字效果</p>
</body>
</html>
<html>
<head>
<title>行间距line-height</title>
<style>
<!--
p.one{
font-size:10pt;
line-height:8pt; /* 行间距，绝对数值，行间距小于字体大小 */
}
p.second{ font-size:18px; }
p.third{ font-size:10px; }
p.second, p.third{
line-height: 1.5em; /* 行间距，相对数值，1.5倍行距 */
}
-->
</style>
</head>
<body>
<p class="one">冬至，是我国农历中一个非常重要的节气，也是一个传统节日，至今仍有不少地方有过冬至节的习俗。冬至俗称“冬节”、“长至节”、“亚岁”等。早在二千五百多年前的春秋时代，我国已经用土圭观测太阳测定出冬至来了，它是二十四节气中最早制订出的一个。时间在每年的阳历12月22日或者23日之间。</p>
<p class="second">冬至是北半球全年中白天最短、黑夜最长的一天，过了冬至，白天就会一天天变长。古人对冬至的说法是：阴极之至，阳气始生，日南至，日短之至，日影长之至，故曰“冬至”。冬至过后，各地气候都进入一个最寒冷的阶段，也就是人们常说的“进九”，我国民间有“冷在三九，热在三伏”的说法。</p>
<p class="third">在我国古代对冬至很重视，冬至被当作一个较大节日，曾有“冬至大如年”的说法，而且有庆贺冬至的习俗。《汉书》中说：“冬至阳气起，君道长，故贺。”人们认为：过了冬至，白昼一天比一天长，阳气回升，是一个节气循环的开始，也是一个吉日，应该庆贺。《晋书》上记载有“魏晋冬至日受万国及百僚称贺……其仪亚于正旦。”说明古代对冬至日的重视。</p>
</body>
</html>
<html>
<head>
<title>首字放大</title>
<style>
<!--
body{
background-color:#564700; /* 背景色 */
}
p{
font-size:15px; /* 文字大小 */
color:#FFFFFF; /* 文字颜色 */
}
p span{
font-size:60px; /* 首字大小 */
float:left; /* 首字下沉 */
padding-right:5px; /* 与右边的间隔 */
font-weight:bold; /* 粗体字 */
font-family:黑体; /* 黑体字 */
color:yellow; /* 字体颜色 */
}
-->
</style>
</head>
<body>
<p><span>端</span>午节是古老的传统节日，始于中国的春秋战国时期，至今已有2000多年历史。据《史记》“屈原贾生列传”记载，屈原，是春秋时期楚怀王的大臣。他倡导举贤授能，富国强兵，力主联齐抗秦，遭到贵族子兰等人的强烈反对，屈原遭馋去职，被赶出都城，流放到沅、湘流域。他在流放中，写下了忧国忧民的《离骚》、《天问》、《九歌》等不朽诗篇，独具风貌，影响深远（因而，端午节也称诗人节）。公元前278年，秦军攻破楚国京都。屈原眼看自己的祖国被侵略，心如刀割，但是始终不忍舍弃自己的祖国，于五月五日，在写下了绝笔作《怀沙》之后，抱石投汨罗江身死，以自己的生命谱写了一曲壮丽的爱国主义乐章。</p>
<p>传说屈原死后，楚国百姓哀痛异常，纷纷涌到汨罗江边去凭吊屈原。渔夫们划起船只，在江上来回打捞他的真身。有位渔夫拿出为屈原准备的饭团、鸡蛋等食物，“扑通、扑通”地丢进江里，说是让鱼龙虾蟹吃饱了，就不会去咬屈大夫的身体了。人们见后纷纷仿效。一位老医师则拿来一坛雄黄酒倒进江里，说是要药晕蛟龙水兽，以免伤害屈大夫。后来为怕饭团为蛟龙所食，人们想出用楝树叶包饭，外缠彩丝，发展成棕子。</p>
</body>
</html>
<html>
<head>
<title>边框</title>
<style>
<!--
img.test1{
border-style:dotted; /* 点画线 */
border-color:#FF9900; /* 边框颜色 */
border-width:6px; /* 边框粗细 */
}
img.test2{
border-style:dashed; /* 虚线 */
border-color:#000088; /* 边框颜色 */
border-width:2px; /* 边框粗细 */
}
-->
</style>
</head>
<body>
<img src="cartoon1.jpg" class="test1">
<img src="cartoon1.jpg" class="test2">
</body>
</html>
<html>
<head>
<title>图文混排</title>
<style type="text/css">
<!--
body{
background-color:543b32; /* 页面背景颜色 */
margin:0px;
padding:0px;
}
img{
float:left; /* 文字环绕图片 */
}
p{
color:#FFFF00; /* 文字颜色 */
margin:0px;
padding-top:10px;
padding-left:5px;
padding-right:5px;
}
span{
float:left; /* 首字放大 */
font-size:85px;
font-family:黑体;
margin:0px;
padding-right:5px;
}
-->
</style>
</head>
<body>
<img src="hop.jpg" border="0">
<p><span>河</span>马，偶蹄目、河马科，英文名hoppopotamus。原来遍布非洲所有深水的河流与溪流中，现在范围已缩小，主要居住在非洲热带的河流间。它们喜欢栖息在河流附近沼泽地和有芦苇的地方。生活中的觅食、交配、产仔、哺乳也均在水中进行。</p>
<p>河马的特点是吻宽嘴大，四肢短粗、躯体象个粗圆桶。胃3室不反刍。鼻孔在吻端上面，与上方的眼睛和耳朵呈一条直线。这样它全体潜伏水中只须将头顶露出水面就能嗅、视、听兼呼吸了。体长3.75-4.6米，尾长约56厘米，肩高约1.5米，体重3-4.6吨，下犬齿长约60厘米，可重达3公斤。河马皮肤排出的液体含红色色素，经皮肤反射显得象是红色的，引起了河马出“血汗”的说法。</p>
<p>河马极善游泳，在受惊时，一般避入水中。每天大部分时间在水中，潜伏水下时一般每3、5分钟把头露出水面呼吸一次，但可潜伏约半小时不出水面来换气。它们的皮肤长时间离水会干裂。河马成对或结成小群活动，老年雄性常单独活动。夜行性：它们几乎整个白天都在河水中或是河流附近睡觉或休息，晚上出来吃食，有时会顺水游出30多公里觅食。主要以水生植物为食；偶食陆地作物，以草为主，有时到田地去吃庄稼，食物短缺时，它们也吃肉，据称，河马是路地上最大的食肉动物(杂食)。河马无定居：不在一个地方长期停留，每隔数日便迁到新地方去。</p>
<p>河马繁殖期不固定,全年均繁殖,每产一仔,孕期227-240天，仔兽出生时体重27-45公斤。在人为饲养下约3岁性成熟，在野外5、6岁成熟。寿命40-50年。河马的皮下脂肪约5厘米厚。人们常猎杀它取其脂肪、肉和厚皮。脂肪可得90公斤。当地人非常珍视它的肉，肉味略同于野猪肉。牙齿质量也很好,是珍贵的雕刻材料，可作为象牙替代品。</p>
</body>
</html>
<html>
<head>
<title>利用背景颜色分块</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-color:#eaddef; /* 页面背景色 */
}
.topbanner{
background-color:#1e0c25; /* 顶端banner的背景色 */
}
.leftbanner{
width:22%; height:330px;
vertical-align:top;
background-color:#22072c; /* 左侧导航条的背景色 */
color:#FFFFFF;
text-align:left;
padding-left:40px;
font-size:14px;
}
.mainpart{
text-align:center;
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="1" width="100%" border="0">
<tr>
<td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td>
</tr>
<tr>
<td class="leftbanner">
<br><br>首页<br><br>分类讨论
<br><br>谈天说地<br><br>精华区
<br><br>我的信箱<br><br>休闲娱乐
<br><br>立即注册<br><br>离开本站
</td>
<td class="mainpart">正文内容...</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>背景图片</title>
<style>
<!--
body{
background-image:url(bg1.jpg); /* 页面背景图片 */
}
-->
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<title>背景重复</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-image:url(bg2.jpg); /* 背景图片 */
background-repeat:repeat-y; /* 垂直方向重复 */
background-color:#0066FF; /* 背景颜色 */
}
-->
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<title>按钮超链接</title>
<style>
<!--
a{ /* 统一设置所有样式 */
font-family: Arial;
font-size: .8em;
text-align:center;
margin:3px;
}
a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */
color: #A62020;
padding:4px 10px 4px 10px;
background-color: #ecd8db;
text-decoration: none;
border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */
border-left: 1px solid #EEEEEE;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
a:hover{ /* 鼠标经过时的超链接 */
color:#821818; /* 改变文字颜色 */
padding:5px 8px 3px 12px; /* 改变文字位置 */
background-color:#e2c4c9; /* 改变背景色 */
border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */
border-left: 1px solid #717171;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
}
-->
</style>
</head>
<body>
<a href="#">首页</a>
<a href="#">一起走到</a>
<a href="#">从明天起</a>
<a href="#">纸飞机</a>
<a href="#">下一站</a>
<a href="#">门</a>
<a href="#">其它</a>
</body>
</html>
<html>
<head>
<title>项目列表</title>
<style>
<!--
body{
background-color:#c1daff;
}
ul{
font-size:0.9em;
color:#00458c;
list-style-type:decimal; /* 项目编号 */
}
-->
</style>
</head>
<body>
<p>四大名著</p>
<ul>
<li>sanguo 三国演义</li>
<li>honglou 红楼梦</li>
<li>shuihu 水浒传</li>
<li>xiyou 西游记</li>
</ul>
</body>
</html>
<html>
<head>
<title>无需表格的菜单</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #ED9F9F; /* 添加下划线 */
}
#navigation li a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
-->
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>
h2{
color:#0000FF;
}
p{
color:#FF33CC;
text-decoration:underline;
font-style:italic;
font-size:28px;
}