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>
  • 相关阅读:
    ASP.NET 如何取得 Request URL 的各個部分
    正则表达式
    sql server 存储过程中拼接sql,转义单引号
    C# 过滤敏感字符
    Facebook “Invite” 弹出窗口
    Silverlight 4 动态换Theme
    silverlight 4 com组件调用
    Silverlight 4 COM+ 操作支持示例集
    如何创建silverlight离开浏览器的应用程序
    Silverlight 4 的 WCF NET.TCP 协议
  • 原文地址:https://www.cnblogs.com/ibabyli/p/9882544.html
Copyright © 2011-2022 走看看