css的新玩法，语法与规则

最新推荐文章于 2024-03-31 15:30:33 发布

一介青烟小生

最新推荐文章于 2024-03-31 15:30:33 发布

阅读量189

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/lu6545311/article/details/118864339

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css的新玩法，语法与规则

!important

语法：

Selector{sRule!important;}

说明：

提升指定样式规则的应用优先权。

IE6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖掉在同一条样式的后面的规则。请看下述代码：

示例代码：
```
div{color:#f00!important;color:#000;}
```
在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00
IE6及以下浏览器要使!important生效，可用以下代码：

示例代码：
```
div{color:#f00!important;}
div{color:#000;}
```
在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00

兼容性：

支持版本\类型	IE	Firefox	Safari	Chrome	Opera
版本	6 不支持	4	5.1。7	13	11.5
版本	7

@charset

语法：

**@charset** <charset>;

取值：

：字符编码。如：@charset “utf-8”;

说明：

在外部样式表文件内使用。指定该样式表使用的字符编码。

该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。
在外部css文件中写法如下：

示例代码：
```
@charset "utf-8";
body{sRules}
div{sRules}
...
```

兼容性：

支持版本\类型	IE	Firefox	Safari	Chrome	Opera
版本	6	4	5.1.7	13	11.5

@font-face

语法：

@font-face{font-family:name;src:[url];sRules;}

取值：

：

字体名称
[url]：

使用绝对或相对地址指定OpenType字体
：

样式表定义

说明：

设置嵌入HTML文档的字体。

通常使用.ttf(TrueType)和.otf(OpenType)两种字体格式。
嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
微软的IE5已经是开始支持这个属性，但是只支持微软自有的.eot(Embedded Open Type)格式，而其他浏览器直到现在都没有支持这一字体格式。Safari从3.1开始已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。

兼容性：

支持版本\类型	IE	Firefox	Safari	Chrome	Opera
版本	6-8 不支持	4	5.1.7	13	11.5
版本	9-10 不支持

IE8及更早浏览器只支持微软自有的.eot(Embedded Open Type)格式。
IE9-10部分支持ttf和otf字体格式。

@import

语法：

@import <media_query_list>

<media_query_list>：[<media_query>[’,’ <media_query>]*]?

<media_query>：[only | not]? <media_type> [and ]* | [and ]*

：’(’<media_feature>[:]?’)’

取值：

：使用绝对或相对地址指定导入的外部样式表文件。可以是url(url)或者直接是一个url
<media_query_list>：指定媒体类型和查询条件。

说明：

指定导入的外部样式表及目标媒体。

该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。
IE使用@import无法引入超过35条的样式表。
使用url(url)和直接使用url需要注意的地方：

示例代码：
```
@import url("global.css");
@import url(global.css);
@import "global.css";
```
以上3种方式都有效。当使用url(url)的方式时，包住路径的引号可有可无；当直接使用url时，包住路径的引号必须保留。

指定媒体查询：

示例代码：

@import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);

兼容性：

支持版本\类型	IE	Firefox	Safari	Chrome	Opera
版本	6-7 不支持	4	5.1.7	13	11.5
版本	8 不支持
版本	9

IE7及更早浏览器不支持@import指定媒体类型和媒体查询。
IE8不支持@import指定媒体查询。

@keyframes

语法：

@keyframes ‘{’ ‘}’;

：[ [ from | to | ]{ sRules } ] [ [ , from | to | ]{ sRules } ]*

取值：

： identifier定义一个动画名称
：定义动画在每个阶段的样式，即帧动画。

说明：

指定动画名称和动画效果。

@keyframes定义的动画名称用来被animation-name所使用。
定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：

示例代码：
```
@keyframes testanimations{
	from{opacity:1;}
	to{opacity:0;}
}
```
其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。

如果复杂的动画，可以混合去设置某个时间段内的任意时间点的样式：

示例代码：

@keyframes testanimations{
	from{transform:translate(0,0);}
	20%{transform:translate(20,20);}
	40%{transform:translate(40,0);}
	60%{transform:translate(60,20);}
	80%{transform:translate(80,0);}
	to{transform:translate(100,20);}
}

当然，也可以不适用关键字from和to，而都使用

示例代码：

@keyframes testanimations{
	0%{transform:translate(0,0);}
	20%{transform:translate(20,20);}
	40%{transform:translate(40,0);}
	60%{transform:translate(60,20);}
	80%{transform:translate(80,0);}
	100%{transform:translate(100,20);}
}

注意，这里的0%不能简写成0。

@media

语法：

@media：<media_query_list>

<media_query_list>：[<media_query>[’,’ <media_query>]*]?

<media_query>：[only | not]? <media_type> [and ]* | [and ]*

：’(’<media_feature>[:]?’)’

取值：

<media_type>：指定设备类型。媒体类型包括：参阅媒体类型。(CSS2)
：指定媒体查询使用的媒体特性。这类似于CSS属性，如：max-width:960px。(CSS3)

说明：

指定样式表规则用于指定的媒体类型和查询条件。

IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。

媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。

示例代码：

@media screen and (width:800px){ … }
@import url(example.css) screen and (width:800px);
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>

列举几种使用方式：

@media all and (width:1024px){
	body{color:#f00;}
}
@media all and (device-height:800px){ … }
@media all and (orientation:landscape){ … }
@media all and (device-aspect-ratio:16/10){ … }
@media all and (min-color:1){ … }
@media all and (monochrome:0){ … }
@media all and (grid:0){ … }