本文主要内容：Css学习笔记：基础篇实例一； 感谢：前沿科技！
如果您打算使用本文涉及到的教程，那么请您先浏览《本站公告》
否则请您离开本文或本站，如果您执意使用本教程请自行承担相关后果～！
谢谢合作～！
相关文章：Css学习笔记：基础篇
源代码一：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>例一</title>
<style type="text/css"> /* 采用内嵌式 */
<!--
.one { /* 类别选择器，名称为one */
font-size: 24px; /* 文字大小为24像素 */
}
.two { /* 类别选择器，名称为two */
color: #000000; /* 颜色为黑色 */
}
.red { /* 类别选择器，名称为red */
font-size: 14px;
color: #FF0000;
}
.green { /* 类别选择器，名称为green */
font-size: 12px;
color: #00FF00;
}
p { /* 标记选择器，名称为p */
font-size: 18px;
color: #0000FF;
}
#three { /* id选择器，名称为three */
color: #CC0033;
}
#four { /* id选择器，名称为four */
font-size: 24px;
}
-->
</style>
</head>
<body>
<p class="red">red size14px</p>
<!-- red size14px调用类red定义的样式 -->
<p class="green">green size12px</p>
<!-- green size12px调用类green定义的样式 -->
<b class="red">red b</b>
<!-- red b调用类red定义的样式，同时满足于标签<b></b>的定义 -->
<p>darewgo</p>
<!-- darewgo调用标记p定义的样式 -->
<p class="one two">one two</p>
<!-- one two同时调用类one、two定义的样式 -->
<p id="three">three</p>
<!-- three调用id three定义的样式，不执行标记p定义的样式 -->
<p id="three">XHTML 1.0 Transitional three2</p>
<!-- three2调用id three定义的样式（XHTML 1.0 Transitional下可以实现） -->
<p id="three four">three four</p>
<!-- three four不能同时调用id three、four定义的样式，故执行标记p定义的样式 -->
</body>
</html>
需要注意的问题：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>例一</title>
<style type="text/css"> /* 采用内嵌式 */
<!--
.one { /* 类别选择器，名称为one */
font-size: 24px; /* 文字大小为24像素 */
}
.two { /* 类别选择器，名称为two */
color: #000000; /* 颜色为黑色 */
}
.red { /* 类别选择器，名称为red */
font-size: 14px;
color: #FF0000;
}
.green { /* 类别选择器，名称为green */
font-size: 12px;
color: #00FF00;
}
p { /* 标记选择器，名称为p */
font-size: 18px;
color: #0000FF;
}
#three { /* id选择器，名称为three */
color: #CC0033;
}
#four { /* id选择器，名称为four */
font-size: 24px;
}
-->
</style>
</head>
<body>
<p class="red">red size14px</p>
<!-- red size14px调用类red定义的样式 -->
<p class="green">green size12px</p>
<!-- green size12px调用类green定义的样式 -->
<b class="red">red b</b>
<!-- red b调用类red定义的样式，同时满足于标签<b></b>的定义 -->
<p>darewgo</p>
<!-- darewgo调用标记p定义的样式 -->
<p class="one two">one two</p>
<!-- one two同时调用类one、two定义的样式 -->
<p id="three">three</p>
<!-- three调用id three定义的样式，不执行标记p定义的样式 -->
<p id="three">XHTML 1.0 Transitional three2</p>
<!-- three2调用id three定义的样式（XHTML 1.0 Transitional下可以实现） -->
<p id="three four">three four</p>
<!-- three four不能同时调用id three、four定义的样式，故执行标记p定义的样式 -->
</body>
</html>
1、如何自定义样式？
p { /* 标记选择器，名称为p */
font-size: 18px;
color: #0000FF;
}
.red { /* 类别选择器，名称为red */
font-size: 14px;
color: #FF0000;
}
#four { /* id选择器，名称为four */
font-size: 24px;
}
2、如何让页面元素调用样式？
<p>该段落调用标记p定义的样式</p>
<p class="red">该段落调用类red定义的样式</p>
<p class="one two">该段落调用类one和two定义的样式</p>
<p id="three">该段落调用id为three定义的样式</p>
<p id="three four">该段落调用id为three和four定义的样式</p>
3、继承性的问题？
请点击查阅Css学习笔记：css的层叠特性--继承性
--- 未完待续 ---