本文详细介绍如何使用CSS来设置网页元素的颜色、背景等属性，并演示了内部样式表与外部样式表的具体应用实例。
selector{property:value}
比如：body{
background-color:#FF0000
}
内部样式表：<html>
<head>
<title>css</title>
<style type="text/css">
body{
background:red ;
}
</style>
</head>
<!--
<body bgcolor="red">
-->
<body>
红色背景！
</body>
</html>
外部样式表：
在一个文件夹（一般是style）新建一个：style.css文件
body{
background-color:red
/*
background-color:blue
*/
}
<html>
<head>
<title>css外部样式表</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
红色背景！
</body>
</html>
颜色与背景
<html>
<head>
<title>css外部样式表</title>
<style type="text/css">
h1{
color:red ;
}
</style>
</head>
<body>
<h1>color测试</h1>
<h3>color测试</h3>
</body>
</html>
<html>
<head>
<title>css外部样式表</title>
<style type="text/css">
h1{
/*
color:red ;
*/
color:#990033;
}
</style>
</head>
<body>
<h1>color测试</h1>
<h3>color测试</h3>
</body>
</html>
<html>
<head>
<title>css外部样式表</title>
<style type="text/css">
h1,h3{
/*
color:red ;
*/
color:#990033;
}
</style>
</head>
<body>
<h1>color测试</h1>
<h3>color测试</h3>
</body>
</html>
<html>
<head>
<title>css外部样式表</title>
<style type="text/css">
h1,h3{
background-color:#990033
}
</style>
</head>
<body>
<h1>color测试</h1>
<h3>color测试</h3>
</body>
</html>
背景
<html>
<head>
<title>css外部样式表</title>
<style type="text/css">
body{
background-image:url("style/前田墩子.jpg")
}
</style>
</head>
<body>
背景是一张图片
</body>
</html>
<html>
<head>
<title>css外部样式表</title>
<style type="text/css">
body{
background-image:url("style/前田墩子.jpg")
background-repeat:no-repeat ;
}
</style>
</head>
<body>
背景是一张图片
</body>
</html>
<html>
<head>
<title>css外部样式表</title>
<style type="text/css">
body{
background:url("style/前田墩子.jpg") no-repeat
}
</style>
</head>
<body>
背景是一张图片
</body>
</html>
扫一扫
287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
