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中样式规则由 ...
随机推荐
- scrapy setting 备注
scrapy 脚本里面设置输出文件: process = CrawlerProcess(settings) process.settings.set('FEED_URI', 'wangyi.csv', ...
- PHP使用JPG生成GIF动画图片，基于php_imagick_st-Q8.dll
PHP使用php_imagick_st-Q8.dll类库,把JPG图片连接生成GIF动画图片,需要事先下载好php_imagick_st-Q8.dll,文件,并配置php.ini文件,启用php_im ...
- Angular - - ngReadonly、ngSelected、ngDisabled
ngReadonly 该指令将input,textarea等文本输入设置为只读. HTML规范不允许浏览器保存类似readonly的布尔值属性.如果我们将一个Angular的插入值表达式转换为这样的属 ...
- thinkPHP 模板中的语法
一.导入CSS和JS文件 1.css link js scr <link rel='stylesheet' type='text/css' href='__PUB ...
- 第6组UI组件：ViewAnimator及其子类
ViewAnimator是一个基类,它继承了FrameLayout,因此它表现出FrameLayout的特征,可以将多个View组件“叠”在一起.ViewAnimator额外增加的功能正如它的名字所暗 ...
- HDU-1996-汉诺塔VI
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1996 其实它就是求移动的所有可能,也就是n个盘子摆在三个塔上的任何可能的种数.可以这么思考这个问题:n ...
- WinForm TextBox 实现自动索引功能
源代码如下: http://pan.baidu.com/s/1bnOz4hp
- 持续集成的一些讨论（CI）
如何保证程序开发的新功能降低BUG,那就是需要他们自己写用测试工具来写测试用例,包括Mocha(JS).Junit(Java).GTest(C++):而上传到SVN或者GIT后,又如何保证能跟原有的功 ...
- Linux系统监控命令
1. uptime: 负载监控,w命令更好地显示当前登录用户数的信息 2.top: 相当于uptime,提供了负载平均值的快照 (1)第一行: up 48days: 系统运行时间 2 users: 当 ...
- 递归编译的Makefile的实现
最近写了一个递归Makefile,目的是既可以实现子模块的单独编译,也可以不做任何修改就和整个程序的整体进行无缝衔接的编译.具体的思路是借助第三方文件,将子模块编译好的.o文件的路径自动写到confi ...