zoukankan      html  css  js  c++  java

  • css语法和规则

    语法：

    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-800px);
@import url(example.css) screen and (800px),(color);
@import url(example.css) screen and (min-device-500px) and (max-device-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-960px。(CSS3)

        说明：

        指定样式表规则用于指定的媒体类型和查询条件。
        • IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。

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

          示例代码：

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

        • 列举几种使用方式：

          @media all and (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

        示例：
  • 相关阅读:
    模拟100 题解
    模拟99 题解
    模拟98 题解
    模拟97 题解
    模拟96 题解
    模拟95 题解
    模拟94 题解
    模拟93 题解
    模拟92 题解
    Django-- 多数据库联用
  • 原文地址：https://www.cnblogs.com/waitingforbb/p/7107879.html
Copyright © 2011-2022 走看看