码迷，mamicode.com
首页 > Web开发 > 详细

css语法和规则

时间：2017-07-03 01:00:27      阅读：337      评论：0      收藏：0      [点我收藏+]

标签：xtu   top   input   form   pes   时间段   简写   htm   mon   

语法：

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

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8" />
    <title>!important_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
    .test{color:#f00!important;color:#000;}
    .test2{color:#f00!important;}
    .test2{color:#000;}

     

    语法：

    @charset <charset>;

    取值：

    <charset>：
    字符编码。如：@charset "utf-8";

    说明：

    在外部样式表文件内使用。指定该样式表使用的字符编码。
    • 该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。
    • 在外部css文件中写法如下：

      示例代码：

       

      语法：

      @font-face{font-family:name;src:<url>;sRules;}

      取值：

      <name>：
      字体名称
      <url>：
      使用绝对或相对地址指定OpenType字体
      <sRules>：
      样式表定义

      说明：

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

      兼容性：

      • 浅绿 = 支持
      • 红色 = 不支持
      • 墨绿 = 部分支持
      • 橙色 = 实验性质
      支持版本\类型IEFirefoxSafariChromeOpera
      版本 6-8 #1 4 5.1.7 13 11.5
      版本 9-10 #2
      1. IE8及更早浏览器只支持微软自有的.eot(Embedded Open Type)格式。
      2. IE9-10部分支持ttf和otf字体格式。

      示例：

      语法：

      @import <url> <media_query_list>

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

       

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

      <expression>：‘(‘<media_feature>[:<value>]?‘)‘

      取值：

      <url>：
      使用绝对或相对地址指定导入的外部样式表文件。可以是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);

      兼容性：

      • 浅绿 = 支持
      • 红色 = 不支持
      • 墨绿 = 部分支持
      • 橙色 = 实验性质
      支持版本\类型IEFirefoxSafariChromeOpera
      版本 6-7 #1 4 5.1.7 13 11.5
      版本 8 #2
      版本 9
      1. IE7及更早浏览器不支持@import指定媒体类型和媒体查询。
      2. IE8不支持@import指定媒体查询。

      示例：

       

      语法：

      @keyframes <identifier> ‘{‘ <keyframes-blocks> ‘}‘;

      <keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

       

      取值：

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

      说明：

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

        示例代码：

        @keyframes testanimations{
	from{opacity:1;}
	to{opacity:0;}
}

        其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。

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

        示例代码：

        @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，而都使用<percentage>：

        示例代码：

        @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。

      兼容性：

      • 浅绿 = 支持
      • 红色 = 不支持
      • 墨绿 = 部分支持
      • 橙色 = 实验性质
      支持版本\类型IEFirefoxSafariChromeOpera
      版本 6-9 4 5.1.7 13-23 11.5
      版本 10 5-18 12
      版本 16 12.1

      示例：

      语法：

      @media：<media_query_list>

       

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

       

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

      <expression>：‘(‘<media_feature>[:<value>]?‘)‘

      取值：

      <media_type>：
      指定设备类型。媒体类型包括：参阅媒体类型。(CSS2)
      <expression>：
      指定媒体查询使用的媒体特性。这类似于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){ … }

      兼容性(指定媒体类型)：

      • 浅绿 = 支持
      • 红色 = 不支持
      • 墨绿 = 部分支持
      • 橙色 = 实验性质
      支持版本\类型IEFirefoxSafariChromeOpera
      版本 6-8 #1 4 5.1.7 13 11.5
      版本 9
      1. IE8及更早浏览器不支持媒体查询。

      示例：

      语法：

      @page <label> <pseudo-classes>{ sRules }

      取值：

      <label>：
      页面标识符
      <pseudo-class>：
      打印伪类:first, :left, :right

      说明：

      设置页面容器的版式，方向，边空等。

      兼容性：

      • 浅绿 = 支持
      • 红色 = 不支持
      • 墨绿 = 部分支持
      • 橙色 = 实验性质
      支持版本\类型IEFirefoxSafariChromeOpera
      版本 6-7 4-6 5.1.7 13 11.5
      版本 8

      示例：

      语法：

      /* 这里是注释内容 */

      说明：

      用于注释CSS中的某些内容。

      兼容性：

      • 浅绿 = 支持
      • 红色 = 不支持
      • 墨绿 = 部分支持
      • 橙色 = 实验性质
      支持版本\类型IEFirefoxSafariChromeOpera
      版本 6 4 5.1.7 13 11.5

      示例：

css语法和规则

标签：xtu   top   input   form   pes   时间段   简写   htm   mon   

原文地址：http://www.cnblogs.com/waitingforbb/p/7107879.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！