1.新建一个css文件; 2.在css文件中定义一个id选择器,背景色为黑色black,前景色color为白色,宽度500像 素,高度500像素,边框border为红色,1个像素宽度,实线 3.在css文件中定义一个类选择器,背景色为深蓝色darkblue,前景色color为白色,宽度 60像素,高度600像素,边框border为浅蓝色lightblue,1个像素宽度,实线 4.定义一个元素选择器body,宽度100%,高度100%。 id选择器和类选择器分别用于修饰body中的2个div容器,容器中为文字和图片。
时间: 2024-04-19 13:25:17 浏览: 91
你可以按照以下步骤在一个新建的 CSS 文件中定义 id 选择器和类选择器来实现你的需求:
1. 请在你的项目文件夹中新建一个 CSS 文件,命名为 "style.css" (或者你喜欢的其他名字)。
2. 在 "style.css" 文件中添加以下代码,定义 id 选择器的样式:
```css
#container1 {
background-color: black;
color: white;
width: 500px;
height: 500px;
border: 1px solid red;
}
```
3. 继续在 "style.css" 文件中添加以下代码,定义类选择器的样式:
```css
.container2 {
background-color: darkblue;
color: white;
width: 60px;
height: 600px;
border: 1px solid lightblue;
}
```
4. 最后,添加以下代码,定义元素选择器的样式:
```css
body {
width: 100%;
height: 100%;
}
```
这样,你就定义了一个 id 选择器和一个类选择器来修饰 body 中的两个 div 容器了。你可以在 HTML 文件中使用这些选择器来分别添加文字和图片。记得在 HTML 文件中引用这个 CSS 文件:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container1">
<!-- 这里放置文字内容 -->
</div>
<div class="container2">
<!-- 这里放置图片内容 -->
</div>
</body>
</html>
```
这样,你定义的样式将会应用到对应的 div 容器中。希望以上步骤能帮到你!如果你有任何问题,请随时提问。
阅读全文