温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css和html有哪些结合方式

发布时间:2021-06-06 18:40:30 来源:亿速云 阅读:205 作者:Leah 栏目:web开发

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>

关于css和html有哪些结合方式问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI