码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-03-01 23:55:27      阅读:188      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!