您当前位置:新疆网站建设-新疆网站制作-新疆二域设计 >技术教程 >前端教程 >CSS教程 >浏览信息

CSS3中新出现的技术元素

作者:未知  来源:不详  发布时间:2015/12/12 16:18:21

CSS媒体查询

媒体查询 包 含了一个媒体类型和至少一个使用如宽度、高 度和颜色等媒体属性来限制样式表范围的表达式。CSS3加 入的媒体查询使得无需修改内容便可以使样式应用于某些特定的不同大小的设备。即响应式布局。

当媒体查询为真时,相 关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假,<link>标 签上带有媒体查询的样式表 仍将被下载 (只不过不会被应用)。

在不使用 not 或 only 操作符的情况下,媒体类型是可选的,默认为 all 。

媒 体查询是大小写不敏感的。包 含未知媒体类型的查询通常返回假。

逻辑操作符

操作符 not,and 和 only 可 以用来构建复杂的媒体查询。

  • and 操作符用来把多个 媒体属性 组合起来,合 并到同一条媒体查询中。只 有当每个属性都为真时,这 条查询的结果才为真。

  • not 操 作符用来对一条媒体查询的结果进行取反。not 关 键字仅能应用于整个查询,而 不能单独应用于一个独立的查询。

  • only 操 作符表示仅在媒体查询匹配成功的情况下应用指定样式。可 以通过它防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式。

若使用了 not 或 only 操作符,必 须明确指定一个媒体类型。

你 也可以将多个媒体查询以逗号分隔放在一起;只 要其中任何一个为真,整 个媒体语句就返回真。相当于 or 操作符。

大多数媒体属性带有“min-”和“max-”前缀,用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符。如 果你未向媒体属性指定一个值,并 且该特性的实际值不为零,则 该表达式被解析为真。

媒体属性

<!-- link元素中的CSS媒体查询 --><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /><!-- 样式表中的CSS媒体查询 --><style>@media (max-width: 600px) {  .facet_sidebar {    display: none;
  }}</style>
  • orientation 方向

  • portrait 竖屏

  • landscape 横屏

  • resolution 分辨率 指 定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的点数来表示。

  • tv 电视媒体

  • handheld 手持设备

  • monochrome 黑白 指定了一个黑白(灰度)设 备每个像素的比特数。如果是黑白设备,值为1。

  • color 能显示颜色的设备

  • min-color 每个颜色单元至少有n个比特

  • color-index 指 定了输出设备中颜色查询表中的条目数量。

  • min-color-index: 256 至少256个索引颜色的设备

  • aspect-ratio 宽高比 该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例。

  • device-aspect-ratio 设备宽高比

  • device-height

  • device-width

  • grid 判 断输出设备是网格设备还是位图设备。如 果设备是基于网格的(例 如电传打字机终端或只能显示一种字形的电话),该值为1,否则为0。

  • height 媒 体属性描述了输出设备渲染区域(如 可视区域的高度或打印机纸盒的高度)的高度。

  • width

  • scan 扫描

  • progressive 以 顺序方式扫描的电视机

  • interlace

CSS计数器

本质上CSS计数器是由CSS维护的变量,这些变量可能根据CSS规 则增加以跟踪使用次数。这 允许你根据文档位置来调整内容表现。 CSS计数器是CSS2.1中 自动计数编号部分的实现。

计数器的值通过使用counter-reset 和 counter-increment 操作,在 content 上应用 counter() 或 counters()函数来显示在页面上。

使用CSS计数器之前,必须被重置一个值,默认是0。使用 counter() 函 数来给元素增加计数器。

body {  counter-reset: section;           /* 重置计数器成0 */}h3:before {  counter-increment: section;      /* 增加计数器值 */
  content: "Section " counter(section) ": "; /* 显示计数器 */}

计数器嵌套

使用 counters() 函数,在 不同级别的嵌套计数器之间可以插入字符串。

