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中样式规则由 ...
随机推荐
- System.Web.UI.WebControls的Web服务器控件
calendar[英][ˈkælɪndə(r)][美][ˈkæləndɚ]n.日历; 历法; 日程表; (一年之中的)重大事件(或重要日期)一览表; vt.把…记入日程表中; 把…列入表中; 为(文件 ...
- UVa 10718 - Bit Mask
题目大意:给一数N,在区间[L, U]上找到一个数M使得M| N的值最大,如果有M有多个可能值,取最小的那个值. 从最高位开始逐位判断,如果N的该位为0,为使M | N的值最大,M的该位应考虑置为1, ...
- 如何解决ADT17下Android第三方jar包NoClassDefFoundError的错误
转自:http://blog.csdn.net/huzgd/article/details/7604069本人已试过第二种解决方法可行!! 原文:Posted by Foxykeep on 22/03 ...
- CocoaPods ReactiveCocoa 学习实践一 之 配置环境
1.安装CocoaPods 1.00.参考 CocoaPods 文档 1.01.是否已安装 which pod 1.1.升级gem命令 sudo gem update --system 1.2.切换C ...
- C# Winform窗口之间传值的多种方法浅析（转）
摘要http://www.jb51.net/article/63837.htm 这篇文章主要介绍了C# Winform窗口之间传值的多种方法浅析,本文起讲解了通过构造器传值.通过属性传递.通过事件携带 ...
- 网页代码DIV+CSS布局积累
11.17 CSS英文命名在写CSS的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用menu来表示,那么菜单后面的背景我会用menubg,CSS里就写#me ...
- AngularJS中$http服务的简单用法
我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对 ...
- java 字符串大小比较
//java 字符串大小比较 String a="b123"; String b="b124"; String d="b122"; Stri ...
- CAGradientLayer颜色渐变器
使用CAGradientLayer可以实现颜色的渐变, 我们先看下头文件 @interface CAGradientLayer : CALayer @property(nullable, copy) ...
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...