精通CSS.DIV网页样式与布局_第二章

summer_021

浏览: 58023 次
性别:
来自: 上海

最近访客更多访客>>

lengzl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML_Css

<html>
<head>
<title>class选择器</title>
<style type="text/css">
<!--
.one{
	color:red;			/* 红色 */
	font-size:18px;		/* 文字大小 */
}
.two{
	color:green;		/* 绿色 */
	font-size:20px;		/* 文字大小 */
}
.three{
	color:cyan;			/* 青色 */
	font-size:22px;		/* 文字大小 */
}
-->
</style>
   </head>

<body>
	<p class="one">class选择器1</p>
	<p class="two">class选择器2</p>
	<p class="three">class选择器3</p>
	<h3 class="two">h3同样适用</h3>
</body>
</html>

<html>
<head>
<title>class选择器与标记选择器</title>
<style type="text/css">
<!--
p{						/* 标记选择器 */
	color:blue;
	font-size:18px;
}
.special{				/* 类别选择器 */
	color:red;			/* 红色 */
	font-size:23px;		/* 文字大小 */
}

-->
</style>
   </head>

<body>
	<p>class选择器与标记选择器1</p>
	<p>class选择器与标记选择器2</p>
	<p>class选择器与标记选择器3</p>
	<p class="special">class选择器与标记选择器4</p>
	<p>class选择器与标记选择器5</p>
	<p>class选择器与标记选择器6</p>	
</body>
</html>

<html>
<head>
<title>标记选择器.class</title>
<style type="text/css">
<!--
h3{						/* 标记选择器 */
	color:blue;
	font-size:18px;
}
h3.special{				/* 标记.类别选择器 */
	color:red;			/* 红色 */
	font-size:23px;		/* 文字大小 */
}
.special{				/* 类别选择器 */
	color:green;
}
-->
</style>
   </head>

<body>
	<h3>标记选择器.class1</h3>
	<h3>标记选择器.class2</h3>
	<h3 class="special">标记选择器.class3</h3>
	<h3>标记选择器.class4</h3>
	<h3>标记选择器.class5</h3>	
	<p class="special">使用于别的标记</p>
</body>
</html>

<html>
<head>
<title>同时使用两个class</title>
<style type="text/css">
<!--
.one{
	color:blue;		/* 颜色 */
}
.two{
	font-size:22px;	/* 字体大小 */
}
-->
</style>
   </head>

<body>
	<h4>一种都不使用</h4>
	<h4 class="one">同时使用两种class，只使用第一种</h4>
	<h4 class="two">同时使用两种class，只使用第二种</h4>
	<h4 class="one two">同时使用两种class，同时使用</h4>
	<h4>一种都不使用</h4>
</body>
</html>

<html>
<head>
<title>ID选择器</title>
<style type="text/css">
<!--
#one{
	font-weight:bold;		/* 粗体 */
}
#two{
	font-size:30px;			/* 字体大小 */
	color:#009900;			/* 颜色 */
}
-->
</style>
   </head>

<body>
   <!-- id标记与class标记区别:
   	 id不能用于两个标签 ,因为JS使用的时候不允许
   	 声明的时候:.与#
   	 引用的时候:class与id
   	 -->
	<p id="one">ID选择器1</p>
	<p id="two">ID选择器2</p>
	<p id="two">ID选择器3</p>
	<p id="one two">ID选择器3</p>
</body>
</html>

<html>
<head>
<title>集体声明</title>
<style type="text/css">
<!--
h1, h2, h3, h4, h5, p{			/* 集体声明 */
	color:purple;				/* 文字颜色 */
	font-size:15px;				/* 字体大小 */
}
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>全局声明</title>
<style type="text/css">
<!--
*{								/* 全局声明 */
	color: purple;				/* 文字颜色 */
	font-size:15px;				/* 字体大小 */
}
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标签用上样式*/
p b{							/* 嵌套声明 */
	color:maroon;				/* 颜色 */
	text-decoration:underline;	/* 下划线 */
}
-->
</style>
   </head>

<body>
	<p>嵌套使<b>用CSS</b>标记的方法</p>
	嵌套之外的<b>标记</b>不生效
</body>
</html>

<html>
<head>
	<title>父子关系</title>
	<base target="_blank">
<style>
<!-- /**h1 标签下的em 用自己特有的*/
h1{
	color:red;					/* 颜色 */
	text-decoration:underline;	/* 下划线 */
}


h1 em{							/* 嵌套选择器 */
	color:#004400;				/* 颜色 */
	font-size:80px;				/* 字体大小 */
}
-->
</style>
   </head>

<body>
	<h1>祖国的首都<em>北京</em></h1>
	<p>欢迎来到祖国的首都<em>北京</em>，这里是全国<strong>政治、<a href="economic.html"><em>经济</em></a>、文化</strong>的中心</p>
	<ul>
		<li>在这里，你可以：
			<ul>
				<li>感受大自然的美丽</li>
				<li>体验生活的节奏</li>
				<li>领略首都的激情与活力</li>
			</ul>
		</li>
		<li>你还可以：
			<ol>
				<li>去八达岭爬长城</li>
				<li>去香山看红叶</li>
				<li>去王府井逛夜市</li>
			</ol>
		</li>
	</ul>
	<p>如果您有任何问题，欢迎<a href="contactus">联系我们</a></p>
</body>
</html>

<html>
<head>
	<title>父子关系</title>
<style>
<!--
.li1{
	color:red;
}
.li2{
	color:blue;
}
.li1 ol li{						/* 利用CSS继承关系 */
	font-weight:bold;			/* 粗体 */
	text-decoration:underline;	/* 下划线 */
}
-->
</style>
   </head>

<body>
	<ul>
		<li class="li1">关系1
			<ul>
				<li>页面父子关系复杂时</li>
				<li>页面父子关系复杂时</li>
				<li>这里省略20个嵌套...</li>
			</ul>
			<ol>
				<li>页面父子关系复杂时</li>
				<li>页面父子关系复杂时</li>
				<li>这里省略20个嵌套...</li>
			</ol>
		</li>
		<li class="li2">关系2
			<ul>
				<li>页面父子关系复杂时</li>
				<li>页面父子关系复杂时</li>
				<li>这里省略20个嵌套...</li>
			</ul>
			<ol>
				<li>页面父子关系复杂时</li>
				<li>页面父子关系复杂时</li>
				<li>这里省略20个嵌套...</li>
			</ol>
		</li>
	</ul>
</body>
</html>

分享到：

精通CSS.DIV网页样式与布局_第三章 | HTML_Css_张龙篇

2011-12-25 17:40
浏览 774
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

精通CSS.DIV网页样式与布局_第二章

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

精通CSS.DIV网页样式与布局_第二章

评论

发表评论

相关推荐

精通CSS.DIV网页样式与布局_第三章

精通CSS.DIV网页样式与布局_第三章

HTML_Css_张龙篇

最近访客更多访客>>