css规则

今天看了有关css的文章，虽然现在用css经常用，但有些东西还是值的自己记录下的，这里简单列举下

css规则

/*1. @charset用于定义样式表中使用的字符编码。它必须写在样式表的最开头且前面不可有别的字符。 */

@charset "UTF-8";

 

/* 2.@import用于导入外部CSS样式表文件。 */

@import '1.css';

@import 'custom.css';

@import url("fineprint.css") print;

 

/* 3.@namespace是用来定义使用在CSS样式表中的XML命名空间的@规则。 */

@namespace url(http://www.w3.org/1999/xhtml);

@namespace svg url(http://www.w3.org/2000/svg);

 

/* 4.@media用于定义在一个或多个设备类型、具体特点和环境的媒体查询来应用样式。 */

@media screen and (min-width: 900px) {

h1 {

color:red;

font-size:14px;

}

}

 

/* 5.@page用于在打印文档时修改某些CSS属性。@page规则只能修改margin、orphans、widow 和 page breaks of the document，对其他属性的修改是无效的。 */

@page {

size: 10in 20in;

margin: 10% 20%;

}

 

/* 6.@keyframs通过定义动画序列中的关键帧来控制CSS动画不同步骤的状态。 */

@keyframes slidein {

from {

margin-left: 100%;

width: 300%;

}

 

to {

margin-left: 0%;

width: 100%;

}

}

 

/* 7.@supports用来检测规则组的规则是否生效。规则与@media类似 */

@supports (display: flex) {

div {

display: flex;

}

}

 

/* 8.@viewport用于设置视口（viewport）的特性。 */

@viewport {

    min-width: 640px;

  max-width: 800px;

}

 

@viewport {

zoom: 0.75;

min-zoom: 0.5;

max-zoom: 0.9;

}

 

@viewport {

orientation: landscape;

}

 

/* 9.@font-face用于给网页指定文本字体。这个属性以前不知道， */

@font-face {

font-family: "Bitstream Vera Serif Bold";

src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");

}

body { font-family: "Bitstream Vera Serif Bold", serif }