如何将CSS添加到html文件 [英] how to add css to html file

查看：84
本文介绍了如何将CSS添加到html文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个html文件和css文件。我可以将我的CSS添加到我的HTML中吗？请我是新来的这个





我的css



身体{

保证金：自动;

显示：阻止;

}



div {

border：1px红色虚线; / *删除此行以删除红色虚线边框* /

}



#box {

保证金：自动;

宽度：1100px;

身高：500px;

}



#LeftColumn {

margin-上：50px;

margin-left：20px;

宽度：40％;

float：left;

}



#RightColumn {

margin-top：50px;

margin-right：20px;

宽度：40％;

身高：200px;

浮动：正确;

}



.BoxData {

text-align：right;

font-weight：bold;

margin-top：20px;

}



.BoxTitles {

widt h：73％;

颜色：＃B18904;

text-align：left;

border-bottom：2px solid＃B18904; < br $>
}











我的HTML 







 <   section  >  
 < span class =code-keyword><   div     class   =  tabInnerDiv    ng-cloak  >  
 
 
 <   table     align   = 左 >  
 <   tr  >  
 <   td  >  <   b  > 一般<   / b  >  <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td  >  <   / td  >  
 < span class =code-keyword><   / tr  >  
 <   tr  >  
 <   td  >  Ldz名称<   / td  >  
 <   td  >  
 <  输入    type   =  text    /  >  
 
 <   / td  >  
 
 <   / tr  >  
 
 <   tr  >  
 <   td  >  Ldz说明<   / td  >  
 
 <   td  >  
 <  输入    type   = < span class =code-keyword> text    /  >  
 
 <   / td  >  
 
 <   / tr  >  
 
 <   tr  >  
 <   td  > 阈值限制< span class =code-keyword><   / td  >  
 
 <   td  >  
 <   input    类型  =  text    /  >  
 
 <   / td  >  
 <   / tr  >  
 <   / table  >  
 
 
 
 <  表格 >  
 <   tr  >  
 <   td  >  <   b  > 运营<   / b  >  <   / td  >  
 <   / tr  >  
 
 <   tr  >  
 <   td  > 水量<   / td  >  
 <   td  >  
 <  输入   类型  =  text    /  >  
 
 <   / td  >  
 
 <   / tr  > ;  
 
 <   tr  >  
 <   td  > 夏季压力范围（bar）<   / td  < span class =code-keyword>>  
 
 <   td  >  
 <  输入   类型  =  text    /  >  
 
 <   / td  >  
 
 <   / tr  >  
 
 <   tr  >  
 <   td  > ; 冬季压力范围（bar）<   / td  >  
 
  <   td  >  
 <  输入    type   =  text    /  >  
 
 <   / td  >  
 <   / tr  >  
  <   / table  >  
 
 
 <  表    align   =  left >  
 <   tr  >  
 < ;   td  >  <   b  > 审核<   / b  >  <   / td  >  
 <   / tr  >  
 
 <   tr  >  
 <   td  > 上次修改者：<   / td  > ;  
 <   td   >  
 <   input     type   =  text    /  >  
 
 <   / td  >  
 
  <   / tr  >  
 
 <   tr  >  
 <   td  > 上次修改日期时间<   / td  >  
 
 <   td  >  
 <  输入    type   =  text    /  >  
 
 <   / td  >  
 
 <   / tr  >  
 
 <   / table  >  
 
 
 <  表格 >  
 <   tr  < span class =code-keyword>>  
 <   td  >  <   b  > 网络映射<   / b  >  <   / td  >  
 <   / tr  >  
 
 <   tr  >  
 <   td  >  LDZ <   / td  >  
 <   td  >  
 <  输入    type   =  text    /  >  
 
 <   / td  >  
 
 <   / tr  >  
 
 <   tr  >  
 <   td  > 关联的BA系统<   / td  >  
 
 <   td  >  
 <  输入    type   =  text    /  >  
 
 <   / td  >  
 
 <   / tr  >  
 
 
 <   tr  >  
 <   td  > 排序顺序<   / td  >  
 
 <   td  >  
 <   input     type   =  text    /  >  
 
 <   / td  >  
 
 <   / tr  > ;  
 
 <   / table  >  
 
 <   / div  >  
 <   / section  >

解决方案

有两种方法可以做到这一点。您可以将它包含在< head>中的HTML文件的顶部。部分。或者您可以拥有一个单独的CSS文件，这是常态，并将其链接到头文件中。



您的CSS文件将如下所示：



文件名：style.css并将其保存在与HTML文件相同的文件夹中。



 body {
 margin：auto; 
 display：block; 
} 
 
 div {
 border：1px红色虚线; / *删除此行以删除红色虚线边框* / 
} 
 
 #box {
 margin：auto; 
宽度：1100px; 
身高：500px; 
} 
 
 #LeftColumn {
 margin-top：50px; 
 margin-left：20px; 
宽度：40％; 
 float：left; 
} 
 
 #RightColumn {
 margin-top：50px; 
保证金权利：20px; 
宽度：40％; 
身高：200px; 
浮动：对; 
} 
 
 .BoxData {
 text-align：right; 
 font-weight：bold; 
 margin-top：20px; 
} 
 
 .BoxTitles {
宽度：73％; 
颜色：＃B18904; 
 text-align：left; 
 border-bottom：2px solid＃B18904; 
}





然后在< head> css文件中的部分链接如下：



 <  < span class =code-leadattribute> head  >  
 <   link     rel   = 样式表   类型  =  text / css    href   =  mystyle.css >  
 <   / head  >





