（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. 【wireshark】插件开发（二）：Lua插件开发介绍

    1. Wireshark对Lua的支持 本节相关内容可参考Wireshark开发指南第10章”Lua Support in Wireshark”. Wireshark集成了Lua解释器,以支持Lua脚 ...

  2. WIKI常用的表格设计模板

    域名服务器管理表格     数据库管理表格     软件路径说明表格   开发测试环境虚拟机表格        

  3. 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件

    支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...

  4. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  5. c#调用R

    R.NET使用文档 介绍 本页面涉及R.NET1.5.13. 1.5.13版本在功能上等同于1.5.12,但可作为一个包在NuGet.org上获得. R.NET使.NET框架与R统计语言在同一进程进行 ...

  6. AT24Cxx学习笔记

    AT24Cxx是E2PRom的一个系列: 存储空间大小:AT24C02——2Kbit(256Bytes).AT24C04——4Kbit(512Bytes).AT24C08——8Kbit(1024Byt ...

  7. python获取动态网站上面的动态加载的数据（selenium+Firefox）

    最近突然想到以前爬取百度学术上的参考文献,大家可以看一下以前我的写的博客:http://www.cnblogs.com/ybf-yyj/p/7351493.html,但是如果利用这个方法,太痛苦了,需 ...

  8. spring boot的静态资源加载

    1.spring boot默认资源处理 Spring Boot 默认为我们提供了静态资源处理,使用 WebMvcAutoConfiguration 中的配置各种属性. spring boot默认加载文 ...

  9. redis-手写redis切片和非切片连接池并注入springboot中

    spring-data整合了redispool, 并提供redisTemplate使用, 但有时需要用到shradedJedisPool, 就需要手动注入了 手写redispool并注入springb ...

  10. mysql中难以理解的sql

    工作中遇到这样的例子, CASE type WHEN 1 THEN '普通红包' WHEN 2 THEN '普通礼包加油卡' WHEN 3 THEN '优 惠码兑换加油卡' WHEN 4 THEN ' ...