我有一个简单的HTML表格,其中包含2个包含"名称","评论"和"电子邮件"的文本字段和标题的列.
我正在寻找关于样式化这个HTML片段的最佳策略,如果它出现在多个页面上 - 每页需要不同的尺寸.我最近一直在阅读很多关于CSS的内容但是没有偶然发现足够的信息,这让我很自然地知道设计这种.css的最佳方法.
例如,我可能会在"评论"页面上以50%的宽度显示评论表单,但在网站的某些其他位置的边栏中仅显示20%.
我主要关注的是盒子宽度的样式 - 当然,同样的方法适用于文本.例如,名称字段不应该与电子邮件字段一样宽.我认为固定宽度比百分比更好.
它有很多种方式可供选择.假设我已经拥有1个主css文件.
1)在input标签上放置百分比宽度,然后外部div对于它所包含的任何面板都是100%宽度.这不需要特定于页面的css但是我不喜欢td标签内部百分比的想法,而且我不能改变容易的高度textarea.
2)在每个页面中为#Name,#COMMments和#Email创建样式作为<head><style>*中的其他样式
3)基于页面特定css文件中的#Name,#Comments和#Email的样式.页面特定文件是好还是坏？我甚至不确定我喜欢基于这里的ID的样式,因为它们是动态生成的,如果由于某种原因需要更改,我必须更新css到处都是.
4)基于#Name,#Comments和#Email的样式,但使用特定于每个页面的后代选择器限定它们.所以我想.faqPage #Name在FAQ页面上显示这个内容.显然这些都在我的主css文件中.
5)为'emailField ,nameField andcommentsField` 创建类名[为此选项重复选项2,3,4]
6)为'shortField ,fullWidthField andtextInputField` 创建类名[为此选项重复选项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 …css ×1