css在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指令

 @import url(main.css);3    @import url(sheet1.css) all;4    @import url(print.css) print;5    h1{color:blue;}6

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,592评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,970评论 1 45
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,685评论 32 459
  • 最近在看html基础,好吧,写点笔记,比较low见谅,反正我自己看懂就行了 CSS基础 1、css简介 casca...
    小龙是只猫阅读 3,669评论 0 1