如果将css存储在头部文件t它看起来像这样：



 <   head  >  
 <   style  >  
  body  {
  margin  ：  auto;  
  display  ：  block;  
} 
 
  div  {
  border  ：  1px红色虚线;   / *  删除此行以删除红色虚线边框* /  
} 
 
＃ box  { 
  margin  ：  auto;  
  width  ：  1100px;  
  height  ：  500px;  
} 
 
＃ LeftColumn  {
  margin-top  ：  50px;  
  margin-left  ：  20px;  
  width  ：  40％;  
  float  ：  left;  
} 
 
＃ RightColumn  { 
  margin-top  ：  50px;  
  margin-right  ：  20px;  
  width  ：  40％ ;  
  height  ：  200px ;  
  float  ： 右;  
} 
 
。 BoxData  {
  text -align  ：  right;  
  font-weight  ： 粗体;  
 边距 <温泉n class =code-keyword>：  20px;  
} 
 
。 BoxTitles  {
  width  ：  73％;  
 颜色 ： ＃B18904;  
  text-align  ：  left;  
  border-bottom  ：  2px solid＃B18904;  
} 
 < /   style  >  
 <   / head  >





有关外部样式表的更多信息：CSS如何 [ ^ ]


i have one html file and css file.how can i add my css to my html?please am new to this


my css

body{
margin:auto;
display:block;
}

div{
border:1px dashed red;/*Delete this line to erase red dashed border*/
}

#box{
margin:auto;
width: 1100px;
height: 500px;
}

#LeftColumn{
margin-top: 50px;
margin-left: 20px;
width:40%;
float:left;
}

#RightColumn{
margin-top: 50px;
margin-right: 20px;
width:40%;
height:200px;
float:Right;
}

.BoxData{
text-align:right;
font-weight:bold;
margin-top:20px;
}

.BoxTitles{
width:73%;
color:#B18904;
text-align:left;
border-bottom:2px solid #B18904;
}





my html



   <section>
<div class="tabInnerDiv" ng-cloak>


           <table align="left">
               <tr>
                   <td><b> General</b></td>
               </tr>
               <tr>
                   <td></td>
               </tr>
               <tr>
                   <td>Ldz Name</td>
                   <td>
                       <input type="text" />

                   </td>

               </tr>

               <tr>
                   <td>Ldz Description</td>

                   <td>
                       <input type="text" />

                   </td>

               </tr>

               <tr>
                   <td>Threshold Limit</td>

                   <td>
                       <input type="text" />

                   </td>
               </tr>
           </table>



           <table>
               <tr>
                   <td><b>Operational</b></td>
               </tr>

               <tr>
                   <td>Water Volume</td>
                   <td>
                       <input type="text" />

                   </td>

               </tr>

               <tr>
                   <td>Summer Pressure Range(bar)</td>

                   <td>
                       <input type="text" />

                   </td>

               </tr>

               <tr>
                   <td>Winter Pressure Range(bar)</td>

                   <td>
                       <input type="text" />

                   </td>
               </tr>
           </table>


           <table align="left">
               <tr>
                   <td><b>Audit</b></td>
               </tr>

               <tr>
                   <td>Last Modified By:</td>
                   <td>
                       <input type="text" />

                   </td>

               </tr>

               <tr>
                   <td>Last Modified Date Time</td>

                   <td>
                       <input type="text" />

                   </td>

               </tr>

           </table>


           <table>
               <tr>
                   <td><b>Network Mapping</b></td>
               </tr>

               <tr>
                   <td>LDZ</td>
                   <td>
                       <input type="text" />

                   </td>

               </tr>

               <tr>
                   <td>Associated BA System</td>

                   <td>
                       <input type="text" />

                   </td>

               </tr>


               <tr>
                   <td>Sort Order</td>

                   <td>
                       <input type="text" />

                   </td>

               </tr>

           </table>

       </div>
   </section>

解决方案

There are two ways to do this. You can include it at the top of the HTML file in the <head> section. Or you can have a separate CSS file, which is the norm, and link it in the head file.

Your CSS file will look like this:

File name: style.css and save it in the same folder as the HTML file.

body{
margin:auto;
display:block;
}

div{
border:1px dashed red;/*Delete this line to erase red dashed border*/
}

#box{
margin:auto;
width: 1100px;
height: 500px;
}

#LeftColumn{
margin-top: 50px;
margin-left: 20px;
width:40%;
float:left;
}

#RightColumn{
margin-top: 50px;
margin-right: 20px;
width:40%;
height:200px;
float:Right;
}

.BoxData{
text-align:right;
font-weight:bold;
margin-top:20px;
}

.BoxTitles{
width:73%;
color:#B18904;
text-align:left;
border-bottom:2px solid #B18904;
}



Then in the <head> section link in the css file like this:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>



If storing the css in the head of the file then it would look like this:

<head>
<style>
body{
margin:auto;
display:block;
}
 
div{
border:1px dashed red;/*Delete this line to erase red dashed border*/
}
 
#box{
margin:auto;
width: 1100px;
height: 500px;
}
 
#LeftColumn{
margin-top: 50px;
margin-left: 20px;
width:40%;
float:left;
}
 
#RightColumn{
margin-top: 50px;
margin-right: 20px;
width:40%;
height:200px;
float:Right;
}
 
.BoxData{
text-align:right;
font-weight:bold;
margin-top:20px;
}
 
.BoxTitles{
width:73%;
color:#B18904;
text-align:left;
border-bottom:2px solid #B18904;
}
</style>
</head>



More on external stylesheets: CSS How to[^]


这篇关于如何将CSS添加到html文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