Question

我在原始html / css实习期间建立了一个小型网站。我开始使用内联样式表，但我的老板告诉我使用外部样式表。现在我想知道如何设置位于div内的两个图像（fact1＆amp; fact2）。对不起，如果有一个简单的答案，但我找不到任何相关信息......

＆＃13;

<div class="text">

<div>
<h3>header 1  </h3> 

<p>Text 1 </p>



<h3>header 2 </h3> 
<p>Text 2 </p>

	<h3>header 3 </h3>
	
	<img src="img/ketor.jpg">
	
<p>Text 3 </p>

	<div class="fact1"> 


<img src="img/fact1.png">
    
    </div>
    
    <div class="fact2">
	
<img src="img/fact2.png">
	
    </div>	
	
    </div>
	
	
</div>

＆＃13;

Answer 1

由于每个div都有一个不同的类

<div class="fact1"> 
<img src="img/fact1.png">
</div>

<div class="fact2"> 
<img src="img/fact2.png">
</div>

您可以通过选择该分类div中的图像来选择它们

e.g。

div.fact1 img {
your styles here
}

div.fact2 img {
your styles here
}

 and so on.

注意，如果您有其他具有相同类的div，则样式也将应用于这些dv中的图像。

Answer 2

您想要创建一个css文件并将其放在与html文件相同的目录中。

folder/index.html
folder/main.css

<强>的main.css

.fact1 img 
{
  width:100%;margin-top:10px;
}
.fact2 img 
{
  width:100%;
}

<强>的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>your title</title>
    <link href="main.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="text">
    <div>
        <h3>header 1</h3>
        <p>Text 1</p>
        <h3>header 2</h3>
        <p>Text 2</p>
        <h3>header 3</h3>
        <img src="img/ketor.jpg"> 
        <p>Text 3</p>
        <div class="fact1">
            <img src="img/fact1.png"> 
        </div>
        <div class="fact2">
            <img src="img/fact2.png"> 
        </div>
    </div>
</div>
</body>
</html>

在您要调用的html页面的<head>中加载该样式表。

<link rel="stylesheet" href="main.css" />

href属性是从html页面到样式表的路径。它可以是相对路径或绝对路径。

相对：路径从html文件开始，并指向css文件。

绝对：路径从Web服务器的根目录开始，并指向该文件。

/category/index.html
/assets/css/main.css

对于这个例子：

相对路径为

../assets/css/main.css

绝对路径是

/assets/css/main.css

Answer 3

您可以将图像设置为div的背景属性，以便在需要更改css文件后进行修改。

div.fact1  {
 background:url(../img/fact1.png/) center center no-repeat;

div.fact2  {
 background:url(../img/fact2.png/) center center no-repeat;
}

我如何在div中设置这两个图像的样式？

3 个答案: