学习总目标
本次学习目标
CSS是用于设置HTML页面标签的样式,用于美化HTML页面
也就是在要设置样式的标签中添加style属性,编写css样式; 行内样式仅对当前标签生效
<!--给div设置边框-->
<div style="border: 1px solid black;width: 100px; height: 100px;"> </div>
一般是在当前页面的head标签中添加style标签,在style标签中编写css样式代码; 内部样式仅对当前页面生效
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: lightgreen;
margin-top: 5px;
}
</style>
</head>
<body>
<div style="border: 1px solid black;width: 100px; height: 100px;"> </div>
<div class="one"> </div>
<div class="one"> </div>
<div class="one"> </div>
</body>
HTML代码
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
CSS代码
p {
color: blue;
font-weight: bold;
}
页面效果
HTML代码:
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p id="special">Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
CSS代码:
#special {
font-size: 20px;
background-color: aqua;
}
显示效果
HTML代码:
<div class="one"> </div>
<div class="one"> </div>
<div class="one"> </div>
CSS代码:
.one {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: lightgreen;
margin-top: 5px;
}
显示效果