html - 创建 css 文件并应用样式

Question

因为我对 java 脚本和 css 不是很熟悉。我很困惑创建一个 css 文件来应用 Web 表单中的样式。 现在我在表单本身中应用了样式。 作为一个好的做法，我计划将表单中应用的所有样式移动到一个 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