zoukankan      html  css  js  c++  java
  • 前端开发-CSS 引入方式

    网页中引用CSS样式

    • 内联样式
    • 行内样式表
    • 外部样式表
      • 链接式
      • 导入式

    内嵌方式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p {
                color:red;
            }
        </style>
    </head>
    <body>
        <p>这是一个p标签!</p>
    
    </body>
    </html>
    

      

    行内样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
        <p style="color: blue;">这是一个p标签!</p>
    
    </body>
    </html>
    

      

    外联样式表-链接式

    link标签

    p {
        color: green;
    }
    

      在HTML文件中通过link标签引入:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="index.css">
    
    
    </head>
    <body>
        <p>这是一个p标签!</p>
    
    </body>
    </html>
    

      

    外联样式表-@import url()方式 导入式

    了解即可。

    index.css

    @import url(other.css) 

    链接式与导入式的区别

    1、<link/>标签属于XHTML,@import是属性css2.1
    2、使用<link/>链接的css文件先加载到网页当中,再进行编译显示
    3、使用@import导入的css文件,客户端显示HTML结构,再把CSS文件加载到网页当中
    4、@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的
    

      

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>

    </head>
    <body>
    <p style="color: blue;">这是一个p标签!</p>

    </body>
    </html>
  • 相关阅读:
    CSS3 background-size:cover/contain
    CSS3 filter(滤镜) 属性
    tomcat生成catalina.out文件
    关于海量数据存储与查询的思考
    java DDD 基于maven开发的探讨
    java heap 异常
    项目启动异常
    Windows下apache+tomcat负载均衡
    Objective-C 程序设计(第六版)第十一章习题答案
    Objective-C 程序设计(第六版)第十章习题答案
  • 原文地址:https://www.cnblogs.com/mike-liu/p/9399379.html
Copyright © 2011-2022 走看看