創建css文件並應用樣式

Question

，因爲我對java腳本和css沒有太多的瞭解。我很困惑創建一個css文件來在web表單中應用樣式。 現在我在窗體本身中應用了樣式。 作爲一個好的做法，我計劃將表單中應用的所有樣式移動到一個css類文件中。

這是我的形式..How我可以將這些樣式的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

包括在HTML CSS文件

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

在style.css中，您可以創建你的造型類：

.commonTextFont { 
    width: 787px; 
} 

等等。

Answer 2

你可以參考這個網頁：像另一個方法

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