Book05-No.一 XHTML与CSS基础
日期：2014-05-17 浏览次数：20671 次
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;
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
