CSS的初步学习

最新推荐文章于 2024-09-14 22:46:39 发布

西萌吃雪479

最新推荐文章于 2024-09-14 22:46:39 发布

阅读量72

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_62892815/article/details/127795244

版权

这是一个关于HTML页面样式的实例，展示了如何使用CSS来定义背景颜色、字体样式、颜色以及布局。其中包括全局背景设置、不同类别的列表项颜色定义，以及一个ID选择器的应用。通过`#xx`定义了特定元素的颜色，`.color1`、`.color2`和`.color3`分别用于不同的列表项颜色。此外，还展示了如何调整背景图片、大小、位置和重复。

摘要由CSDN通过智能技术生成

该为全局定义 *

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/new_file.css">
	</head>
	<body>
		<h1>水果列表</h1>
		<ul>
			<li class="color1">橙子</li>
			<li class="color1">橘子</li>
			<li class="color2">葡萄</li>
			<li class="color2">黑布林</li>
		</ul>
		<h1>鲜花列表</h1>
		<ul>
			<li class="color3">玫瑰</li>
			<li id="xx">桃花</li>
		</ul>
	</body>
</html>

body{
	background-color: aquamarine;
	background-image: url("../img/1.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	
	/* background-position:600px 200px; */
	background-size: 50% 100%;
	font-family: "楷体";
	font-style: italic;
	/* 斜体 */
	font-size: 40px;
}
.color1{
	color: orange;
}
.color2{
	color: purple;
}
.color3{
	color: red;
}
#xx{
	color: pink;
}

id选择器： “#”用于定义全局唯一一个的属性 id

class选择器：.color用于定义全局内class属性带有相同的值

CSS:

1 :color