ol {  counter-reset: section;                /* 为每个ol元
素创建新的计数器实例 */
  list-style-type: none;
}li:before {  counter-increment: section;            /* 只
增加计数器的当前实例 */
  content: counters(section, ".") " ";   /* 为
所有计数器实例增加以“.”分隔的值 */}

CSS变形

CSS transforms 属性

有 两个主要的属性被用来定义 CSS transforms:transform  transform-origin

  • transform-origin:指定原点的位置。默认值为元素的中心,可以被移动。很 多变形需要用到这个属性,比如旋转,缩放和倾斜,他 们都需要一个指定的点作为参数。

  • transform:指 定作用在元素上的变形。取 值为空格分隔的一系列变形的列表,他 们会像被组合操作请求一样被分别执行。

  • rotate 旋转。单位:deg,度

  • skewx 倾斜

3D 特有 CSS properties

  • 首 先你必须设置一个透视点(perspective)。透视值决定了 3D 实现的方式,元 素与观察者之间的距离越远,他们就会越小。

  • 通过 perspective-origin 属 性设置观察者的位置。默 认透视值为观察者的中心,但 是这并不总是适当的。

CSS 弹性盒

当 页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲,弹性盒改进了块模型,既不使用浮动,也 不会在弹性盒容器与其内容之间合并外边距。

许 多设计师会发现弹性盒容易上手。弹 性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由 于子元素的显示顺序和它们在代码中 的顺序是独立的,通过使用弹性盒,定 位子元素变得更加简单,复 杂的布局也能够使用更清晰的代码更简单的实现。独 立显示被设定成只针对可见元素,而 不是基于代码的声明和导航顺序。

弹性盒布局的定义中,它 可以自动调整子元素的高和宽,来 很好的填充任何显示设备中的可用显示空间,收 缩内容防止内容溢出。

不 同于块级元素基于垂直方向布局以及行内元素基于水平方向布局,弹 性盒布局的算法是方向无关的。

虽 然块级元素布局在页面中工作良好,但 是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。

不同于将要出现的网格布局针 对目标为大比例布局,弹 性盒布局更适用于应用组件和小比例布局。这两种都是CSS工 作组为了能与不同用户代理、不 同书写模式和其他弹性需要进行协作而做出的努力。

概念

  • 弹性容器:弹性子元素的父元素。 通过设置display 属性的值为flex 或 inline-flex将其定义为弹性容器。

  • flex 值 表示弹性容器为块级。inline-flex 值 表示弹性容器为原子行级元素 。

  • 弹性子元素:弹 性容器的每一个子元素变为一个弹性子元素。弹 性容器直接包含的文本变为匿名的弹性子元素。

  • 轴:每 个弹性盒布局以两个轴来排列。弹 性子元素沿着主轴依次相互排列。侧轴垂直于主轴。

  • 属性 flex-direction 定义主轴方向。

  • 属性 justify-content 定 义了弹性子元素如何在当前线上沿着主轴排列。

  • 属性 align-items 定 义了弹性子元素如何在当前线上沿着侧轴排列。

  • 属性 align-self 覆盖父元素的align-items属性,定 义了单独的弹性子元素如何沿着侧轴排列。

  • 方向:弹性容器的主轴开始、主轴结束和侧轴开始、侧 轴结束边缘代表了弹性子元素排列的起始和结束位置。它们具体取决于由writing-mode(从左到右、从右到左等等)属 性建立的向量中的主轴和侧轴位置。

  • 属性 order 将元素依次分组,并决定谁先出现。

  • 属性 flex-flow 是属性 flex-direction 和 flex-wrap 的简写,用于排列弹性子元素。

  • 行:弹性子元素根据 flex-wrap 属性控制的侧轴方向(在 这个方向上可以建立垂直的新线),既 可以是一行也可以是多行排列。

  • 尺寸:弹 性子元素宽高可相应地等价于主尺寸和侧尺寸,它 们都分别取决于弹性容器的主轴和侧轴。

  • min-height 和 min-width 属 性的初始值为新增关键字 auto。

  • 属性 flex 是 flex-basis,flex-grow 和 flex-shrink 的缩写,代 表弹性子元素的伸缩性。

包 含在弹性容器内的文本自动成为匿名的弹性子元素。然而,只 包含空白的弹性子元素不会被渲染,就好像它被设定为 display:none 一样。

相 邻的弹性子元素不会发生外边距合并。使用 auto 的 外边距会在垂直和水平方向上带来额外的空间,这 种性质可用于对齐或分隔临近的弹性子元素。

为 了保证弹性子元素有一个合理的默认最小尺寸,使用 min-width:auto  min-height:auto。对于弹性子元素,auto属 性计算其最小的宽高不小于其内容的尺寸,保 证在渲染时其大小足够容纳内容。

弹 性盒子的对齐会进行真正的居中,不像CSS的其他居中方法。这 意味着即使弹性容器溢出,子元素仍然保持居中。有 些时候这可能有问题,然 而即使溢出了页面的 上沿,或左边沿(在 从左到右的语言如英语;这 个问题在从右到左的语言中发生在右边沿,如阿拉伯文),因 为你不能滚动到那里,即使那里有内容!

说 起虽然元素的显示顺序与源代码中的顺序无关,这 种无关仅对显示效果有效,不 包括语音顺序和基于源代码的导航。即使是 order 也 不影响语言和导航序列。因 此开发者必须小心排列源代码中的元素以免破坏文档的可访问性。

弹性盒子的属性

因 为弹性盒子使用一种不同的布局逻辑,一 些属性会在弹性容器上无效。

  • 多列模块 中的column-*属 性对弹性子元素无效。

  • float 和 clear 对弹性子元素无效。使用 float 会导致 display 属性计算为 block.

  • vertical-align 对 弹性子元素的对齐无效。

亲自动手 Try it!

注 意不是所有的浏览器都支持不带前缀的属性名。为 了在大多数现代浏览器中应用这种特性,每个属性必须写三次: 一次用 -moz 前缀,一次用 -webkit 前缀,一次不使用前缀。

@规则

@规则 是一个CSS 语句,以 '@' (U+0040 COMMERCIAL AT)符号开头,后面紧跟一个标示符, 如 果它在声明块外面则以第一个分号';' (U+003B SEMICOLON)结束,否 则以第一个声明块结束。

下面是一些 @规则, 由它们的标示符指定, 每 种规则都有不同的语法:

  • @charset, 定 义样式表使用的字符集.

  • @import, 告诉 CSS 引 擎引入一个外部样式表.

  • @namespace, 告诉 CSS 引擎必须考虑XML命名空间。

  • 嵌套@规则, 是嵌套语句的子集,不 仅可以作为样式表里的一个语句,也 可以用在条件规则组里:

  • @media, 如 果满足媒介查询的条件则条件规则组里的规则生效。

  • @page, 描 述打印文档时布局的变化.

  • @font-face, 描 述将下载的外部的字体。

  • @keyframes, 描述 CSS 动画的中间步骤 .

  • @supports, 如 果满足给定条件则条件规则组里的规则生效。

  • @document, 如 果文档样式表满足给定条件则条件规则组里的规则生效。(推延至 CSS Level 4 规范)

条件规则组

就像属性值那样,每条@规则都有不同的语法. 不过一些@规则可以归为一类: 条件规则组. 这 些语句使用相同的语法. 它们都嵌套语句,或者是规则或者是@规则。

它们都表达: 它们所指的条件 (类型不同) 总等效于 true 或者 false,如果为 true 那 么它们里面的语句生效。

条件规则组由CSS Conditionals Level 3 定义:

  • @media,

  • @supports,

  • @document. (推迟至 CSS Level 4 规范)

既 然条件规则组可以嵌套语句, 那么嵌套层级不定。

关键字:
上一篇: 兼容IE6/IE7/IE8/FireFox的css hack
下一篇:css权重及优先级问题
0
友情链接:    6288彩票-首页   uc彩游戏---首页_欢迎您   下载app送18元彩金   阿里彩票_安全购彩   长江彩票