美文网首页
第一节: CSS术语和文档

第一节: CSS术语和文档

作者: Chef_Front | 来源:发表于2017-09-09 19:14 被阅读0次

CSS可以缩减文件大小

术语


  • 元素:文档结构的基础,如p,table,span,a,div
  • 替换元素与非替换元素: 替换元素指用来替换元素内容的部分并非由文档内容直接表示,如img,input。非替换元素,大多数元素属于非替换元素,其内容由用户代理(浏览器)在元素本身生成的框中显示。
  • 元素显示角色: 块级元素,会填充其父元素的内容区,旁边不能有其他元素,相当于一个“分隔符”,如p,div。行内元素在一个文本行内生成元素框。

Link标记


Link 将样式表链接到文档中。首先先介绍一下Link属性:

  • rel(代表relation):代表“关系 ”。此属性值设置为 alternate stylesheet 时,可定义候选样式表, 当用户选择这个样式表时才会用于文档表现。为候选样式表指定相同的title时就可以把它们分 组在一起。
  • type:总是设置为“text/css”,描述了使用link标记加载的数据类型
  • href: 样式表的URL,可以是绝对路径,也可以是相对URL
  • media: all 表示应用于所有表现媒体,screen:屏幕媒体中,print:为视力正常的用户打印文档时使用,也会在打印预览时使用。以上三种是得到最广泛支持的类型。
  • title: 如果为一个 rel 为 stylesheet 的样式表link指定了标题 title,表示该样式表要作为首选样式表。如果没有指定 title,那么该样式表就将作为一个永久样式表,始终用于文档的显示。

style元素:此元素中包含样式表,在文档中单独出现。

@import指令


与link类似,@import用于指示web浏览器加载一个外部样式表,@import 出现在 style 容器中,必须放在其他 CSS 规则前。@import 无法指定候选样式表,它也可以限制所导入的样式表应用于一种或多种媒体。

@import url(sheet.css);

如果一个样式表需要使用其他外部样式表中的样式,便可以使用 @import@import 中的 URL参数可以是相对也可以是绝对路径。

向后可访问性


如果一个浏览器无法识别<style></style> 就会将其统统忽略,而里面标记的声明不一定会被忽略,而被显示在页面上面,为了解决这个问题,建议将声明包含在一个注释标记中,如下:

<style type="text/css"><!--
@import url(sheet.css);
h1{color:red}
--></style>

CSS注释:CSS注释不可以嵌套

内联样式


如果只是想为单个元素指定一些样式,可以使用 HTML 的 style 属性。除了在 body 外部出现的标记(例如:head或title),style属性可以与任何其他 HTML 标记关联。一个内联 style 属性中只能放一个声明块,不能放整个样式表。通常并不推荐使用 style 属性。

相关文章

  • 第一节: CSS术语和文档

    CSS可以缩减文件大小 术语 元素:文档结构的基础,如p,table,span,a,div 替换元素与非替换元素:...

  • CSS盒模型

    第一节 盒模型 1、盒模型 概念:如果CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩...

  • 2 css术语和概念

    css的值类型 1 . 整数类型:z-index2 .数值:light-height:1.53 .百分比:widt...

  • IdentityServer4 第一部分第2章 术语

    第2章 术语 规范、文档和对象模型等都使用特定的术语来表述。 2.1 IdentityServer Identit...

  • 服务网格-Envoy学习笔记:Envoy架构总览(1)

    术语 在我们深入了解架构文档之前,我们需要了解一些术语。有些定义在行业内部可能有争议,不过在Envoy的文档和代码...

  • CSS盒子模型详解

    所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 css盒子模型 ...

  • 彻底搞懂盒子模型

    一、简述 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 CSS...

  • CSS定位与浮动

    CSS定位机制 CSS 有三种定位机制 普通流(文档流)、浮动和绝对定位。浮动和绝对定位可以让一个元素脱离文档流。...

  • Web之旅—— 了解CSS(6)

    一、CSS用来做什么? CSS(层叠样式表)可以控制HTML文档的展现。 二、怎么定义和使用? CSS有属性和值,...

  • 初识 JavaScript

    CSS和JS在网页中的放置顺序 css放在文档元素的前面包含在 中,js放在文档元素的后面在 里且在尾部。 白屏和...

网友评论

      本文标题:第一节: CSS术语和文档

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