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>
  • 相关阅读:
    使用 libevent 和 libev 提高网络应用性能
    An existing connection was forcibly closed by the remote host
    各种浏览器的兼容css
    vs输出窗口,显示build的时间
    sass
    网站设置404错误页
    List of content management systems
    css footer not displaying at the bottom of the page
    强制刷新css
    sp_executesql invalid object name
  • 原文地址:https://www.cnblogs.com/ibabyli/p/9882544.html
Copyright © 2011-2022 走看看