（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. linux下tomcat运行war包常用命令

    一.先是war包copy到 linux 的相关目录,我这的是/opt/soft/tomcat_ecp/webapps. 如果是老项目,在导入war的之前,习惯上是把之前的war备份一下, 如 mv p ...

  2. 小div在大div里面水平垂直都居中的实现方法

    关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...

  3. 【apio2007】【ctsc2007】 数据备份 贪心+链表+堆

    题目大意:有n个点,k条链,每个点离原点有一定的距离.要你用k条链连接2k个点,使得k条链的长度最短. 首先每次肯定是链相邻的2个点,所以我们先把相邻2个点的差值求出来,得到有n-1个数的数列. 然后 ...

  4. JavaScript 函数的4种调用方法

    JavaScript 函数有 4 种调用方式. 每种方式的不同方式在于 this 的初始化. 作为一个函数调用 function myFunction(a, b) { return a * b; } ...

  5. 【转】Ext JS 集合1713个icon图标的CSS文件

    原文:http://extjs.org.cn/node/715 由于最近在研究Extjs4.1.1,没想到Extjs没有自带的iconCls所使用的图标样式css,就是用那个写那个的,纠结了半天,网上 ...

  6. 【字符串】Reverse Words in a String（两个栈）

    题目: Given an input string, reverse the string word by word. For example,Given s = "the sky is b ...

  7. nginx 超时问题: upstream timed out (110: Connection timed out) while reading response header from upstream

    目录 错误内容 错误原因 错误解决办法 错误内容 我们可以在error.log 里面可以看到 错误内容:upstream timed out (110: Connection timed out) w ...

  8. mysql 设置隔离级别

    查看隔离级别: mysql> select @@tx_isolation; +-----------------+ | @@tx_isolation | +-----------------+ ...

  9. PTA (Advanced Level) 1024 Palindromic Number

    Palindromic Number A number that will be the same when it is written forwards or backwards is known ...

  10. Week4——结对练习&团队作业1

    Deadline: 2017-10-14 10:00PM,以博客发表日期为准. 评分基准: 按时交 - 有分(结对代码-10分,结对博客-10分,团队博客-10分),检查的项目包括后文的三个方面 按要 ...