css-css和html的结合方式(四种结合方式)
(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的结合方式(四种结合方式)的更多相关文章
- CSS控制a标签链接的四种状态
/*CSS链接的四种状态 *a:link 普通的.未被访问的链接样式 *a:visited 用户已访问的链接样式 *a:hover 鼠标指针位于链接上方样式 *a:active 链接被点击的时刻样式 ...
- css+div制作圆角矩形的四种方法
圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...
- CSS布局中浮动问题的四种解决方案
一.起因: 子盒子设置浮动之后效果: 由此可见,蓝色的盒子设置浮动之后,因为脱离了标准文档流,它撑不起父盒子的高度,导致父盒子高度塌陷.如果网页中出现了这种问题,会导致我们整个网页的布局紊乱 二.解决 ...
- css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...
- css四种选择器总结
css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重. 做 ...
- CSS的四种引入方式
1.使用link标签引入css文件: <head> <link rel="stylesheet" type="text/css" href=& ...
- HTML5样式和列表、CSS链接的四种状态
一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...
- css中图片的四种地址引用
URL: CSS中四种引用图片asset的方式:
- CSS当中color的四种表示方法
这是我的第一篇博客,所以写的东西会比较简单. css当中,好多地方都会用到color属性,用来使html内容丰富多彩,例如:background-color:border-color: 第一种表示法使 ...
随机推荐
- MVC4删除 pages引发的异常 System.Web.Optimization找不到引用
在MVC4的开发中,如果创建的项目为空MVC项目,那么在App_Start目录下没有BundleConfig.cs项的内容,在手动添加时在整个库中都找不到:System.Web.Optimizatio ...
- Swift 里字符串(九)UTF16View
即以 UTF16 编码的格式来查看字符串. UTF16View 是一个结构体 @_fixed_layout public struct UTF16View { @usableFromInline in ...
- iOS完全自学手册——[三]Objective-C语言速成,利用Objective-C创建自己的对象
1.前言 上一篇已经介绍了App Delegate.View Controller的基本概念,除此之外,分别利用storyboard和纯代码创建了第一个Xcode的工程,并对不同方式搭建项目进行了比较 ...
- 2019年北航OO第一次博客总结
一.基于度量对程序结构的分析 1. 第一次作业 1.1 基于类的分析的度量 首先,基于类的属性个数,方法个数,每个方法的规模,每个方法的控制分支数目,类总代码规模等特征对本次作业的结构进行分析. 1. ...
- iOS 枚举讲解
枚举增强程序的可读性,用法上还是需要注意的 1.C语言的写法 enum XMPPReconnectFlags { kShouldReconnect = 1 << 0, // If set, ...
- 关于JSON基础的总结
本文总结自百度百科 JSON 语法规则 JSON 语法是 JavaScript 对象表示语法的子集. 数据在键值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 JSON 名称/值对 JSON 数 ...
- 渐进增强与优雅降级 && css3中普通属性和前缀属性的书写顺序
什么是渐进增强与优雅降级? 服务器和浏览器是不同的.当服务器有新版本时,开发人员直接使用新版本的服务器提供服务即可:但是浏览器端,不同的用户使用的浏览器版本不同,型号差异大,我们不可能让用户强制更新 ...
- SpringMVC+AJAX+JSON
在做一个ajax发送json到springmvc的控制层,控制层的对象中有一个List集合,ajax调用总是报415错误.发现了一个一直没有注意到的问题,借机记录一下. (细节部分都忽略了,在最后的d ...
- protocol buffer开发指南
ProtoBuf 是一套接口描述语言(IDL)和相关工具集(主要是 protoc,基于 C++ 实现),类似 Apache 的 Thrift).用户写好 .proto 描述文件,之后使用 protoc ...
- WPF为ItemsControl设置ItemsPanelTemplate
1. 直接在XAML中以对象属性的方式 <ItemsControl x:Name="lstNew"> <ItemsControl.ItemsPanel> & ...