css和html的四种结合方式 - 建站技术 - 网址库

  • 当前位置:网址库 » 站长资讯 » 资讯文章 » 建站技术 » 文章详细 订阅RssFeed

    css和html的四种结合方式

    来源:本站原创 浏览:64次 时间:2020-08-21

    (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>

    总结

    以上所述是小编给大家介绍的css和html的四种结合方式,希望对大家有所帮助