Html 创建css文件并应用样式

因为我对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>

触发工作


*必填字段
加班费


选择1小时、2小时或2天的测试计划

选择计划：
1小时
4小时
2天
AED
选择组件
构建名称*


发送报告


执行机顶盒类型


MAC地址


服务名称*


更新RDK门户

在HTML中包含css文件

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

---

等等。

您可以参考本页：

与另一种方法类似：

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

CSS示例
...

---

在头部添加此代码

<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;
}

在style.css页面中
table.commonTextFont{宽度：787px；}
/*输入字段css*/
输入[type=“text”]{
显示：块；
保证金：0；
宽度：100%；
字体系列：无衬线；
字号：18px；
外观：无；
盒影：无；
边界半径：无；
}
输入[type=“text”]：焦点{
大纲：无；
}

您可以参考本页

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

<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;
}