内联CSS和外部CSS之间的区别 [英] Difference between inline CSS and External CSS
问题描述
您好。我正在ASP.Net上开展一个项目，我在LinkButto上使用内联CSS和外部CSS。
有人可以向我解释为什么这个内联CSS工作（显示按钮）：
Hi. I am working on a project in ASP.Net and I use both inline CSS and External CSS on a LinkButto.
Can someone please explain to me why this inline CSS works (shows the button):
<asp:LinkButton ID="lnkViewPayslip" runat="server" Width="16px" Height="16px" style="background:url(../Images/GridViewButtons/payslipview.png) no-repeat center;width:16px;height:16px"></asp:LinkButton>
但是这个不起作用（显示无图像）：
头标签
：
but this one doesn't work (shows no image):
in head tag:
<link href="../Styles/HeaderFooterMainTemplateEmp.css" rel="stylesheet" type="text/css" />
位于的HeaderFooterMainTemplateEmp.css中的
样式文件夹：
in HeaderFooterMainTemplateEmp.css which is located in Style folder:
.payslip {background:url(../Images/GridViewButtons/payslipview.png) no-repeat center;width:16px;height:16px }
页面中的
：
in the page:
<asp:LinkButton ID="lnkViewPayslip" runat="server" CssClass="payslip" Width="16px" Height="16px"></asp:LinkButton>
我现在真的很困惑。我确信我指的是正确的外部CSS，因为其他CssClass可以工作。 :(
非常感谢！
I am really confused right now. I am sure I am referring to the right external CSS because other CssClass works. :(
Thank you very much!
推荐答案
您在这里使用相对路径。图像位置，当你使用内联CSS时，可能是正确的（类似于：[root] /Images/GridViewButtons/payslipview.png）。
但是，当你移动它时对于CSS文件，解析的路径可能不正确。假设您的解决方案结构是[root] - > AllCSS-> SubFolder-> CSSFile。在这种情况下，解决的路径将是不正确的。您的应用程序将尝试在AllCSS文件夹下找到图像。
您只需要确保提到的相对路径CSS文件相对于CSS文件是准确的。
You are using relative path here. The image location, when you use inline CSS, might be correct (something like: [root]/Images/GridViewButtons/payslipview.png).
However, when you are moving this to a CSS file, the path resolved might not be correct. Assuming your solution structure is[root]->AllCSS->SubFolder->CSSFile. In this case, the path resolved will just be incorrect. Your application will be trying to find the image under AllCSS folder.
You just need to ensure that the relative path mentioned in the CSS file is accurate relative to the CSS file.
让我举一个小例子来理解它更好。
内联CSS
内联风格失去了很多通过将内容与presenta混合，样式表的优点谨慎使用这种方法！要使用内联样式，请使用相关标记中的style属性。 style属性可以包含任何CSS属性。该示例显示了如何更改段落的颜色和左边距：
Hi,
Let me give a small example of each to understand it better.
Inline CSS
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style="color: sienna; margin-removed 20px">This is a paragraph.</p></pre><br mode=" hold=" /><br mode=" html="><br mode="></p>
外部CSS
当样式应用于许多页面时，外部样式表是理想的选择。使用外部样式表，您可以通过更改一个文件来更改整个Web站点的外观。每个页面都必须使用< link>链接到样式表。标签。 < link>标签进入头部：
External CSS
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
css" href="mystyle.css" />
</head>
外部样式表可以在任何文本编辑器中编写。该文件不应包含任何html标记。您的样式表应使用.css扩展名保存。样式表文件的示例如下所示：
An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
希望这会帮助你。
谢谢
hope this will help you.
thanks
这篇关于内联CSS和外部CSS之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
