CSS3中新出现的技术_html/css_WEB-ITnose
CSS媒体查询
媒体查询 包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的不同大小的设备。即响应式布局。
当媒体查询为真时,相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假,标签上带有媒体查询的样式表 仍将被下载 (只不过不会被应用)。
在不使用 not 或 only 操作符的情况下,媒体类型是可选的,默认为 all 。
媒体查询是大小写不敏感的。包含未知媒体类型的查询通常返回假。
逻辑操作符
操作符 not,and 和 only 可以用来构建复杂的媒体查询。
若使用了 not 或 only 操作符,必须明确指定一个媒体类型。
你也可以将多个媒体查询以逗号分隔放在一起;只要其中任何一个为真,整个媒体语句就返回真。相当于 or 操作符。
大多数媒体属性带有“min-”和“max-”前缀,用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“”字符。如果你未向媒体属性指定一个值,并且该特性的实际值不为零,则该表达式被解析为真。
媒体属性
Mozilla专有的媒体属性 LINK
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
3D 特有 CSS properties
CSS 弹性盒
当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲,弹性盒改进了块模型,既不使用浮动,也不会在弹性盒容器与其内容之间合并外边距。
许多设计师会发现弹性盒容易上手。弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中 的顺序是独立的,通过使用弹性盒,定位子元素变得更加简单,复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素,而不是基于代码的声明和导航顺序。
弹性盒布局的定义中,它可以自动调整子元素的高和宽,来很好的填充任何显示设备中的可用显示空间,收缩内容防止内容溢出。
不同于块级元素基于垂直方向布局以及行内元素基于水平方向布局,弹性盒布局的算法是方向无关的。
虽然块级元素布局在页面中工作良好,但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。
不同于将要出现的网格布局针对目标为大比例布局,弹性盒布局更适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要进行协作而做出的努力。
概念
包含在弹性容器内的文本自动成为匿名的弹性子元素。然而,只包含空白的弹性子元素不会被渲染,就好像它被设定为 display:none 一样。
相邻的弹性子元素不会发生外边距合并。使用 auto 的外边距会在垂直和水平方向上带来额外的空间,这种性质可用于对齐或分隔临近的弹性子元素。
为了保证弹性子元素有一个合理的默认最小尺寸,使用 min-width:auto 与 min-height:auto。对于弹性子元素,auto属性计算其最小的宽高不小于其内容的尺寸,保证在渲染时其大小足够容纳内容。
弹性盒子的对齐会进行真正的居中,不像CSS的其他居中方法。这意味着即使弹性容器溢出,子元素仍然保持居中。有些时候这可能有问题,然而即使溢出了页面的 上沿,或左边沿(在从左到右的语言如英语;这个问题在从右到左的语言中发生在右边沿,如阿拉伯文),因为你不能滚动到那里,即使那里有内容!
说起虽然元素的显示顺序与源代码中的顺序无关,这种无关仅对显示效果有效,不包括语音顺序和基于源代码的导航。即使是 order 也不影响语言和导航序列。因此开发者必须小心排列源代码中的元素以免破坏文档的可访问性。
弹性盒子的属性
因为弹性盒子使用一种不同的布局逻辑,一些属性会在弹性容器上无效。
亲自动手 Try it!
注意不是所有的浏览器都支持不带前缀的属性名。为了在大多数现代浏览器中应用这种特性,每个属性必须写三次: 一次用 -moz 前缀,一次用 -webkit 前缀,一次不使用前缀。
@规则@规则 是一个CSS 语句,以 '@' (U+0040 COMMERCIAL AT)符号开头,后面紧跟一个标示符, 如果它在声明块外面则以第一个分号';' (U+003B SEMICOLON)结束,否则以第一个声明块结束。
下面是一些 @规则, 由它们的标示符指定, 每种规则都有不同的语法:
条件规则组
就像属性值那样,每条@规则都有不同的语法. 不过一些@规则可以归为一类: 条件规则组. 这些语句使用相同的语法. 它们都嵌套语句,或者是规则或者是@规则。
它们都表达: 它们所指的条件 (类型不同) 总等效于 true 或者 false,如果为 true 那么它们里面的语句生效。
条件规则组由CSS Conditionals Level 3 定义:
既然条件规则组可以嵌套语句, 那么嵌套层级不定。
LINKS上一篇: SQL语句性能调整原则_MySQL
下一篇: php:对象继承和多态的实例
推荐阅读
-
css3中的content和实体_html/css_WEB-ITnose
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
攻城狮送女友的CSS3生日蛋糕_html/css_WEB-ITnose
-
css3中关于伪类的使用_html/css_WEB-ITnose
-
8套迷人精致的CSS3 3D按钮动画_html/css_WEB-ITnose
-
为什么连续2个div的margin 20 不会出现40?_html/css_WEB-ITnose
-
CSS3绘制圆角矩形的简单示例_html/css_WEB-ITnose
-
CSS3兼容IE的大杀器_html/css_WEB-ITnose