Book05-No.一 XHTML与CSS基础-HTML教程-爱易网页

Book05-No.一 XHTML与CSS基础

日期：2014-05-17　浏览次数：20712 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Book05-No.一 XHTML与CSS基础

相关资料更多>

推荐阅读更多>