css笔记:HTML文档中应用css样式的方法总结
2017-05-28 20:13
513 查看
标签:class style log com http 使用 si it html
在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表;2.使用style元素包含样式表;3.使用style属性,即内联样式
一.link标签链接外部样式表
先看一条较为标准的link标记语句:
link标记必须放在head元素中,且不能放在其他元素(如title)内部。至于其属性,rel 代表“关系“(relation),在这里,关系为stylesheet,即文档的外部样式表,至于其他值以及含义详情见 http://www.w3school.com.cn/tags/att_link_rel.asp 。type总是设置为text/css,描述了使用link标记加载的数据的类型。href那么简单的就不多说了。media 属性规定被链接文档将显示在什么设备上。当然,link标记还有其他的一些属性,比如title(除了说的这五个,其他的属性貌似都没啥作用了),接下来就说聊到这个title属性的作用。
外部样式表之候选样式表:将rel属性设置为alternate stylesheet 时,就可以定义候选样式表,只有在用户选择这个样式表时才会用于文档表现。例如:
貌似目前Chrome还不支持这种候选样式表,我也没有找到Chrome的菜单栏,不过IE、FF均支持此功能(切换样式表的方法:按下Alt键打开菜单栏->查看->样式->选择样式表)。注意:①这些样式表只有一个会用于文档显示,不会发生重叠;②并且每个样式表都得有title属性,不然菜单栏里面没有显示;③默认样式表(也叫首选样式表)是rel为stylesheet的样式表,与title属性的值没有关系。
还可以为候选样式表指定同样的title,把它们分组在一起。例如:
这样以来用户就可以在屏幕和打印媒体中为网站选择不同的样式表。
二.使用style元素包含样式表
style标记之间的样式称为文档样式表,或嵌套样式表。注意:①一定要使用type属性,其值为"text/css",也可以指定media属性;
在这里介绍一个@import指令,它用于指示Web浏览器加载一个外部样式表,不过这条指令要放在其他css规则之前,否则不起作用。例如:
@import指令的一个显著作用就是:如果有一个外部样式表,它需要使用其他外部样式表中的样式时就可以在开头使用这条指令导入其他样式表。
三.内联样式
除了在body外部出现的标记,style属性可以与任何其他HTML标记关联来设置其内联样式。注意:①不能在style属性中使用@import指令。
HTML文档中应用css样式的方法总结
标签:class style log com http 使用 si it html
在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表;2.使用style元素包含样式表;3.使用style属性,即内联样式
一.link标签链接外部样式表
先看一条较为标准的link标记语句:
<link rel="stylesheet" type="text/css" href="main.css" media="all" />
link标记必须放在head元素中,且不能放在其他元素(如title)内部。至于其属性,rel 代表“关系“(relation),在这里,关系为stylesheet,即文档的外部样式表,至于其他值以及含义详情见 http://www.w3school.com.cn/tags/att_link_rel.asp 。type总是设置为text/css,描述了使用link标记加载的数据的类型。href那么简单的就不多说了。media 属性规定被链接文档将显示在什么设备上。当然,link标记还有其他的一些属性,比如title(除了说的这五个,其他的属性貌似都没啥作用了),接下来就说聊到这个title属性的作用。
外部样式表之候选样式表:将rel属性设置为alternate stylesheet 时,就可以定义候选样式表,只有在用户选择这个样式表时才会用于文档表现。例如:
1 <link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" /> 2 <link rel="alternate stylesheet" type="text/css" href="bigtext.css" tile="BigText"/> 3 <link rel="alternate stylesheet" type="text/css" href="crazy.css" tile="CrazyText"/>
貌似目前Chrome还不支持这种候选样式表,我也没有找到Chrome的菜单栏,不过IE、FF均支持此功能(切换样式表的方法:按下Alt键打开菜单栏->查看->样式->选择样式表)。注意:①这些样式表只有一个会用于文档显示,不会发生重叠;②并且每个样式表都得有title属性,不然菜单栏里面没有显示;③默认样式表(也叫首选样式表)是rel为stylesheet的样式表,与title属性的值没有关系。
还可以为候选样式表指定同样的title,把它们分组在一起。例如:
1 <link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" media="screen" /> 2 <link rel="stylesheet" type="text/css" href="print-sheet1.css" title="Default" media="print" /> 3 <link rel="alternate stylesheet" type="text/css" href="bigtext.css" title="BigText" media="screen" /> 4 <link rel="alternate stylesheet" type="text/css" href="print-bigtext.css" title="BigText" media="print" />
这样以来用户就可以在屏幕和打印媒体中为网站选择不同的样式表。
二.使用style元素包含样式表
style标记之间的样式称为文档样式表,或嵌套样式表。注意:①一定要使用type属性,其值为"text/css",也可以指定media属性;
在这里介绍一个@import指令,它用于指示Web浏览器加载一个外部样式表,不过这条指令要放在其他css规则之前,否则不起作用。例如:
1 <style type="text/css"> 2 @import url(main.css); 3 @import url(sheet1.css) all; 4 @import url(print.css) print; 5 h1{color:blue;} 6 </style>
@import指令的一个显著作用就是:如果有一个外部样式表,它需要使用其他外部样式表中的样式时就可以在开头使用这条指令导入其他样式表。
三.内联样式
除了在body外部出现的标记,style属性可以与任何其他HTML标记关联来设置其内联样式。注意:①不能在style属性中使用@import指令。
HTML文档中应用css样式的方法总结
标签:class style log com http 使用 si it html
相关文章推荐
- HTML文档中应用css样式的方法总结
- 为一个HTML文档应用CSS的方法
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第20讲_js基本数据类型_js运算符1_学习笔记_源代码图解_PPT文档整理
- c#/asp.net/html/css/js/jquery 实用小方法 整理笔记
- HTML&CSS基础学习笔记4-定义文档类型
- HTML&CSS基础学习笔记1.26-给网页添加一个css样式
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第25讲_js系统函数_js函数调用方式_学习笔记_源代码图解_PPT文档整理
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍 类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第21讲_js运算符2_js移位运算_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理
- 快速记住CSS样式属性单词及输入HTML+CSS的方法
- 一些关于HTML与CSS的总结与实际应用
- HTML与CSS教学-第十章 对表格与表单应用CSS样式
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理
- CSS布局应用到XML文档和HTML文档
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- 前端html与css学习笔记总结篇(超详细)
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第26讲_js函数调用过程内存分析_js函数细节_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_ 第18讲_js课程介绍_js基本介绍_学习笔记_源代码图解_PPT文档整理