• css-css和html的结合方式(四种结合方式)


      (1)在每个HTML标签上面都有一个属性 style,把css和HTML结合在一起

         <div style="background-color:red;color:blue;">我是一只小小鸟</div>

      (2)使用HTML的一个标签实现,<style>标签:写在head里面

         <style type="text/css">
          css代码;
        </style>

    <style type="text/css">
    div {
    background-color:red;
    color:gray;
    }
    </style>

      (3)在style标签里面 使用语句(在某些浏览器下不起作用)

      @import url(css文件路径);

      - 第一步:创建一个css文件

       <style type="text/css">

        @import url(div.css);

      </style>

      (4)使用头标签link,引入外部css文件

      - 第一步:创建一个css文件

      - <link rel="stylesheet" type="text/css" href="div.css"/>

      *** 第三种结合方式缺点:在某些浏览器下不起作用,一般使用第四种方式

      *** 优先级(一般情况)

        由上到下,由外到内,优先级由低到高

        *** 后加载的优先级高

        *** 格式 选择器名称 {属性名:属性值; 属性名:属性值; ......}

      完整代码:

    <html>
        <head>
            <title>World</title>
            <style type="text/css">
                div {
                    background-color:gray;
                    color:white;
                }
            </style>
        </head>
        <body>
            <div style="background-color:red;color:blue;">我是一只小小鸟
            </div>
            <div>愿有岁月可回首,且以深情共白头!</div>
        </body>
    </html>
    <html>
        <head>
            <title>World</title>
            <style type="text/css">
                @import url(div.css);
            </style>
        </head>
        <body>
            <div>愿有岁月可回首,且以深情共白头!</div>
        </body>
    </html>
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>world</title>
    <link rel="stylesheet" type="text/css" href="div.css"/>
    </head>
    <body>
        <div>愿有岁月可回首,且以深情共白头!</div>
    </body>
    </html>
  • 相关阅读:
    OpenCV 实现图像拼接例子
    XML 可扩展标记语言
    XML和YAML的区别与使用方法
    OpenCV 感兴趣区域ROI和logo添加技术
    OpenCV 详解掩膜mask
    OpenCV 读写xml和yml文件
    OpenCV 如何生成能在无OpenCV环境下运行的exe
    OpenCV 图像拼接和图像融合技术
    OpenCV 特征检测和特征匹配方法汇总
    OpenCV 图像矫正技术深入探讨
  • 原文地址:https://www.cnblogs.com/ibabyli/p/9882544.html
Copyright © 2020-2023  润新知