美文网首页
css在html中应用

css在html中应用

作者: 锋清杨 | 来源:发表于2018-08-20 17:22 被阅读0次

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

相关文章

  • css在html中应用

    HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表;2.使用style元素包含样式表;3....

  • Electron教程翻译5:创建UI

    在Electron应用中,我们使用HTML、CSS和JS来创建用户界面(User Interface, UI),因...

  • CSS 三种样式

    本节我们要学习一下 CSS 样式的几种形式,在实际应用中向 HTML 中引入 CSS 样式的方法有三种,分别是行内...

  • CSS 行内样式

    本节我们要学习一下 CSS 样式的几种形式,在实际应用中向 HTML 中引入 CSS 样式的方法有三种,分别是行内...

  • CSS基础2--简单应用

    应用CSS CSS编写在扩展名为.css的单独文件中,并利用HTML 的 元素引用 标记CSS文件 打开浏览器查看...

  • JS 语法

    CSS和JS在网页中的放置顺序是怎样的? CSS放置在HTML中的 元素内。 现代Web应用程序一般把全部Java...

  • vue hover绑定

    在计算属性中 在html中 在css中

  • HTML5及CSS3电商应用与开发课程

    HTML5及CSS3电商应用与开发课程: HTML5及CSS3电商应用与开发课程是北京中清研信息技术研究院开发的众...

  • css

    CSS样式规则 选择器 想要将CSS样式应用于特定的html元素,首先找到改目标元素在CSS中 执行这一任务的样式...

  • 2017-3.20 less

    导航栏 HTML: Less: CSS : 图片 HTML: Less: CSS : 在 LESS 中可以定义一些...

网友评论

      本文标题:css在html中应用

      本文链接:https://www.haomeiwen.com/subject/hliliftx.html