实验步骤
- 打开VSCode，在自己的文件夹中新建网页文件，文件名logo.html，输入 ！，按Tab键自动生成H5网页框架标签。
- 将title标签内容改为“文字Logo”，在内添加6个标签，分别设置标签内容和class以及id值
- 在自己的文件夹中新建文件夹css，在css中新建文件logo.css，在logo.html的标签中引入css文件
- 在logo.css中设置标签选择器、类选择器和id选择器的属性和值，两个文件分别保存后在浏览器查看效果
代码
04logo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字logo</title>
<link rel="stylesheet" href="CSS/04logo.css" />
</head>
<body>
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong id="orange">o</strong>
<strong class="blue">g</strong>
<strong id="green">l</strong>
<strong class="red">e</strong>
</body>
</html>
04logo.css
strong {
font-size: 100px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.blue{
color:blue;
}
.red{
color:red;
}
#orange{
color:orange;
}
#green{
color: green;
}
效果
