css学习笔记 2019.5.30

@charset:

@charset 'utf-8'

使用UTF-8编码唯一的好处是，国外的用户如果使用Windows XP英文版，浏览UTF-8编码的任何网页，无论是中文、还是日文、韩文、阿拉伯文，都可以正常显示，UTF-8是世界通用的语言编码，而如果用Windows XP英文版的IE6.0浏览gb2312语言编码的网页，则会提示是否安装语言包。因此，可能会失去很多的国外浏览者。使用gb2312编码的好处是，因为程序产生的网页文本使用ANSI编码格式，会比UTF-8文本编码节省一些体积，访问速度会稍微快一点点。
【注意】
使用UTF-8编码，有2个要注意：

【一】是网页的meta部分，必须有这句：<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">，

【二】是网页的文本格式，必须保存为UTF-8格式，方法是用记事本打开网页，点击“文件→另存为”，在最后的Encoding，默认是ANSI，改为UTF-8
文件也存为utf-8格式。

@import:

用以引入一个css文件,如

@import "mystyle.css";
@import url("mystyle.css");

@media：

让我想起了sql 语句，and,not,only后面搭配媒体类型或媒体功能，媒体类型和媒体功能可以直接放到@media 后面，条件默认为only

@media only screen and (max-width:560px){
    color:black
}

@page:

@page 用于分页媒体访问网页的表现设置，emmm，网上相关资料好少，暂时搁置

@counter-style

兼容性差到爆,告辞

@keyframes

定义动画关键帧,可以使用百分比或from to作为关键帧选择器

@keyframes mymove{
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
}

@support

判断浏览器是否支持某样式,兼容性较差

@support (display: flex) {
  //如果当前浏览器支持flex布局就设置为flex布局
  #demo {
    display: flex;
  }    
}

@ namespace

用于跟 XML 命名空间配合的一个规则,emmm,一脸懵逼，暂时搁置

@viewport

设置视口，内容与html视口基本一致