ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css-1. 引入CSS

2021-03-04 23:04:15  阅读:106  来源: 互联网

标签:样式 标签 html CSS 引入 hello css


引入CSS的四种方式

  • 行内式:直接使用html标签的style属性

    <h1 style="color: green;text-align: center;">hello</h1>
    
  • 内嵌式:在head标签内,使用style标签引入css

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
        <!--在head标签内使用style标签-->
        <style>
            <!--指定h1的样式-->
            h1{
               color: red;
               text-align: center; 
            }
        </style>
    
    </head>
    <body>
        <!-- 内嵌式 -->
        <h1>hello</h1>
    </body>
    
  • 外链式

    • 创建css文件,注意名字不要以数字开头
    • html文件中,在head标签使用link标签引入css样式
    • 外链式引入的css文件,与html并行加载
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <!--外链式引入css文件-->
         <link rel="stylesheet" href="./test.css">
    </head>
    <body>
        <!-- 外链式 -->
        <h1>hello</h1>
    </body>
    
  • 导入式

    • 在style标签内,使用@import url(“路径”)引入独立的css文件
    • 这种方式是html加载之后,才加载css。会影响样式渲染的速度
    • 在css文件中也可以使用@import导入样式
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <!-- 导入式导入css样式文件 -->
         <style>
             @import url(./css/test2.css);
         </style>
    </head>
    <body>
        <!-- 导入式 -->
        <h1>hello</h1>
    </body>
    

导入的优先级

就近原则:后面样式覆盖前面样式

标签:样式,标签,html,CSS,引入,hello,css
来源: https://blog.csdn.net/weixin_43552734/article/details/114380176

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有