Book05-No.一 XHTML与CSS基础 _HTML/CSS

Book05-No.1 XHTML与CSS基础

1、类别选择器与ID选择器区别：

　总结：一个页面上所有控件ID不能重复且只能使用一次，但class可以被多个 html控件所套用，无限次使用。在页面中元素的样式只能出现一次，则使用ID选择器唯一标记，可能会多次使用的，则用类别选择器。

2、HTML引入CSS方式：

行内样式：

 <BODY>
	<p style="color:red; font-size:18px; text-decoration:underline;">正文内容1：采用行内样式</p>
	<p style="color:yellow; font-style:italic;">正文内容2</p>
	<p style="color:blue; font-size:25px; font-weight:bolder; ">正文内容3</p>
 </BODY>

?内嵌式：用于特殊页面设置单独的样式风格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
	<!--
		.red {
			color: red;
			font-size: 18px;
		}
		.blue {
			color: blue;
		}
		.yellow {
			font-size: 30px;
		}
		#bold {
			font-weight: bold;
		}
		#green {
			font-size: 30px;
			color: green;
		}
	-->
  </style>
 </HEAD>

 <BODY>
	<p>普通的段落</p>
	<p class="red">引用了一个类别选择器的段落</p>
	<h1 class="red">引用了一个类别选择器的标题</h1>
	<p class="blue yellow">同时引用两个类别选择器</p>
	<!--
		ID选择器与类别选择器区别：用法相同，不同的是ID选择器在HTML页面中只能使用一次
	-->
	<p id="blod">引用了一个id选择器的段落</p>
	<p id="green">引用了一个id选择器的段落</p>
 </BODY>
</HTML>

?外部样式表

导入式：

<!--编写的css文件，存储在sheet.css中-->
p {
	color: red;
	text-decoration: underline;
	font-weight: bold;
	font-size: 30px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
	@import url("sheet.css");
	@import url(sheet.css);
	@import url('sheet.css');
	@import sheet.css;
	@import 'sheet.css';
	@import "sheet.css";

  </style>
 </HEAD>

 <BODY>
	<p>外部引入样式</p>
 </BODY>
</HTML>

?链接式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <link href="sheet.css" type="text/css" rel="stylesheet">
 </HEAD>

 <BODY>
	<p>外部引入样式</p>
 </BODY>
</HTML>

3、三种方式的优先级：

行内样式 ? > ?内嵌样式 ?> ?外部样式
外部样式中后面的优先级大于前面的优先级

4、案例设计：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>体验CSS</title>
	<style type="text/css">

		body {
			margin: 0px;
			background-color: #CCCCFF;
		}

		h1 {
			margin-top: 15px;
			color: white;
			background-color: #FF9933;
			font-size: 30px;
			font-weight: bold;
			text-align: center;
			padding: 15px;
		}

		img {
			float: left;
			border: 1px #9999CC dashed;
			margin: 5px;
		}

		p {
			font-size: 12px;
			text-indent: 2em;
			line-height: 1.5;
			padding: 5px;
		}

		#p1 {
			border-right: 6px #008000 double;
		}

		#p2 {
			border-right: 6px #0000FF double;
		}
	</style>
</head>

<body>
	<h1>北京天元网络股份有限公司</h1>
	<img src="images/1231_g_1294001414536.jpg" width="128" height="128" />
	<p id="p1">我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！</p>
	<p id="p2">我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！我们在成长，我们会成长的更好！</p>
</body>

</html>

5、CSS注释：

/*注释的内容*/

6、CSS复合选择器

交集选择器：由两个选择器直接构成，其他们的交集。第一个必须为标记选择器，第二个必须为类别选择器，或者ID选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
	p {
		color: red;
	}

	.speril {
		color: blue;
	}

	p.speril {
		color: yellow;
	}

	p#id {
		color: #999999;
	}
  </style>
 </HEAD>

 <BODY>
	<p>普通的段落，红色</p>
	<h1 class="speril">类别选择器， 蓝色</h1>
	<p class="speril">交集选择器，黄色</p>
	<p id="id">交集选择器，灰色</p>
 </BODY>
</HTML>

?并集选择器：任意多个选择器通过逗号一块定义，设置属性。以保证这些选择器所定义的风格相同

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
	@import url(""); 
	* {
		color: purple;
		font-size: 20px;	
	}
	h1,h2,h3,h4,h5,p {
		color: purple;
		font-size: 20px;
	}

	h2.special, .special, #one {
		text-decoration: underline;
	}

	p#one {
		text-align: center;
	}
  </style>
  <link rel="stylesheet" href="" type="text/css" />
 </HEAD>

 <BODY>
	<h1>示例文件h1</h1>
	<h2 class="special">示例文件h2</h2>
	<h3>示例文件h3</h3>
	<h4>示例文件h4</h4>
	<h5>示例文件h5</h5>
	<p class="special">示例段落</p>
	<p id="one">示例文字p id</p>
	<span>全局设置</span>
 </BODY>
</HTML>

?后代选择器：通过嵌套标记的方式设置特殊的风格，外标记和内标记之间用空格隔开

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

  <style type="text/css">
	p {
		color: yellow;
	}

	span {
		color: red;
	}

	p span {
		color: blue;
	}

	.p1 #p2{
		text-align: center;
		font-size: 100px;
		color: #999999;
	}

	#p2 {
		color: red;
	}

	td.out p.inside{
		font-size:16px;
		color: blue;
	}
  </style>
 </HEAD>

 <BODY>
	<p>段落 黄色的</p>
	<span>span 红色的</span>
	<p>段落<span>嵌套定义 后代选择器<a>info</a>，为蓝色的</span>段落</p>

	<p class="p1">p1的内容<span id="p2">嵌套定义</span></p>

	<td class="out">
		<p class="inside">
			<strong>多层后代选择器</strong>
		</p>
	</td>
 </BODY>
</HTML>

7、CSS的继承性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
		h1 {
			font-size:18px;
			text-align:center;
		}

		h1 em {
			color: red;
		}

		ul li ul li ul li {
			color: blue;
			font-weight: bold;
		}

		li li {
			color: red;
		}
  </style>
 </HEAD>

 <BODY>
	<h1>前沿<em>Web开发</em>教室</h1>
	<ul>
		<li>
			Web设计与开发需要使用一下的技术：
			<ul>
				<li>HTML</li>
				<li>
					CSS
					<ul>
						<li>选择器</li>
						<li>盒子模型</li>
						<li>浮动与定位</li>
					</ul>
				</li>
				<li>JavaScript</li>
			</ul>
		</li>
		<li>
			还需要掌握:
			<ol>
				<li>Flash</li>
				<li>Dreamweaver</li>
				<li>PhotoShop</li>
			</ol>
		</li>
	</ul>
 </BODY>
</HTML>

?8、CCS层叠特性