第一篇文章:@用法小结
这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下
at-rule是一个声明,为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么。这是一个通用的语法,尽管每个at-rule有其它语法变体。
常规规则
常规规则遵循下面的语法:
代码如下:
@charset
这个规则定义了浏览器使用的字符集,如果样式表包含非ASCII characters (e.g:UTF-8)。注意,被放在HTTP头部的字符集将会覆盖@charset规则
代码如下:
@import
这个规则指示请求样式表,在这一行,如果内容是正确的,就会引入一个外部的CSS文件。常用格式为@import url(CSS文件路径地址);[写在html的style标签里或者直接写在css文件里]
代码如下:
虽然流行的CSS预处理器都支持@import,但是应该指出的是,它们的工作原理不同于原生的CSS:预处理器会抓取CSS文件并将它们处理成一个CSS文件,对原生CSS,每一个@import都是一个独立的HTPP请求。
@namespace
对于将CSS应用在XML HTML(XHTML),这个规则是非常有用的,因为XHTML元素能在CSS中被作为一个选择器使用。
代码如下:
@namespace url(http://www.w3.org/1999/xhtml);
/* Namespace for SVG embedded in XHTML */
@namespace svg url(http://www.w3.org/2000/svg);
嵌套规则
嵌套规则包含了额外的子集声明,其中一些声明只能用于特定情况。
代码如下:
/* Nested Statements */
}
@document
这个规则为样式表指定了条件:只能应用于特定页面。举个粟子,我们提供一个URL,然后为这个特定的页面自定义样式,在其他页面中,这些样式会被忽略。
代码如下:
/* Rules for a specific page */
url(http://css-tricks.com/),
/* Rules for pages with a URL that begin with... */
url-prefix(http://css-tricks.com/snippets/),
/* Rules for any page hosted on a domain */
domain(css-tricks.com),
/* Rules for all secure pages */
regexp("https:.*")
{
/* Start styling */
body { font-family: Comic Sans; }
}
@font-face
这个规则允许在web页面上加载自定义字体,对自定义字体有不同程度的支持,但是这个规则接受语句创建和提供这些字体。
代码如下:
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}
@keyframes
在诸多CSS属性中,这个规则是关键帧 动画的基础,并允许我们标记动画开始和结束的标志。
代码如下:
0% {
}
100% {
background-color: #ff4136;
}
}
@media
这个规则包含条件声明,可用于为特定屏幕指定样式,这些声明可以包含屏幕大小,在适屏样式中会很有用.
代码如下:
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.module { width: 100%; }
}
或者只在文档打印时运用样式
代码如下:
}
@page
这个规则为将要打印的单独页面定义样式。特别的是,它能为页面伪元素设置外边距::first、:left和:right
代码如下:
margin: 1in;
}
@supports
这个规则可测试浏览器知否支持某个特性/功能,如果满足条件,将会为这些元素应用特定样式。有点像Modernizr,但确实是CSS属性。
代码如下:
@supports (display: flex) {
.module { display: flex; }
}
/* Check multiple conditions */
@supports (display: flex) and (-webkit-appearance: checkbox) {
.module { display: flex; }
}
总结
at-rule可以使CSS做一些疯狂有趣的事情。尽管文章中的示例很基础,但是可以看到,对于特定的条件,它们是如何使用样式的,从而创建匹配特定场景的用户体验和交互。
第二篇文章:@media的用法详解
CSS 语法
CSS-Code;
}
你也可以针对不同的媒体使用不同 stylesheets :
媒体类型
值 | 描述 |
---|---|
all | 用于所有设备 |
aural | 已废弃。用于语音和声音合成器 |
braille | 已废弃。 应用于盲文触摸式反馈设备 |
embossed | 已废弃。 用于打印的盲人印刷设备 |
handheld | 已废弃。 用于掌上设备或更小的装置,如PDA和小型电话 |
用于打印机和打印预览 | |
projection | 已废弃。 用于投影设备 |
screen | 用于电脑屏幕,平板电脑,智能手机等。 |
speech | 应用于屏幕阅读器等发声设备 |
tty | 已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备 |
tv | 已废弃。 用于电视和网络电视 |
媒体功能
值 | 描述 |
---|---|
aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0 |
color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 |
device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
device-height | 定义输出设备的屏幕可见高度。 |
device-width | 定义输出设备的屏幕可见宽度。 |
grid | 用来查询输出设备是否使用栅格或点阵。 |
height | 定义输出设备中的页面可见区域高度。 |
max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-color | 定义输出设备每一组彩色原件的最大个数。 |
max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-device-height | 定义输出设备的屏幕可见的最大高度。 |
max-device-width | 定义输出设备的屏幕最大可见宽度。 |
max-height | 定义输出设备中的页面最大可见区域高度。 |
max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
max-resolution | 定义设备的最大分辨率。 |
max-width | 定义输出设备中的页面最大可见区域宽度。 |
min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
min-color | 定义输出设备每一组彩色原件的最小个数。 |
min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
min-device-width | 定义输出设备的屏幕最小可见宽度。 |
min-device-height | 定义输出设备的屏幕的最小可见高度。 |
min-height | 定义输出设备中的页面最小可见区域高度。 |
min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
min-resolution | 定义设备的最小分辨率。 |
min-width | 定义输出设备中的页面最小可见区域宽度。 |
monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0 |
orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
resolution | 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm |
scan | 定义电视类设备的扫描工序。 |
width | 定义输出设备中的页面可见区域宽度。 |
响应式web设计之CSS3 Media Queries
开始研究响应式web设计,CSS3 Media Queries是入门。
Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。
那么,Media Queries是如何工作的?
两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件:
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
意思是当屏幕的宽度大于等于400px的时候,应用styleA.css
在media属性里:
- screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
- and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
- (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。完整的特性参看 相关的Media features部分
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
意思是当屏幕的宽度大于600小于800时,应用styleB.css
其它属性可看这里:http://www.swordair.com/blog/2010/08/431/
另一种方式,即是直接写在<style>标签里:
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ .class { background: #ccc; } }
写法是前面加@media,其它跟link里的media属性相同
其实基本上就是样式覆盖~,判断设备,然后引用不同的样式文件覆盖。
要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。
补充:media query中的not only all等关键字
今天在群里一群友问起 @media only screen and (min-width: 320px) 中only是什么意思,查了些资料。
not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)、
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。
all: 所有设备,这个应该经常看到
还有其它一些:
media_type |
设备类型说明 |
all |
所有设备 |
aural |
听觉设备 |
braille |
点字触觉设备 |
handled |
便携设备,如手机、平板电脑 |
|
打印预览图等 |
projection |
投影设备 |
screen |
显示器、笔记本、移动端等设备 |
tty |
如打字机或终端等设备 |
tv |
电视机等设备类型 |
embossed |
盲文打印机 |
相关资料扩展:http://book.51cto.com/art/201204/328362.htm
http://www.w3cplus.com/content/css3-media-queries
http://www.w3.org/TR/CSS2/media.html#media-types
----------------------------------华丽的分割线-----------------------------------------------------------
以下是demo
一个三栏布局的,在不同的尺寸下,变为两栏,再变为一栏~
代码:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>css3-media-queries-demo</title> <style> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding: 0; margin: 0; } .content{ zoom:1; } .content:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .leftBox, .rightBox{ float: left; width: 20%; height: 500px; margin: 5px; background: #ffccf7; display: inline; -webkit-transition: width 1s ease; -moz-transition: width 1s ease; -o-transition: width 1s ease; -ms-transition: width 2s ease; transition: width 1s ease; } .middleBox{ float: left; width: 50%; height: 800px; margin: 5px; background: #b1fffc; display: inline; -webkit-transition: width 1s ease; -moz-transition: width 1s ease; -o-transition: width 1s ease; -ms-transition: width 1s ease; transition: width 1s ease; } .rightBox{ background: #fffab1; } @media only screen and (min-width: 1024px){ .content{ width: 1000px; margin: auto } } @media only screen and (min-width: 400px) and (max-width: 1024px){ .rightBox{ width: 0; } .leftBox{ width: 30%} .middleBox{ width: 65%} } @media only screen and (max-width: 400px){ .leftBox, .rightBox, .middleBox{ width: 98%; height: 200px; } } </style> </head> <body> <div class="content"> <div class="leftBox"></div> <div class="middleBox"></div> <div class="rightBox"></div> </div> </body> </html>
参考文章:http://www.swordair.com/blog/2010/08/431/
http://webdesignerwall.com/tutorials/css3-media-queries
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html