（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-css和html的结合方式（四种结合方式）的更多相关文章

  1. CSS控制a标签链接的四种状态

    /*CSS链接的四种状态 *a:link 普通的.未被访问的链接样式 *a:visited 用户已访问的链接样式 *a:hover 鼠标指针位于链接上方样式 *a:active 链接被点击的时刻样式 ...

  2. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  3. CSS布局中浮动问题的四种解决方案

    一.起因: 子盒子设置浮动之后效果: 由此可见,蓝色的盒子设置浮动之后,因为脱离了标准文档流,它撑不起父盒子的高度,导致父盒子高度塌陷.如果网页中出现了这种问题,会导致我们整个网页的布局紊乱 二.解决 ...

  4. css 实现三栏布局的四种方式

    三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...

  5. css四种选择器总结

    css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重.   做 ...

  6. CSS的四种引入方式

    1.使用link标签引入css文件: <head> <link rel="stylesheet" type="text/css" href=& ...

  7. HTML5样式和列表、CSS链接的四种状态

    一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...

  8. css中图片的四种地址引用

    URL: CSS中四种引用图片asset的方式:

  9. CSS当中color的四种表示方法

    这是我的第一篇博客,所以写的东西会比较简单. css当中,好多地方都会用到color属性,用来使html内容丰富多彩,例如:background-color:border-color: 第一种表示法使 ...

随机推荐

  1. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

  2. ORACLE----触发器，存储过程及JOB

    一.Oracle中创建自增的ID字段1.创建序列 create *sequence_name*  increment by 1 start with 1 maxvalue 999999999;2.创建 ...

  3. elasticsearch5.x安装中一些问题的解决办法

    1.root超级用户不能正常启动 由于elasticsearch2.0版本以后不能使用root来启动,所以需要创建一个普通用户来启动. [root@bogon ~]# groupadd elastic ...

  4. 【xsy1147】 异或(xor) 可持久化trie

    我的脑回路可能比较奇怪. 我们对这些询问离线,将所得序列${a}$的后缀和建$n$棵可持久化$trie$. 对于一组询问$(l,r,x)$,我们在主席树上询问第$l$棵树$-$第r$+1$棵树中与$s ...

  5. centos7.2 get pid by process name with python3.6

    centos7.2 get pid by process name with python3.6 #-*- encoding:UTF-8 -*- import os import sys import ...

  6. 剑指offer三十五之数组中的逆序对

    一.题目 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%1000 ...

  7. (转)python 之路，200行Python代码写了个打飞机游戏！

    原文:https://www.cnblogs.com/alex3714/p/7966656.html

  8. php 按照二位数组中某个指定的字段进行排序

    /** * 按照二维数组中某个指定的某个字段进行排序 * @param $array 需要被排序的数组 * @param $flag 排序的标志 1,SORT_DESC 降序 2,SORT_ASC 升 ...

  9. 【转】Spark：一个高效的分布式计算系统

    原文地址:http://tech.uc.cn/?p=2116 概述 什么是Spark Spark是UC Berkeley AMP lab所开源的类Hadoop MapReduce的通用的并行计算框架, ...

  10. 【Docker系列】：全面认识Docker和基本指令

    Docker逐渐成为虚拟化技术的佼佼者,Docker技术也是架构师的必备技能. 什么是Docker Docker 是一个开源的应用容器引擎,基于Go语言,诞生于2013年初,最初发起者是dotClou ...