一：css样式
1：行内样式：
<body>
<p style="color:#greean; font-size:20px; text-decoration:blink">行内样式</p>
</body>
2：内嵌式
<html>
<head>
<title>页面标题</title>
<style type="text/css">
p{
color:#00CC66;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
</style>
</head>
<body>
<p>紫色、粗体、下划线、25px的效果1</p>
<p>紫色、粗体、下划线、25px的效果2</p>
<p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>
3：链接式
<html>
<head>
<title>页面标题</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<h2>CSS标题1</h2>
<p>紫色、粗体、下划线、25px的效果1</p>
<h2>CSS标题2</h2>
<p>紫色、粗体、下划线、25px的效果2</p>
</body>
</html>
文件1.css
h2{
color:green;
}
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
4：导入样式：
页面
<html>
<head>
<title>样式优先级问题</title>
<style type="text/css">
@import url(2.css);
h3{
background-color:#000000;
color:#FF0000;
}
</style>
</head>
<body>
<h3 style="text-decoration:underline;">CSS标题测试</h3>
</body>
</html>
文件名：2.css
h3{
color:#00FFFF;
font-style:italic;
font-size:40px;
}
1：行内样式：
<body>
<p style="color:#greean; font-size:20px; text-decoration:blink">行内样式</p>
</body>
2：内嵌式
<html>
<head>
<title>页面标题</title>
<style type="text/css">
p{
color:#00CC66;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
</style>
</head>
<body>
<p>紫色、粗体、下划线、25px的效果1</p>
<p>紫色、粗体、下划线、25px的效果2</p>
<p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>
3：链接式
<html>
<head>
<title>页面标题</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<h2>CSS标题1</h2>
<p>紫色、粗体、下划线、25px的效果1</p>
<h2>CSS标题2</h2>
<p>紫色、粗体、下划线、25px的效果2</p>
</body>
</html>
文件1.css
h2{
color:green;
}
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
4：导入样式：
页面
<html>
<head>
<title>样式优先级问题</title>
<style type="text/css">
@import url(2.css);
h3{
background-color:#000000;
color:#FF0000;
}
</style>
</head>
<body>
<h3 style="text-decoration:underline;">CSS标题测试</h3>
</body>
</html>
文件名：2.css
h3{
color:#00FFFF;
font-style:italic;
font-size:40px;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
