请写出一个完整的HTML程序该程序内部包括完整的css语句的声明与使用部分
时间: 2024-03-05 09:52:27 浏览: 22
以下是一个完整的HTML程序,其中包括了CSS语句的声明与使用部分:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
h1 {
color: #007bff;
font-size: 24px;
text-align: center;
}
p {
line-height: 1.5;
margin-bottom: 20px;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
.button {
display: inline-block;
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
}
.button:hover {
background-color: #0062cc;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to my webpage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet augue euismod justo lacinia, eu interdum arcu porta. Duis auctor, ex quis laoreet commodo, nulla neque luctus nisl, id pharetra arcu elit nec arcu. Sed euismod sodales enim, nec pretium mi consectetur vitae. </p>
<a href="#" class="button">Learn more</a>
</div>
</body>
</html>
```
在这个HTML程序中,我们使用了`<style>`标签来声明CSS语句。在这个例子中,我们定义了body、h1、p、.container和.button这几个CSS选择器,并分别定义了它们的样式。在HTML页面中,我们可以使用这些CSS样式来控制页面元素的外观和排版。例如,在这个例子中,我们使用了.button这个类选择器来定义一个按钮的样式,并在HTML代码中使用了这个类来为按钮添加样式。
相关推荐
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)