Question

看了几张副本后编辑了粘贴错误

在我阅读问题HTML5 - Can I use Width and Height in IMG?之前，我认为只有一种方法可以定义元素的宽度/高度。 1路它的意义总是有效。

现在这个问题引起了我的兴趣，我开始怀疑。使用单独的.css文件，我只知道1种方法来定义元素的高度/宽度：

img#myexample { width: 48px; height: 48px }

现在在链接的问题中，有两种不同的方式来定义宽度（纠正了原始问题中的错误，其中第一个varian中提到了px t）：

<img src="...(here image)...." width="50" height="50" />
<img src="...(here image)..." style="width: 50px; height: 50px;" />

直到那个问题，我才知道这两个都有不同的结果。所以我的问题是如何我是否需要调整上述.css行以包含两个变体（或者是可能的/可建议的）？

Answer 1

要添加以使用外部css样式表，您可以将其链接到HTML页面的头部。

<强> HTML

<!doctype html>
<html>
<head>
 //Link to your stylesheet below
 <link rel="stylesheet" href="yourstylesheet.css" />
</head>
<body>
  <h1>Blah Blah</h1>
  <img src="your image source" alt="Some text"/>
</body>
</html>

现在您已在HTML中链接了外部样式表，现在您可以修改HTML页面正文中的元素。

<强> yourstylesheet.css

h1{
 font-size: 14px;
}
img{
 width: 50px;
 height: 50px;
}

Answer 2

样式表将覆盖您在属性中定义的内容。因此，如果您在样式表中定义img{width:100px;}并使用类似<img src="pic.png" width="200px" />的img标记，则图片将为100像素宽。如果未在样式表中定义宽度，则当然会使用该属性。

您可以在html文档中定义css，就像使用周围标记一样，或者使用像这样链接的.css文件（在大型项目中通常更干净）。

<link rel="stylesheet" type="text/css" href="style.css">

如何在单独的.css文件中定义（样式）宽度？

2 个答案: