0CSS样式表与HTML结合的方法
从此王子和公主幸福的生活在了一起:)
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
一、外部样式表(常用)
通过 <link />标签引入样式表：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外联样式</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<!--在link标记中rel和href属性是必须的，type属性和media属性可省略-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
注意：1)在link标记中rel和href属性是必须的，type属性和media属性可省略；
2)样式表中不能包含HTML标记语言，只能有CSS规则和CSS注释，否则导致在该标记后面的CSS样式将无法被识别。
二、内联样式表
1、通过 <style></style>标签引入样式表：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联样式</title>
<style>
body{
background-color: blue;
}
</style>
</head>
<body>
</body>
</html>
2、通过@import指令引入样式表：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>@import</title>
<style>
/*将@import放置在CSS规则前*/
@import url(style.css);
body {
background-color: blue;
}
</style>
</head>
<body>
</body>
</html>
注意：1)将@import url(style.css);写在<style>标签内；
2)@import放置在CSS规则之后将不起使用。
三、行间样式
写在某个元素自身的样式，使用HTML的style属性实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行间样式</title>
</head>
<body>
<div style="background-color: red; width:100px;height:100px;" style="background-color: yellow;"></div>
</body>
</html>
注意：行间样式若存在多个style属性，只能识别第一个。
0CSS样式表与HTML结合的方法的更多相关文章
- CSS样式表与HTML结合的方法
从此王子和公主幸福的生活在了一起:) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文 ...
- IE6里样式表不起作用解决方法
写的html页面引用外部css文件的时候在IE7,IE8和FF中能正常作用,即能正常显示,可在IE6中却完全没有作用到,即css文件里的样式根本未被解析到我们的html页面,这是什么原因? 开 始把c ...
- 漂亮的表格样式(使用CSS样式表控制表格样式)
根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...
- 在网页中插入CSS样式表的几种方法
1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...
- vue2.0 样式表引入的方法 css sass less
在引入样式之前,首先要了解static.assets两个文件夹的区别. 从字面上可以看出,static用来存放静态文件,assets用来存放资源文件: static存放的文件不会被编译,打包后直接赋值 ...
- Qt样式表之三：实现按钮三态效果的三种方法
按钮的三态,指的是普通态.鼠标的悬停态.按下态.Qt中如果使用的是默认按钮,三态的效果是有的,鼠标放上去会变色,点击的时候有凹陷的效果. 但是如果自定义按钮实现三态效果有三种方法,一种是设置背景图,主 ...
- 插入css样式表的三种方法
http://www.w3school.com.cn/css/css_howto.asp http://www.runoob.com/css/css-howto.html 当读到一个样式表时,浏览器会 ...
- 深入理解脚本化CSS系列第四篇——脚本化样式表
× 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...
- Qt——浅谈样式表
优秀的程序,不仅要有严密逻辑,而且应该有美观的外表.从软件界面,便可看出你是否用心在做,是否是一个有思想的人. Qt样式表的术语和语法规则和HTML CSS有很多相似之处. 样式规则 Qt中样式规则由 ...
随机推荐
- yum命令被锁 Existing lock /var/run/yum.pid
有时使用yum命令,不知怎会回事就提示: Existing lock /var/run/yum.pid: another copy is running as... 感觉也没操作什么错误的事情. 此时 ...
- PHP检测获取内存信息
PHP也可以检测获取到Windows的内存信息,而且代码还挺简单,无意发现的,觉得以后能用上,在此与大家分享. 本代码将得到总内存.初始使用等内存信息: <?php echo "初始: ...
- PHP根据设备类型自动跳转相应网址页面，这个现在实用
现在移动设备上网也很方便,比如Android智能手机,iPhone/iPad等,很多网站都相继推出了针对电脑和这些手机等移动设备访问的网页,如果你的系统是用PHP写的,那面本代码对你会很实用,可根据这 ...
- IE6-能让png图片有透明效果的js代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Angular - - angular.equals
angular.equals 对比两个对象/值是否相等.支持值类型.正则表达式.数组和对象. 如果下列至少有一个是正确的,则将两个对象/值视为相等. 两个对象/值能通过===比较. 两个对象/值是同一 ...
- 数值选择器（NumberPicker）的功能与用法
数值选择器用于让用户输入数值,用户既可以通过键盘输入数值,也可以通过拖动来选择数值.使用该组件常用如下三个方法. setMinValue(int minVal):设置该组件支持的最小值. setMax ...
- JS base64 加密和解密
/*** * 加密 base64encode(utf16to8(str)) * 解密 utf8to16(base64decode(str)) * * */ var base64EncodeChars ...
- 在Windows 10 Anniversary下配置Caffe
去年十月份的时候尝试过配置caffe,真的是恶心到家,当时用的还是微软魔改的基于NuGet的caffe.现在这个项目退役了,接手的是原项目下的windows分支,虽然并不是很成熟,但是依然非常推荐在W ...
- UWP开发技巧：实现SMB协议操作文件服务器文件
问题来源 文件服务器文件夹操作在PC与Surface端确实还是和传统操作一样没什么区别,但是到了手机端与Surface Hub就没那么方便了,因为文件资源管理器Explorer根本没法添加网路硬盘.对 ...
- 深入了解GCD
首先提出一些问题: dispatch_async 函数如何实现,分发到主队列和全局队列有什么区别,一定会新建线程执行任务么? dispatch_sync 函数如何实现,为什么说 GCD 死锁是队列导致 ...