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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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前面要加一个.

以上是关于HTML-CSS文件链接HTML的三种方式的主要内容，如果未能解决你的问题，请参考以下文章

Html-CSS级联样式表

在HTML中使用CSS样式的几种方式

页面添加锚点的三种方式

HTML中使用JavaScript的三种方式及优缺点

页面添加锚点的三种方式

python文件上传的三种方式