html中使用css的三种方式

方式一:行内样式

在元素标签有跟style属性,将样式写到改属性中。格式 style=" 属性1 : 值; 属性2 : 值;属性3 : 值;"多个属性用分号“ ; ”隔开。

例:

 

1 <!-- 在div 后跟style属性,等号后面写上css样式 -->
2 <div style="background-color:#000;color:#fff;">  
3   <h1>这是一个DIV标签为</h1>
4 </div>

 

 

 

方式二:内联样式

在<head>标签中加入<style>标签将CSS样式表写到该标签中。格式:.class{ 属性1 : 值; 属性2 : 值;属性3 : 值 ;},值后跟分号。

例:

 

 1 <head>
 2     <meta charset="utf-8">
 3     <title>js测试</title>
 4   <!-- 内部样式表开始 -->
 5     <style >
 6       .box{
 7         background-color:#000;
 8         color:#fff;
 9       }
10     <!-- 内部样式表结束 -->
11     </style>
12   </head>
13 
14   <body>
15     <div class="box">
16       <h1>这是一个DIV</h1>
17     </div>
18   </body>

 

 

 

方式三:外联样式(链接外部样式表)

这是一种比较实用的方式。使用方法:在<head>标签中用<link>标签引入。

例:

 

1   <link rel="stylesheet" type="text/css"  href="./css/layout.css" > <!--href中写css样式表存放的路径-->

 

posted on 2019-05-29 15:56  一个傻子  阅读(4020)  评论(0编辑  收藏  举报

导航