HTML-CSS文件链接HTML的三种方式

<!--css文本的链接方式有三种：分别是内联定义、链入内部css、和链入外部css-->


<!--1.代码为：-->

  1. <!--<html>  
    <head>  
        <title>内联定义</title>  
    </head>  
    <body>  
        <p style="border:2px solid #000000">内联定义</p>  
        <p style="color:red">内联定义</p>  
        <p style="font-size:12px">内联定义</p>  
    </body>  
</html>-->

<!--2.代码为：-->

  1. <!--<html>  
    <head>  
        <title>链入内部css</title>  
        <style type="text/css">  
            #myid  
            {  
                width:200px;  
                height:300px;  
                color:red;  
            }  
            .myclass  
            {  
                width:200px;  
                height:300px;  
                color:red;  
            }  
        </style>  
    </head>  
    <body>  
        <p id="myid">链入内部css</p>  
        <p class="myclass">链入内部css</p>  
          
    </body>  
</html>-->

     




<!--3.代码为：-->

 
  1. <html>  
    <head>  
        <title>链入外部css</title>  
        <link type="text/css" rel="stylesheet" href="style.css"/>  
    </head>  
    <body>  
        <p id="p1">链入外部css</p>  
        <p id="p2">链入外部css</p>  
        <p class="p3">链入外部css</p>  
    </body>  
</html>   

代码3的style.css是和你的html文件在同一个文件夹。

其代码为：

  1. #p1  
{  
    border:2px;  
    color:red;  
}  
  
#p2  
{  
    border:2px;  
    color:blue;  
}  
  
.p3  
{  
    border:2px;  
    color:red;  
}

在css中 

id前面是要加一个#

class前面要加一个.

posted @ 2016-03-01 22:37  我大沈阳无敌  阅读(563)  评论(0)  编辑  收藏  举报