首页 > Web开发 > 详细

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

时间:2016-03-01 23:54:12      阅读:251      评论:0      收藏:0      [点我收藏+]

<!--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前面要加一个.

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

原文:http://www.cnblogs.com/shenyangxiaohuo/p/5232796.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!