何时直接在HTML而不是CSS中进行样式设置

时间:2012-03-23 00:23:56

标签: html css

我试图在此搜索一个主题,但我还没有找到,所以我想我会继续。

我的问题是,如果只是将您的风格直接放在HTML文件中,而不是使用.css文件,那么它是正确的。

我的意思是,当你有很多需要重复的东西或在几个页面上使用时,我觉得使用你的.css文件是非常有用的。 但在我的情况下,我有一个页面,我要打造一些东西,我很确定只会在那个页面上。这是div的宽度,高度和小东西。

为了告诉你我的意思,这是代码:

<div style="margin:0px auto; width:600px;">
    <div style="float:left">
        <p class="InputFieldsText">Brugernavn</p>
        <div class="InputFields"><input name="Text1" type="text" class="Medium" placeholder="Din e-mail adresse" /></div>
        <p class="InputFieldsUnderText"><a href="#">Glemt dit brugernavn?</a></p>

        <p class="InputFieldsText">Password</p>
        <div class="InputFields"><input name="Text1" type="password" class="Medium" /></div>
        <p class="InputFieldsUnderText"><a href="#">Glemt dit password?</a></p>

        <input onclick="window.location='user_page.html'" class="LargeIndent" name="Submit1" type="button" value="Log ind" />
    </div>
    <div style="float:left; width:172px; text-align:center">            
        <img alt="" height="128" src="images/lock.png" width="128">
    </div>
</div>

所以,正如你所看到的,在一些div中我直接设置了它,而不是为我的班级提出一个名字并放在那里。 我知道这样做并没有错,因为如果我在我的.css文件中使用它并且调用了一个类,它会出现相同的结果,但是有一个“指南”或者这个和这个不推荐的东西等等。

希望你理解我的问题。真的不是那么大的交易,我总是想知道:)

此致

6 个答案:

答案 0 :(得分:5)

答案很简单,IMO:永远不会。 :)

您应该始终使用样式表,因为它可以让您快速轻松地更改站点的整个外观和布局。如果您直接在HTML中嵌入样式信息,那么如果需要更改某些内容,您必须更加努力地工作;使用样式表,您只需在单个位置更改CSS文件,并且在使用样式表的任何地方,更改都将变为全局。

答案 1 :(得分:1)

最好不要将演示文稿与内容混合。为了简化您的CSS,使用更智能的selectors和ID对于您知道总会有一个且只有一个的元素没有任何问题。您不必为每件小事定义类。

在我看来,内联样式使标记变得混乱,特别是对于导致换行的大样式声明。

HTML页面中的一小块样式(而不是外部文件)在某些情况下可能是可接受的,因为它减少了发送到服务器的请求数。服务器端处理可用于通过读取单独的样式表文件并将样式直接注入页面来实现此目的。通过这种方法,可以在页面大小和HTTP请求数量之间进行权衡。

答案 2 :(得分:1)

在开发页面的过程中,我将其发送到同一个文件中。

只是懒惰 - 将样式表放在头部。

然后在生产中从CSS分离HTML。 实际上我在开发期间这样做,当他们共享共同的功能时 - 需要剪切和粘贴作业。

答案 3 :(得分:0)

  1. 永远不要将您的样式信息内联
  2. 使用分层模板系统时,我有时会发现将样式定义放在该模板中的样式表中会很方便,最终成为页面的一部分。如果需要重复使用它们,可以将它们迁移到单独的样式表。

答案 4 :(得分:0)

嗯,首先要做的事情。样式采用一些优先顺序

  1. 内联样式
  2. HEAD
  3. 中的CSS
  4. 导入的CSS文件
  5. 也就是说,如果某个特定元素在.css文件中定义了某些属性,那么您肯定可以使用内联CSS(<div style='...'></div>)来覆盖它们。例如。

    除此之外,我认为这只是一个品味的问题,以及你希望你的代码最终变得“混乱”(与“分隔”相比)的问题。 不要忘记CSS的主要目的是分离: LOOK from STRUCTURE


    我的一般策略是:

    • 使用 CSS文件,以便更好地组织更大的网站,可以在各种文件中使用重复使用(便携性)
    • 在HEAD中使用 CSS 在一些“非常”大的但不是太大的CSS代码块中,页面特定的
    • 仅使用内联CSS 进行本地修改(在真正的小页面中,或者我想在位置上更改的现有规范)......

    结论:

    无论如何,因为你的主要问题是关于内联CSS,这是我的2美分:内联CSS使得代码很容易不可读(至少在我的口味下),为什么要这样做除非必要?

答案 5 :(得分:0)

您应该始终使用外部.css文件,因为外部样式表使您可以通过编辑单个文件来更改网站中所有页面的外观和布局!

如果在HTML页面中使用内联css而不是外部css,则需要花费很多时间来编辑更改,因此应该使用外部css文件来实现更顺畅的过程。