Question

由于我对java脚本和css.Am并不熟悉，因为创建一个用于在Web表单中应用样式的css文件而感到困惑。现在我在表单中应用了样式。作为一个好习惯，我计划将表单中应用的所有样式移动到css类文件。

这是我的表格..如何将这些样式移动到css ....

<form:form id="jobTriggerForm" name="jobTriggerForm" action="featureSpecific.htm" modelAttribute="jobTriggerForm" method="POST">
        <div id="jobTriggerDiv">
            <br></br>
            <table cellpadding=3 cellspacing=2 border=0 align="center" class="commonTextFont" id="jobTrigger" style="width: 787px; ">
                <th bgcolor="#8AB8E6" colspan=2>
                    <font size=3>Trigger Jobs</font>
                    <br>
                    <font size=1><sup>*</sup> Required Fields</font>
                </th>
                <tr bgcolor="#E6E6FA">
                    <td valign=top style="width: 249px; height: 58px">
                        <b>OT Required</b>
                    </td>
                    <td valign=top style="width: 216px; ">
                        <b><form:checkbox path="isQTRequired" /></b>
                        <br>
                    </td>
                </tr>


                <tr bgcolor="#E6E6FA">
                    <td valign=top align="left" rowspan="2" style="width: 267px; "> <b>   Select Test Plan for 1hour,2hour or 2Day </b>
                        <form:radiobutton path="testPlan" onclick="choosePlan(this)" value="1Hour" /> </td>
                </tr>
                <tr style="height: 28px; width: 246px" bgcolor="#E6E6FA">
                    <td bgcolor="#E6E6FA" style="width: 331px; ">
                        <br><b>Choose Plan : </b>
                        <form:checkbox path="testPlan" onclick="choosePlan(this)" value="1Hour" />1 Hour
                        <form:checkbox path="testPlan" value="4Hour" onclick="choosePlan(this)" />4 Hour
                        <form:checkbox path="testPlan" value="2Day" onclick="choosePlan(this)" />2 Day
                        <form:checkbox path="testPlan" value="AED" />AED</td>
                </tr>


                <tr bgcolor="#E6E6FA">
                    <td rowspan="2" valign=top align="left" style="width: 267px; "> <b></>Select Components</b>
                        <form:radiobutton path="testPlan" onclick="choosePlan(this)" value="1Hour" /> </td>
                </tr>
                <tr style="height: 28px; width: 246px" bgcolor="#E6E6FA" align="center">
                    <td bgcolor="#E6E6FA" style="width: 276px;"><b></b>
                        <form:select path="component" multiple="true" id="componentId">
                            <form:option value="" label="--- Select Components---" />
                            <form:options items="${componentList}" />
                        </form:select>
                    </td>
                </tr>
                <tr bgcolor="#E6E6FA">
                    <td valign=top>
                        <b>Build Name<sup>*</sup></b>
                        <br>
                        <input type="text" name="firstName" value="" size=15 maxlength=20>
                    </td>
                    <td valign=top>
                        <b>Send Report</b>
                        <br>
                        <input type="text" name="lastName" value="" size=15 maxlength=20>
                    </td>
                </tr>
                <tr bgcolor="#E6E6FA">
                    <td valign=top>
                        <b>Execute Stb Type</b>
                        <br>
                        <input type="text" name="firstName" value="" size=15 maxlength=20>
                    </td>
                    <td valign=top>
                        <b>MAC Address</b>
                        <br>
                        <input type="text" name="lastName" value="" size=15 maxlength=20>
                    </td>
                </tr>
                <tr bgcolor="#E6E6FA">
                    <td valign=top>
                        <b>Service Name<sup>*</sup></b>
                        <br>
                        <input type="text" name="firstName" value="" size=15 maxlength=20>
                    </td>
                    <td valign=top>
                        <b>Update RDK Portal</b>
                        <br>
                        <input type="text" name="lastName" value="" size=15 maxlength=20>
                    </td>
                </tr>

                <tr bgcolor="#E6E6FA">
                    <td align=center colspan=2>
                        <input type="button" name="triggerJobDtlsButton" onclick="triggerJobDetails()" value="Trigger Job" />
                        <input type="button" name="cancelJoTriggerButton" onclick="cancelJobTrigger()" value="Cancel" />
                    </td>
                </tr>
            </table>
        </div>
        <input type="hidden" name="jobDetailsID" value="${jobDetailsID}" />


    </form:form>

Answer 1

你可以参考这个页面：

http://www.w3.org/Style/Examples/011/firstcss.en.html

#jobTrigger
{
    width: 787px;
}

像另一种方法：

<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" href="style.css">
...

DEMO HERE

Answer 2

在HTML中包含css文件

 <link rel="stylesheet" href="pathtofolder/style.css" type="text/css" />

在style.css中，您可以为样式创建类：

.commonTextFont {
    width: 787px;
}

等等。

Answer 3

在头部

中添加此代码

<head>
<link rel="stylesheet" href="style.css">
</head>

in your style.css page

table.commonTextFont{width:787px;}

/*input field css*/
input[type="text"] {
  display: block;
  margin: 0;
  width: 100%;
  font-family: sans-serif;
  font-size: 18px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
}
input[type="text"]:focus {
  outline: none;
}

创建css文件并应用样式

3 个答案: