我有一个简单的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 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>
CommentsName- 它更容易放在Name这里以便于阅读.旁注:也许你不应该使用表格来布局这个表格而是使用字段集,它会给你更多的灵活性.例如,如果您决定将标签和输入字段放在一个更窄的列中...
没有表的示例(看起来也更漂亮):
<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/*
}