`
onewayonelife
  • 浏览: 252001 次
  • 性别: Icon_minigender_1
  • 来自: 太原
社区版块
存档分类
最新评论

CSS基础

CSS浏览器Google嵌入式活动 
阅读更多

1.嵌入式CSS样式表

<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>

 

<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>

 /*
   * font-weight 属性设置文本的粗细
   * bold 定义粗体字符
   * text-decoration 属性规定添加到文本的修饰
   * underline 定义文本下的一条线
   * font-style 属性定义字体的风格
   * italic 浏览器会显示一个斜体的字体样式
   */

 

2.内部CSS样式表

<head>
<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> 

 

<head>
<style>
<!--
ul{
	list-style-type:none;
	display:inline;
}
-->
</style>
</head>
<body>
	<ul>
		<li>浏览器区别1</li>
		<li>浏览器区别2</li>
	</ul>
</body>

 /*
   * list-style-type 属性设置列表项标记的类型
   * none 无标记
   * 
   * display 属性规定元素应该生成的框的类型
   * inline 默认。此元素会被显示为内联元素，元素前后没有换行符
   */

 

<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>

 

3.链接式CSS样式表

<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>
h2{
	color:#0000FF;
}
p{
	color:#FF33CC;
	text-decoration:underline;
	font-style:italic;
	font-size:28px;
}

 

4.引入式CSS样式表

<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>
h2{
	color:#0000FF;
}
p{
	color:#FF33CC;
	text-decoration:underline;
	font-style:italic;
	font-size:28px;
}

 

5.class选择器

<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>

 

6.标记选择器.class

<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>

 

7.ID选择器

<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>

 

8.选择器集体声明

<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>

 

9.CSS选择器的嵌套声明

<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>

 /*

   * <p>标记内的<b>标记生效

   */

 

10.CSS的子选择器

<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>

 /*

   * <a href="http://picasaweb.google.com/isaacshun">isaac's Picasa</a>标记生效

   */

 

11.CSS的属性器

<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>

 /*

   * <a href="#" title="CSS1">CSS1</a>标记生效

   */

 

12.设置文字效果

<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>

 

13.行间距line-height

<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>

 

14.首字放大

<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>

 /*

   * float 属性定义元素在哪个方向浮动

   * 以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中

   * 任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素

   * left 元素向左浮动

   */ 

 

15.边框

<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>

 /*

   * border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式

   * dotted 定义点状边框，在大多数浏览器中呈现为实线

   * dashed 定义虚线，在大多数浏览器中呈现为实线

   */

 

17.图文混排

<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>

 /*

   * margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值

   * padding 简写属性在一个声明中设置所有内边距属性。该属性可以有 1 到 4 个值

   */ 

 

18.利用背景颜色分块

<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>

 /*

   * vertical-align 属性设置元素的垂直对齐方式

   */ 

 

19.背景图片

<head>
<title>背景图片</title>
<style>
<!--
body{
	background-image:url(bg1.jpg);	/* 页面背景图片 */
}
-->
</style>
</head>
<body>
</body>

 

20.背景重复

<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>

 /*

   * background-repeat 属性设置是否及如何重复背景图像

   * 默认地，背景图像在水平和垂直方向上重复

   * repeat 默认。背景图像将在垂直方向和水平方向重复
   * repeat-x 背景图像将在水平方向重复 
   * repeat-y 背景图像将在垂直方向重复 
   * no-repeat 背景图像将仅显示一次
   * inherit 规定应该从父元素继承 background-repeat 属性的设置

   */ 

 

21.按钮超链接

<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>

 

21.项目列表

<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> 

 

22.无需表格的菜单

<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>

 

分享到：
| JavaScript基础
评论
1 楼 wcily123 2010-10-26  
马克 回家看
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics