zoukankan      html  css  js  c++  java
  • 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  
                  {  
                      200px;  
                      height:300px;  
                      color:red;  
                  }  
                  .myclass  
                  {  
                      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前面要加一个.

  • 相关阅读:
    IT之光
    个人作业3——个人总结(Alpha阶段)
    结对编程2——单元测试
    个人作业2
    结对作业1
    个人作业1
    个人作业3——个人总结(Alpha阶段)
    结对编程2--单元测试
    个人作业2——英语学习APP案例分析
    结对编程1
  • 原文地址:https://www.cnblogs.com/shenyangxiaohuo/p/5232796.html
Copyright © 2011-2022 走看看