（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. 如何利用反射简化Servlet操作

    如何利用反射简化Servlet操作   一.反射的实现 新建类BaseServlet,继承HttpServlet(不需要在web.xml文件中配置) 1.在doPost()方法中处理请求乱码,并调用d ...

  2. day 54 linux 常用指令入门

    Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到某一个目录下,用户通过操作目录来 ...

  3. 通过sessionStorage来根据屏幕宽度变化来加载不同的html页面

    因为项目需要,分别写了移动端和PC端的两个html页面,现在需要根据不同的屏幕宽度来加载对应的页面. 先说一下本人的思路-- 刚开始我直接在加载页面的时候判断屏幕宽度,然后加载相应的页面,大家是不是也 ...

  4. css实现响应式九宫格效果

    1. 首先看下九宫格的效果图: 2. html代码比较简单,如下: <div class="main"> <div class="box1"& ...

  5. J04-Java IO流总结四 《 FileReader和FileWriter 》

    FileReader和FileWriter的源码相对简单,下面通过分析它们的源码以更好地进行理解这两个流 1. FileReader FileReader实现了读取底层的字节数据并将其转换为字符数据的 ...

  6. Android 开发工具类 14_ JsonTools

    天气 JSON 数据解析 package com.example.weather_json.tools; import java.util.ArrayList; import java.util.Li ...

  7. Elasticsearch入门（一）

    索引(index) -- 存储关联数据的地方.实际上,索引只是一个逻辑命名空间(logical namespace),它指向一个或多个分片(shards). 分片(shard) 是 工作单元(work ...

  8. 快速搭建gulp项目实战

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大 ...

  9. 关于开发板用tftp下载失败分析

    一.想实现开发板和PC ping通:(1)windows和linux桥接(2)用路由器将开发板和PC连接起来(3)将windows和linux以及开发板的IP设置成同一网段,注意不要和你同一个局域网的 ...

  10. Java 生成指定范围的随机数

    /** * 生成[min, max]之间的随机整数 * * @param min 最小整数 * @param max 最大整数 * @return * @author jqlin */ private ...