logo标签列表

在多个页面上出现相同的HTML，如何最佳地进行样式设计策略

css
3
我有一个简单的HTML表格，包含2列文本字段和“名称”，“评论”和“电子邮件”的标题。
我正在寻找最佳策略来设计此HTML片段的样式，以便在多个页面上显示 - 每个页面都需要不同的尺寸。我最近一直在阅读CSS方面的文章，但是还没有找到足够的信息，让我确信知道设计这种.css的最佳方法。
例如，在“评论”页面上，我可能会将评论表单显示为50％的宽度，但在网站的其他位置的侧边栏中仅为20％。
我主要关心的是样式框的宽度 - 当然，相同的方法也适用于文本。例如，名称字段不应与电子邮件字段一样宽。我认为固定宽度比百分比更好。
显然有很多样式方法。假设我已经有1个主css文件。
1）在input标签上放置百分比宽度，然后外部div将是包含它的任何面板的100％宽度。这不需要特定于页面的css，但我不喜欢td标记内部的百分比的想法，而且我不能轻松更改textarea的高度。
2）在每个单独页面中创建#Name，#Comments和#Email的样式作为<head><style>中的附加样式*
3）基于#Name，#Comments和#Email在特定于页面的css文件中进行样式设置。页面特定文件是好还是坏？我甚至不确定我是否喜欢在这里基于ids进行样式设置，因为它们是动态生成的，如果出现某些原因需要更改，我必须在所有地方更新css。
4）基于#Name，#Comments和#Email进行样式设置，但使用每个页面特定的后代选择器进行限定。所以我将.faqPage #Name用于FAQ页面上的内容。显然，这些都在我的主css文件中。
5）为'emailField'，'nameField'和'commentsField'创建类名[选项2,3,4会重复此选项]
6）为'shortField'，'fullWidthField'和'textInputField'创建类名[选项2,3,4会重复此选项]
7）你明白了:)
8）其他方案
我只是有点不知所措。如何决定哪种方法最好？一个具体的目标是能够在多个页面上样式相同的HTML（显然这就是CSS的全部内容 - 但它确实影响我可以使用哪些选项）。
<div id="pnlSubmitComments">
<table class="fieldTable"> 
    <tr> 
    <td align="right"> 
        <label for="Comments">Name:</label> 
    </td> 
    <td> 
        <input id="Name" name="Name" type="text" value="" /> 
    </td> 
    </tr> 
    <tr> 
    <td align="right"> 
        <label for="Comments">Email:</label> 
    </td> 
    <td> 
        <input id="Email" name="Email" type="text" value="" /> 
    </td> 
    </tr> 
     <tr> 
    <td align="right" valign="top"> 
        <label for="Comments">Questions:</label> 
    </td> 
    <td> 
        <textarea id="Comments" name="Comments"> 
</textarea> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    </td> 
    <td> 
        <input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" /> 
    </td> 
    </tr> 
</table> 
</div>
  • PS. 实际的字段名更具体，例如 CommentsName - 在此处为了易读性仅使用 Name。
4个回答
5

旁注：也许您不应该使用表格来布局此表单，而应该使用字段集，这样会使您拥有更多的灵活性。例如，如果您决定在更窄的列中将标签和输入字段放在彼此上面...

没有表格的示例（看起来更漂亮）：

<style type="text/css">
<!--

form { /* set width in form, not fieldset (still takes up more room w/ fieldset width */
    font: 100% verdana, arial, sans-serif;
    margin: 0;
    padding: 0;
    min-width: 500px;
    max-width: 600px;
    width: 560px;
}

form fieldset {
    /* clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
    border-color: #000;
    border-width: 1px;
    border-style: solid;
    padding: 10px; /* padding in fieldset support spotty in IE */
    margin: 0;
}

form fieldset legend {
    font-size: 1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
    /* be careful with padding, it'll shift the nice offset on top of border  */
}

form label {
    display: block; /* block float the labels to left column, set a width */
    float: left;
    width: 150px;
    padding: 0;
    margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
    text-align: right;
}

form input, form textarea {
    /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
    width: auto; /* set width of form elements to auto-size, otherwise watch for wrap on resize */
    margin: 5px 0 0 10px; /* set margin on left of form elements rather than right of
     label aligns textarea better in IE */
}

textarea {
    overflow: auto;
}

 /* uses class instead of div, more efficient */
form br {
    clear: left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
-->
</style>
<div id="pnlSubmitComments">
    <form>
        <fieldset>
            <label for="Comments">
                Name:
            </label>
            <input id="Name" name="Name" type="text" value="" /><br />
            <label for="Comments">
                Email:
            </label>
            <input id="Email" name="Email" type="text" value="" /><br />
            <label for="Comments">
                Questions:
            </label>
            <textarea id="Comments" name="Comments">
            </textarea><br />
            <label for="spacing"></label>
            <input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" />
        </fieldset>
    </form>
</div>

现在回到您的主要问题。我会按照以下方式进行：
我将使用我想要在表单中使用的不同布局列的ID。因此，如果我在我的主列（
）中使用它，我会相应地编写CSS，如下所示：
#main .pnlSubmitComments form fieldset {
    /*your CSS*/ 
}

以及分别用于侧边栏
#side .pnlSubmitComments form fieldset {
    /*your CSS*/
}

您可以通过如下方式为每个元素分配类来获得控制权：
<input type="text" class="email" name="email" id="email" />

然后您可以按照上述描述的方式进行操作：
#main .email {
   /*your css for the .email textbox/*
}
啊哈，聪明啊 :-) 不同宽度的主要原因取决于侧边栏，所以这样做很好。感谢fieldset提示。我需要注意在页面上使用“form”作为选择器，因为我有多个表单。 - Simon_Weaver
请问“form small”是什么意思？您如何建议以不同的样式设置特定文本框的宽度？我希望姓名比电子邮件更窄，并且可以控制每个文本框的宽度。 - Simon_Weaver
表单小部件是多余的，我已经将其删除，并添加了对您第二个问题的答案。 - markus
3

如果您可以在容器元素上添加样式类，那么您可以轻松地使用一个CSS文件完成此操作。

例如，第一页将具有以下HTML：

<body class="page1">
  <!-- repeated html here -->
  <input />
</body>

在第二页上，你会看到：

<body class="page2">
  <!-- repeated html here -->
  <input />
</body>

在您的单个CSS文件中，您可以基于body元素的class来定位输入标签：
body.page1 input { width: 25%; }
body.page2 input { width: 50%; }

所以，你保留相同的html，只需更改容器元素的class（或id），并使用它来编写不同的css规则。

更新：重新阅读您的列表后，我发现这基本上是您列表中的第4项。 如果可以使用它，则认为这是一个好选择。 我还使用它来针对不同的浏览器进行目标定位，通过在body标记上添加指示浏览器的类。

0

1) 在代码后端使用常见的CSS，并设置一些值，如宽度。

2) 为不同的需求创建多个CSS文件，并使用代码后端链接正确的CSS到页面。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接