在HTML中,CSS样式是非常重要的一个部分。开发者们可以通过CSS样式来控制页面的布局、颜色、字体等方面的显示效果,从而让网页更加美观、易读、易用。以下便是一段展示CSS样式的HTML文档:
<!DOCTYPE html>
<html>
<head>
<title>CSS样式演示</title>
<style>
/* 设置网页背景颜色为灰色 */
body {
background-color: #ddd;
}
/* 设置页面中的所有h1元素字体颜色为红色 */
h1 {
color: red;
}
/* 设置class为intro的元素字体颜色为蓝色 */
.intro {
color: blue;
}
/* 设置ID为logo的图片宽度为200像素 */
#logo {
width: 200px;
}
</style>
</head>
<body>
<h1>欢迎来到CSS样式演示</h1>
<p class="intro">在这里,您可以学习各种CSS样式的效果!</p>
</body>
</html>
以上代码中,我们可以看到在标签内,通过设置不同的选择器来对页面元素进行样式设置。比如我们设置了
body
元素的背景颜色为灰色,h1
元素的字体颜色为红色,以及.intro
类所代表的元素字体颜色为蓝色。而设置ID为logo
的图片的宽度为200像素。
相信通过这个例子,您已经能够掌握CSS样式的设置方法,以及如何在HTML文档中使用CSS样式来控制页面显示效果。
本文链接:https://my.lmcjl.com/post/10930.html
展开阅读全文
4 评论