（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. [JavaScript] iframe加载完成事件

    //iframe加载完成后,对其子元素进行操作 var iframe = document.getElementById("re-img"); if (iframe.attachE ...

  2. 深入理解java内存模型

    深入理解Java内存模型(一)——基础 深入理解Java内存模型(二)——重排序 深入理解Java内存模型(三)——顺序一致性 深入理解Java内存模型(四)——volatile 深入理解Java内存 ...

  3. 运行安装mysql 报错 [root@localhost mysql-mult]# ./scripts/mysql_install_db  --defaults-file=conf/3306my.cnf FATAL ERROR: please install the following Perl modules before executing ./scripts/mysql_install_

    运行安装mysql 报错 [root@localhost mysql-mult]# ./scripts/mysql_install_db  --defaults-file=conf/3306my.cn ...

  4. 一：My Batis快速入门

    ---恢复内容开始--- 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检 ...

  5. java中无参，有参，默认构造方法的应用及举例

    类的构造方法: (1)构造方法的名字和类名相同,并且没有返回值. (2)构造方法主要用于为类的对象定义初始化状态. (3)不能直接调用构造方法,必修通过new关键字来自动调用,从而创建类的实例. ne ...

  6. 初识PHP之php运行流程及原理(一)

    初识PHP一.用脚本命令行运行php(1)打开cmd.exe(winkey+R)(2)找到php.exe(拖进cmd即可)(3)输入命令php.exe -f "文件实际路径"注:运 ...

  7. mysql中授权其它电脑链接指令。

    grant all privileges on yourDatabaseName to 'user'@'databaseIPAddress' identified by 'password' with ...

  8. C# 中out，ref，params参数的使用

    C#中有三个高级参数,分别是out,ref,params:   1.out参数 方法使用return 只能返回一个值(一个数值或一个指针值),out参数可以帮助我们在一个方法中返回多个值,不限类型. ...

  9. 微信小程序开发笔记2，底部导航栏tablebar

    底部导航(要在app.js里面配置,也就是把导航的代码写到app.js) 官方文档说最少2个导航最多5个 , "tabBar": { "color": &quo ...

  10. 50道JAVA基础编程练习题

    50道JAVA基础编程练习题 [程序1] 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子对数为多少? 程序分析 ...