我有一个简单的HTML表格,包含2列文本字段和“名称”,“评论”和“电子邮件”的标题。
我正在寻找最佳策略来设计此HTML片段的样式,以便在多个页面上显示 - 每个页面都需要不同的尺寸。我最近一直在阅读CSS方面的文章,但是还没有找到足够的信息,让我确信知道设计这种.css的最佳方法。
例如,在“评论”页面上,我可能会将评论表单显示为50%的宽度,但在网站的其他位置的侧边栏中仅为20%。
我主要关心的是样式框的宽度 - 当然,相同的方法也适用于文本。例如,名称字段不应与电子邮件字段一样宽。我认为固定宽度比百分比更好。
显然有很多样式方法。假设我已经有1个主css文件。
1)在
2)在每个单独页面中创建#Name,#Comments和#Email的样式作为
3)基于#Name,#Comments和#Email在特定于页面的css文件中进行样式设置。页面特定文件是好还是坏?我甚至不确定我是否喜欢在这里基于ids进行样式设置,因为它们是动态生成的,如果出现某些原因需要更改,我必须在所有地方更新css。
4)基于#Name,#Comments和#Email进行样式设置,但使用每个页面特定的后代选择器进行限定。所以我将
5)为'emailField','nameField'和'commentsField'创建类名[选项2,3,4会重复此选项]
6)为'shortField','fullWidthField'和'textInputField'创建类名[选项2,3,4会重复此选项]
7)你明白了:)
8)其他方案
我只是有点不知所措。如何决定哪种方法最好?一个具体的目标是能够在多个页面上样式相同的HTML(显然这就是CSS的全部内容 - 但它确实影响我可以使用哪些选项)。
我正在寻找最佳策略来设计此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
。