zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    bzoj2190[SDOI2008]仪仗队(欧拉函数)
    洛谷P3601签到题(欧拉函数)
    bzoj2818 Gcd(欧拉函数)
    poj2104 K-th Number(主席树静态区间第k大)
    只要有它,你就永远不会被打垮!
    网站美化常见CSS
    虚拟机安装CentOS6.4
    提高工作效率是有秘诀的
    不要消费信任
    项目经理必备7要素
  • 原文地址:https://www.cnblogs.com/ibabyli/p/9882544.html
Copyright © 2011-2022 走看看