CSS分类：
I.内嵌样式(Inline Style),类似于HTML中的属性
II.内部样式表(Internal Style Sheet):
在HTML中头部专门定义，然后在Body中使用。
III.外部样式表(External Style Sheet):
专门用一个文件来定义。
1).
内嵌样式：
例：
<html>
<head>
<title>使用内嵌样式</title>
</head>
<body style="background-color:#ccffee;">
<p style="font-size:16px;color:red">第一段文字。</p>
<p style="font-style:italic;fontsize:20px;color:#bb22cc">
第二段文字。
</p>
</body>
</html>
例：
<html>
<head>
<title>使用内嵌样式</title>
</head>
<body style="background-color:#ccffee;">
<p style="font-size:16px;color:red">第一段文字。</p>
<p style="font-style:italic;fontsize:20px;color:#bb22cc">
第二段文字。
</p>
</body>
</html>
2).
内部样式表：
在 HTML 页面的头信息元素 <head> 中给出，可以同时设置多个标记所定义信息的显示效果。内部样式表只对所在的网页有效。
例：
在 HTML 页面的头信息元素 <head> 中给出，可以同时设置多个标记所定义信息的显示效果。内部样式表只对所在的网页有效。
例：
<html>
<head>
<title>使用内部样式表</title>
<style type="text/css">
body{background-color:#ccffee}
h2{text-align:center;color:red}
p.mystyle1{font-size:20px;color:blue}
p.mystyle2{font-style:italic;font-size:40px;
color:#dd44aa;text-align:center}
</style>
</head>
<body>
<h2>标题文字</h2>
<p class="mystyle1">第一段文字。</p>
<p class="mystyle2">第二段文字。</p>
<p class="mystyle1">第三段文字。</p>
<p>第四段文字。</p>
<p class="mystyle2">第五段文字。</p>
</body>
</html>
<head>
<title>使用内部样式表</title>
<style type="text/css">
body{background-color:#ccffee}
h2{text-align:center;color:red}
p.mystyle1{font-size:20px;color:blue}
p.mystyle2{font-style:italic;font-size:40px;
color:#dd44aa;text-align:center}
</style>
</head>
<body>
<h2>标题文字</h2>
<p class="mystyle1">第一段文字。</p>
<p class="mystyle2">第二段文字。</p>
<p class="mystyle1">第三段文字。</p>
<p>第四段文字。</p>
<p class="mystyle2">第五段文字。</p>
</body>
</html>
3). 外部样式表：
例 ( 需要两个文件 ) ：
my.css 文件：
body{background-color:#ccffee}
h2{text-align:center;color:red}
p.mystyle1{font-size:20px;color:blue}
p.mystyle2{font-style:italic;font-size:40px;color:#dd44aa;text-align:center}
h2{text-align:center;color:red}
p.mystyle1{font-size:20px;color:blue}
p.mystyle2{font-style:italic;font-size:40px;color:#dd44aa;text-align:center}
my.html
文件：
<html>
<head>
<title>使用外部样式表</title>
<link href="my.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>标题文字</h2>
<p class="mystyle1">第一段文字。</p>
<p class="mystyle2">第二段文字。</p>
<p class="mystyle1">第三段文字。</p>
<p>第四段文字。</p>
<p class="mystyle2">第五段文字。</p>
</body>
</html>
<head>
<title>使用外部样式表</title>
<link href="my.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>标题文字</h2>
<p class="mystyle1">第一段文字。</p>
<p class="mystyle2">第二段文字。</p>
<p class="mystyle1">第三段文字。</p>
<p>第四段文字。</p>
<p class="mystyle2">第五段文字。</p>
</body>
</html>
1109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
