当同一个HTML出现在多个网页上时，最佳策略 [英] Best strategy to style the same HTML when it appears on multiple pages
问题描述
我有一个简单的HTML表格，其中包含两个栏位，分别是「姓名」，「评论」和「电子邮件」的文字栏位和标题。 如果HTML片段要在多个网页上展示，则需要为每个网页设置不同的尺寸，从而为这个HTML片段设置样式的最佳策略。我最近阅读了很多关于CSS的信息，但是却发现了足够的信息，这使我很容易知道设计这种.css的最好方法。
例如我可能会在评论页面上以50％的宽度显示评论表单，但在网站上某些其他地方的侧边栏中只有20％。
我主要关注的是对框的宽度设置样式 - 但是当然，同样的方法适用于文本。例如，名称字段不应与电子邮件字段一样宽。我认为固定宽度比百分比更好。
显然有很多方法来设计风格。假设我已经有1个主css文件。
1）将百分比宽度放在输入 div将是100％的宽度为其包含的任何面板。这不需要页面具体的CSS，但我不喜欢百分比的想法在 td 标签，加上我不容易改变 textarea 的高度。
2）为#Name，#Comments和#Email在每个单独的页面中作为< head>< style> *
#Name，#Comments和#Email在特定页面的css文件中。页面特定的文件是好还是坏？我甚至不确定我喜欢基于ids在这里的样式，因为它们是动态生成的，如果由于某种原因，他们需要更改我必须更新css无处不在。
4）基于#Name，#Comments和#Email的样式，但使用特定于每个页面的后代选择器来限定它们。所以我会有 .faqPage #Name ，当这出现在常见问题页面上。显然这些在我的主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>名称：< / label>
< / td>
< td>
< input id =Namename =Nametype =textvalue =/>
< / td>
< / tr>
< tr>
< td align =right>
< label for =Comments>电子邮件：< / label>
< / td>
< td>
< input id =Emailname =Emailtype =textvalue =/>
< / td>
< / tr>
< tr>
< td align =rightvalign =top>
< label for =Comments>问题：< / label>
< / td>
< td>
< textarea id =Commentsname =Comments>
< / textarea>
< / td>
< / tr>
< tr>
< td>
< / td>
< td>
< input id =btnSubmitCommentsname =btnSubmitCommentstype =submitvalue =提交问题/>
< / td>
< / tr>
< / table>
< / div>
- PS。实际的字段名称更具体，如
CommentsName- 它只是更容易把名称这里为了可读性。
侧面注释：也许你不应该使用表格来布局这个表单，具有更大的灵活性。例如，如果您决定让标签和输入字段在更窄的列中彼此重叠...
您的示例没有表（看起来也更漂亮） ：
< style type =text / css>
<！ -
form {/ *设置窗体中的宽度，而不是字段集（仍占用更多的空间w /字段集宽度* /
字体：100％verdana， arial，sans-serif;
margin：0;
padding：0;
min-width：500px;
max-width：600px;
width：560px;
}
表单字段集{
/ * clear：both;注意，这个明确导致输入在ie5.x mac中断开，注释掉* /
border-color：＃000;
border-width：1px;
border-style：solid;
padding：10px; / * fieldset中的padding支持spotty在IE * /
margin：0;
}
form fieldset legend {
font-size：1.1em; / *凸起图例字体大小，不要太大，否则会覆盖边框left * /
/ *小心填充，它会移动边框顶部的漂亮偏移* /
}
表单标签{
display：block ; / * block将标签左移一列，设置宽度* /
float：left;
width：150px;
padding：0;
margin：5px 0 0; / * set top margin as form input - textarea etc. elements * /
text-align：right;
}
表单输入，形式textarea {
/ * display：inline;内联显示不能设置或将隐藏提交按钮在IE 5x mac * /
width：auto; / *将表单元素的宽度设置为自动调整大小，否则请注意调整大小* /
margin：5px 0 0 10px; / *在表单元素的左边设置边距而不是在
的右边设置边距在IE中* /
更匹配textarea更好的$ *
textarea {
overflow：auto;
}
/ *使用类而不是div，更高效* /
form br {
clear：left; / *设置清晰的输入不能一致工作，所以brs添加为降级* /
}
- >
< / style>
< div id =pnlSubmitComments>
< form>
< fieldset>
< label for =Comments>
名称：
< / label>
< input id =Namename =Nametype =textvalue =/>< br />
< label for =Comments>
电子邮件：
< / label>
< input id =Emailname =Emailtype =textvalue =/>< br />
< label for =Comments>
Question：
< / label>
< textarea id =Commentsname =Comments>
< / textarea>< br />
< label for =spacing>< / label>
< input id =btnSubmitCommentsname =btnSubmitCommentstype =submitvalue =提交问题/>
< / fieldset>
< / form>
< / div>
回到主要问题。我会这样做如下：
我将使用不同的布局列的id，我想使用窗体。因此，如果我在主列中使用）我会像这样写CSS：
#main .pnlSubmitComments form fieldset {
/ * your CSS *
}
和
#side .pnlSubmitComments form fieldset {
/ * your CSS * /
}
您可以通过分配以下类来控制每个元素：
< input type =textclass =emailname =emailid =email/>
，然后按照上述操作：
#main .email {
/ *您的css的.email文本框/ *
}
I have a simple HTML table with 2 columns containing text fields and headers for 'Name', 'Comments' and 'Email'.
I'm looking for the best strategy on styling this HTML fragment if it were to appear on multiple pages - requiring different dimensions on each page. I've been reading a lot about CSS recently but havent stumbled across enough information yet that really makes me comfortable to know the best way to design such .css.
For instance I might show the comments form at 50% width on the 'comments' page, but only at 20% in a sidebar in some additional places on the site.
I am mainly concerned about styling the widths of the boxes - but of course the same approach applies for the text. For instance the name field should not be as wide as the email field. I'm thinking fixed widths are better than percentages.
There are obviously many ways to style it. Assume I have 1 master css file already.
1) Put percentage widths on the input tags and then the outer div would be 100% width for whatever panel it is contained in. This requires no page specific css but I don't like the idea of percentages inside the td tags, plus I cant change the height easily of the textarea.
2) create styles for #Name, #Comments and #Email in each individual page as additional styles in <head><style> *
3) style based on #Name, #Comments and #Email in a page specific css file. Are page specific files good or bad? I'm not even sure I like styling based on the ids here because they're dynamically generated and if for some reason they needed to change I'd have to update the css everywhere.
4) style based on #Name, #Comments and #Email but qualify them with a descendent selector specific to each page. So i'd have .faqPage #Name for when this appears on the FAQ page. Obviously these go in my master css file.
5) create class names for 'emailField,nameFieldandcommentsField` [options 2,3,4 are repeated for this option]
6) create class names for 'shortField,fullWidthFieldandtextInputField` [options 2,3,4 are repeated for this option]
7) you get the idea :)
8) something else
I'm just a little overwhelmed with all the options. How do I go about deciding which is the best way? A specific goal is to be able to style the same HTML on multiple pages (obviously thats what css is all about though - but it does affect which options I can use).
<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. The actual field names more specific such as
CommentsName- its just easier to putNamehere for readability.
Side comment: Maybe you shouldn't use tables to layout this form but fieldsets, it would leave you with more flexibility. For example if you decide to have the labels and input fields on top of each other in a more narrow column...
your example without tables (looks also much prettier):
<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>
Now to your main question. I would do it as follows:
I would use the id's of the different layout columns I want to use the form in. So if I use it in my main column () I would write CSS accordingly like so:
#main .pnlSubmitComments form fieldset {
/*your CSS*/
}
and for the side column respectively
#side .pnlSubmitComments form fieldset {
/*your CSS*/
}
You can have control over each element by assigning classes like so:
<input type="text" class="email" name="email" id="email" />
and then you do exactly as described above:
#main .email {
/*your css for the .email textbox/*
}
这篇关于当同一个HTML出现在多个网页上时，最佳策略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
