网站建设
网站备案流程
本机IIS服务器的创建
Win7下配置本机IIS服务器
建网站需要学习的内容
使用表格布局网页
定义网页头文件元素
制作弹出网页
制作网页宣传窗
Div+CSS布局网页
CSS的常见选择器
CSS设置文本样式
CSS设置背景颜色与图像
CSS设置表格样式
HTML中使用CSS的方法
CSS3新增的部分属性1
CSS3新增的部分属性2
CSS3动画与渐变
网页显示MySQL数据库中汉字的乱码问题
HTML5的新特性
HTML5的API
HTML5音视频API
HTML5表单
HTML5表单API
HTML5画布canvas
HTML5拖放API
HTML5地理位置API
HTML5离线应用API
HTML5 Workers多线程
HTML5跨源通信
HTML5 WebSocket通信
HTML5的Web存储API
HTML5本地数据库
HTML5其他一些API
Node.js功能和使用
常用Web前端工具
WebGL编程
GLSL ES语言
使用ThreeJs库3D编程
XML可扩展标记语言
在HTML中使用CSS，包括行内样式、内嵌式、链接式和导入式等。
1.行内样式：
行内样式是使用CSS方法中最为直接的一种，它直接对HTML的标记使用style属性，然后将CSS代码直接写入其中。示例：
<html><head><title>CSS行内样式</title> </head>
<body>
<p style="color:#FF0000; font-size:20px; text-decoration:underline;">内容1</p>
<p style="color:#000000; font-style:italic;">内容2</p>
<p style="color:#FF00FF; font-size:25px; font-weight:bold;">内容3</p>
</body></html>
示例中的3个<p>标记设置了不同的CSS样式，各样式之间互不影响，分别显示自己的样式效果。
行内样式是最简单的CSS使用方法，但需要为每一个标记设置style属性，后期维护成本很高，不推荐使用。
2.内嵌式：
内嵌式样式表就是将CSS写在<head>和</head>之间，并且用<style>和</style>标记进行声明。示例：
<html><head><title>内嵌式CSS</title>
<style type="text/css">
p{
color: #0000FF;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
</style></head>
<body>
<p >内容1……</p>
<p >内容2……</p>
<p >内容3……</p>
</body></html>
所有的CSS代码被集中在了同一区域，方便了后期维护，页面代码也大大减少。但如果一个网站拥有很多页面，对于不同页面上的<p>标记都采用同样风格时，内嵌式方法也有些麻烦，因此更适用于对特殊的页面设置单独的样式风格。
3.链接式：
链接式样式表使用频率最高，也是最为实用的方法，它将HTML页面与CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好地分工合作。
同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中，使网站整体风格统一、协调。示例：
<html><head><title>链接式CSS</title>
<link href="a1.css" type="text/css" rel="stylesheet" /></head>
<body>
<h2 >CSS标题……</h2>
<p >内容……</p>
<h2 >CSS标题……</h2>
<p >内容……</p>
</body></html>
链接的a1.css文件代码为：
h2{
color: #0000FF;
}
p{
color: #FF0000;
text-decoration:underline;
font-weight:bold;
font-size:15px;
}
链接式CSS的最大优势在于CSS代码与HTML代码完全分离，并且同一个CSS文件可以被不同的HTML链接使用。
4.导入式：
导入式样式表与链接式的功能基本相同，只是语法和运作方式上略有区别。采用import方式导入的样式表，在HTML初始化时，会被导入到HTML文件内，作为文件的一部分。
在HTML文件中导入样式表，常用有如下几种@import语句，可以选择一种放入<style>和</style>之间：
@import url(sheet1.css);
@import url("sheet1.css");
@import url('sheet1.css');
@import sheet1.css;
@import "sheet1.css";
@import 'sheet1.css';
示例：
<html><head><title>导入式CSS</title>
<style type="text/css">
<!--
@import url(a1.css);
--></style></head>
<body>
<h2 >CSS标题……</h2>
<p >内容……</p>
<h2 >CSS标题……</h2>
<p >内容……</p>
</body></html>
导入式样式表的最大好处是可以让一个HTML文件导入很多样式表。示例：
<html><head><title>导入多个CSS</title>
<style type="text/css">
<!--
@import url(a1.css);
@import url(a2.css);
--></style></head>
<body>
<h2 >CSS标题……</h2>
<p >内容……</p>
<h3 >CSS次标题……</h3>
<p >内容……</p>
</body></html>
其中样式表a2.css的代码为：
h3{
color: #33CC33;
font-style:italic;
font-size:40px;
}
不仅HTML文件可以导入多个样式表，CSS文件也可以导入其他的样式表。
5.各种使用CSS方式的优先级：
导入式样式表和链接式样式表统称为外部样式，那么优先级顺序为：
行内样式表 > 嵌入式样式表 > 外部样式
而在外部样式中，出现在后面的优先级高于出现在前面的样式。
如果<head>中存在多个<style>标记，将由样式表的先后顺序决定，后面的优先级高，而在同一个<style>内部，才会遵循嵌入式优先级高于导入式的规则。
6.媒体样式表：
可以为不同的媒体创建不同的外部样式表，并用媒体的名字命名，如print.css、screen.css和handheld.css。然后在页面中使用link元素和媒体类型链接这些样式表。还可以使用@media规则，示例：
<style type="text/css">
@media print{
body{font:10pt times,georgia,serif}
}
@media screen{
body{font:12pt verdana,arial,sans-serif}
}
</style>
7.CSS示例：
h1{ /*蓝色背景的白色文字标题比较醒目*/
color: white; /*文字颜色*/
Background-color:#0000FF; /*背景颜色*/
font-size:40px; /*字号*/
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{ /*id选择器设置段落样式*/
border-right::4px red double;
}
p2{
border-right::4px orange double;
}
CSS样式表代码的注释语句位于/*和*/之间，可以单行，也可以为多行。
在<style>与</style>之间，有时会看到<!--和-->，将所有的CSS代码包含其中，这是为了避免老式浏览器不支持CSS而将CSS代码直接显示在浏览器上而设置的HTML注释。