CSS从入门到精通——背景样式
背景颜色
step1/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" href="step1/CSS/style.css">
</head>
<body>
<h1>CSS让网页样式更丰富</h1>
<p>使用CSS(Cascading Style Sheets),可以使网页样式更加的丰富多彩,它解决内容与表现分离的问题,提高了工作效率。</p>
</body>
</html>
step1/sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
body {
background-color: lightyellow;
}
h1 {
color: gray;
background-color: palegreen;
}
p {
background-color: lightgray;
}
</style>
</head>
<body>
<div>
<h1>CSS让网页样式更丰富</h1>
<p>这是一个段落。</p>
</div>
</body>
</html>
step1/CSS/style.css
/* ********** BEGIN ********** */
body{
background-color:ivory;
}
/* ********** END ********** */
h1 {
font-size: 40px;
text-align: center;
}
p {
font-size: 18px;
color: grey;
/* ********** BEGIN ********** */
background-color:lightblue ;
/* ********** END ********** */
}
背景图片
step2/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" href="step2/CSS/style.css">
</head>
<body>
<div>
<h1>CSS让网页样式更丰富</h1>
<p>这是一个段落</p>
</div>
</body>
</html>
step2/CSS/style.css
body {
/* ********** BEGIN ********** */
/*设置背景图片*/
background-image: url(https://www.educoder.net/attachments/download/211106);
/* ********** END ********** */
}
div {
width: 90%;
height: 100%;
margin: auto;
}
背景定位与背景关联
step3/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" href="step3/CSS/style.css">
</head>
<body>
<div>
<h1>CSS让网页样式更丰富</h1>
<p>这是一个段落</p>
</div>
</body>
</html>
step3/CSS/style.css
body {
margin-right: 200px;
/* ********** BEGIN ********** */
/*设置背景图片*/
background: url("https://www.educoder.net/attachments/download/211104")no-repeat fixed right top ;
/* ********** END ********** */
}
div {
width: 90%;
height: 100%;
margin: auto;
}