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(飘零雾雨), [email protected], 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)两种字体做为自定义字体了。

      兼容性：

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

      示例：

      <!DOCTYPE html>
      <html lang="zh-cn">
      <head>
      <meta charset="utf-8" />
      <title>@font-face_CSS参考手册_web前端开发参考手册系列</title>
      <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
      <style>
      @font-face{
      font-family:YH;
      src:url(http://domain/fonts/MSYH.TTF);
      }
      body{font-family:‘YH‘;}
      </style>
      </head>
      <body>
      <div>如果你的机器没有安装微软雅黑Microsoft YaHei，可以玩玩看。如果你用的是老版本IE，很遗憾你得找找看.eot格式的该字体</div>
      </body>
      </html>

      语法：

      @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);

      兼容性：

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

      示例：

      <!DOCTYPE html>
      <html lang="zh-cn">
      <head>
      <meta charset="utf-8" />
      <title>@import_CSS参考手册_web前端开发参考手册系列</title>
      <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
      <style>
      @import url("style.css") screen, print;
      </style>
      </head>
      <body>

      </body>
      </html>

      语法：

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

      兼容性：

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

      示例：

      <!DOCTYPE html>
      <html lang="zh-cn">
      <head>
      <meta charset="utf-8" />
      <title>@keyframes_CSS参考手册_web前端开发参考手册系列</title>
      <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
      <style>
      #sport{position:relative;width:500px;height:400px;border:1px solid #ddd;}
      #staff{position:absolute;z-index:3;bottom:10px;left:10px;overflow:hidden;width:180px;height:8px;border-radius:3px;background:#ddd;line-height:20;
      -moz-animation:staff 3s linear;
      -webkit-animation:staff 3s linear;
      -o-animation:staff 3s linear;
      -ms-animation:staff 3s linear;
      animation:staff 3s linear;
      }
      #ball{position:absolute;z-index:3;bottom:20px;left:90px;overflow:hidden;width:30px;height:30px;border-radius:15px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E);line-height:20;
      -moz-animation:ball 3s linear;
      -webkit-animation:ball 3s linear;
      -o-animation:ball 3s linear;
      -ms-animation:ball 3s linear;
      animation:ball 3s linear;
      }
      @-moz-keyframes ball{
      0%{-moz-transform:translate(0,0);}
      5%{-moz-transform:translate(-90px,-100px);}
      18%{-moz-transform:translate(0,-350px);}
      35%{-moz-transform:translate(200px,0);}
      46%{-moz-transform:translate(380px,-160px);}
      60%{-moz-transform:translate(250px,-350px);}
      78%{-moz-transform:translate(60px,0);}
      100%{-moz-transform:translate(0,0);}
      }
      @-webkit-keyframes ball{
      0%{-webkit-transform:translate(0,0);}
      5%{-webkit-transform:translate(-90px,-100px);}
      18%{-webkit-transform:translate(0,-350px);}
      35%{-webkit-transform:translate(200px,0);}
      46%{-webkit-transform:translate(380px,-160px);}
      60%{-webkit-transform:translate(250px,-350px);}
      78%{-webkit-transform:translate(60px,0);}
      100%{-webkit-transform:translate(0,0);}
      }
      @-o-keyframes ball{
      0%{-o-transform:translate(0,0);}
      5%{-o-transform:translate(-90px,-100px);}
      18%{-o-transform:translate(0,-350px);}
      35%{-o-transform:translate(200px,0);}
      46%{-o-transform:translate(380px,-160px);}
      60%{-o-transform:translate(250px,-350px);}
      78%{-o-transform:translate(60px,0);}
      100%{-o-transform:translate(0,0);}
      }
      @-ms-keyframes ball{
      0%{-ms-transform:translate(0,0);}
      5%{-ms-transform:translate(-90px,-100px);}
      18%{-ms-transform:translate(0,-350px);}
      35%{-ms-transform:translate(200px,0);}
      46%{-ms-transform:translate(380px,-160px);}
      60%{-ms-transform:translate(250px,-350px);}
      78%{-ms-transform:translate(60px,0);}
      100%{-ms-transform:translate(0,0);}
      }
      @keyframes ball{
      0%{transform:translate(0,0);}
      5%{transform:translate(-90px,-100px);}
      18%{transform:translate(0,-350px);}
      35%{transform:translate(200px,0);}
      46%{transform:translate(380px,-160px);}
      60%{transform:translate(250px,-350px);}
      78%{transform:translate(60px,0);}
      100%{transform:translate(0,0);}
      }
      @-moz-keyframes staff{
      0%{-moz-transform:translate(0,0);}
      6%{-moz-transform:translate(260px,0);}
      20%{-moz-transform:translate(300px,0);}
      30%{-moz-transform:translate(300px,0);}
      40%{-moz-transform:translate(200px,0);}
      65%{-moz-transform:translate(40px,0);}
      79%{-moz-transform:translate(0,0);}
      100%{-moz-transform:translate(0,0);}
      }
      @-webkit-keyframes staff{
      0%{-webkit-transform:translate(0,0);}
      6%{-webkit-transform:translate(260px,0);}
      20%{-webkit-transform:translate(300px,0);}
      30%{-webkit-transform:translate(300px,0);}
      40%{-webkit-transform:translate(200px,0);}
      65%{-webkit-transform:translate(40px,0);}
      79%{-webkit-transform:translate(0,0);}
      100%{-webkit-transform:translate(0,0);}
      }
      @-o-keyframes staff{
      0%{-o-transform:translate(0,0);}
      6%{-o-transform:translate(260px,0);}
      20%{-o-transform:translate(300px,0);}
      30%{-o-transform:translate(300px,0);}
      40%{-o-transform:translate(200px,0);}
      65%{-o-transform:translate(40px,0);}
      79%{-o-transform:translate(0,0);}
      100%{-o-transform:translate(0,0);}
      }
      @-ms-keyframes staff{
      0%{-ms-transform:translate(0,0);}
      6%{-ms-transform:translate(260px,0);}
      20%{-ms-transform:translate(300px,0);}
      30%{-ms-transform:translate(300px,0);}
      40%{-ms-transform:translate(200px,0);}
      65%{-ms-transform:translate(40px,0);}
      79%{-ms-transform:translate(0,0);}
      100%{-ms-transform:translate(0,0);}
      }
      @keyframes staff{
      0%{transform:translate(0,0);}
      6%{transform:translate(260px,0);}
      20%{transform:translate(300px,0);}
      30%{transform:translate(300px,0);}
      40%{transform:translate(200px,0);}
      65%{transform:translate(40px,0);}
      79%{transform:translate(0,0);}
      100%{transform:translate(0,0);}
      }
      </style>
      </head>
      <body>
      <div id="sport">
      <span id="ball">弹球</span>
      <span id="staff">滑杆</span>
      </div>
      </body>
      </html>

      语法：

      @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){ … }

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

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

      示例：

      <!DOCTYPE html>
      <html lang="zh-cn">
      <head>
      <meta charset="utf-8" />
      <title>@media_CSS参考手册_web前端开发参考手册系列</title>
      <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
      <style>
      .test,.test2{display:none;}
      /* 本条为CSS2部分，IE8及以下只支持本条 */
      @media screen{
      body{color:#f00;}
      }
      /* 下列为CSS3部分 */
      @media screen and (min-width:960px){
      body{background:#999;}
      }
      @media screen and (device-width:1024px){
      .test{display:block;}
      }
      @media screen and (width:1024px){
      .test2{display:block;}
      }
      </style>
      </head>
      <body>
      <div>Media Queries媒体查询</div>
      <div class="test">如果你的显示器水平分辨率为1024px的话将能看到本条规则的效果（取决于输出设备屏幕分辨率的大小，不随包括浏览器在内的窗体大小而改变）</div>
      <div class="test2">如果视口宽度为1024px的话将能看到本条规则的效果（随包括浏览器在内的窗体大小而改变）</div>
      </body>
      </html>

      语法：

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

      取值：

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

      说明：

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

      兼容性：

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

      示例：

      <!DOCTYPE html>
      <html lang="zh-cn">
      <head>
      <meta charset="utf-8" />
      <title>@page_CSS参考手册_web前端开发参考手册系列</title>
      <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
      <style>
      @page:first{margin:300px;}
      </style>
      </head>
      <body>
      <div>@page:first{margin:300px;}</div>
      </body>
      </html>

      语法：

      /* 这里是注释内容 */

      说明：

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

      兼容性：

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

      示例：

      <!DOCTYPE html>
      <html lang="zh-cn">
      <head>
      <meta charset="utf-8" />
      <title>comment_CSS参考手册_web前端开发参考手册系列</title>
      <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
      <style>
      .test{color:#f00;/*红色*/}
      </style>
      </head>
      <body>
      <div class="test">CSS中的注释语法：/* 注释的内容 */</div>
      </body>
      </html>

时间： 2024-10-18 08:14:12

css语法和规则的相关文章

CSS语法与用法小字典

前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格式都稍差些.方便日后自己查阅,方便自己同时也方便他人,多好的一件事啊,呵呵! CSS目录 一.       CSS简介... 4 1.    CSS的分类... 4 1.1      内嵌样式... 4 1.2      内部样式表... 4 1.3      外部样式表... 4 2.    样式

我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style type="text/css"> h1 {color:red; font-size:14px;} </style> </head> <body > <h1>使用Css让h1标签字体变红</h1> </body> &

CSS基础学习三：CSS语法

CSS语法分为基础语法和高级语法. 一CSS 基础语法 (1)CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明,请使用花括号来包围声明. selector {declaration1; declaration2; ... declarationN } 选择器通常是您需要改变样式的 HTML 元素.每条声明由一个属性和一个值组成.属性(property)是您希望设 置的样式属性(style attribute).每个属性有一个值.属性和值被冒号分开. selector {

1:CSS中一些@规则的用法小结 2: @media用法详解

第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule是一个声明,为CSS提供执行或怎么表现的指令.每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么.这是一个通用的语法,尽管每个at-rule有其它语法变体.常规规则 常规规则遵循下面的语法: 复制代码 代码如下: @[KEYWORD] (RULE); @charset

CSS语法

1.CSS语法规范总结 内联样式:有样式声明组成 <h1 style="background-color:silver;color:blue;">文本</h1> 样式表:有多个样式规则组成 每个样式规则有两部分:选择器和样式声明 2.CSS样式表特征 继承性 大多数CSS的样式规则可以被继承 层叠性 可以定义多个样式表 不冲突时,多个样式表中的样式可层叠为一个 优先级 样式定义冲突时,按照不同样式规则的优先级来应用样式 3.样式优先级 浏览器缺省设置 外部样式表

CSS自学笔记（2）:CSS语法

CSS的语法规则主要有两个分构成选择器和声明(声明问一条或者多条). selector {declaration1; declaration2; ... declarationN } 选择器(selctor)是指你要改变样式的html元素.选择器有很多种,常用的id选择器和类选择器. 声明(declaration)是一个属性和一个值组成(要注意书写). 属性(property)都有一个值,属性和其值用":"分开. selector {property: value} 上面CSS代码的基

前端开发-CSS 语法

CSS 语法 CSS 实例 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(property)是您希望设置的样式属性(style attribute).每个属性有一个值.属性和值被冒号分开. CSS声明总是以分号(;)结束,声明组以大括号({})括起来: p{ color:red; text-align:center; } 实例: <!DOCTYPE html> <html lang=

CSS 语法

CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.每条声明由一个属性和一个值组成.属性(property)是您希望设置的样式属性(style attribute).每个属性有一个值.属性和值被冒号分开. selector {property: value}eg:将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14素 h1 {color:red; font-size:14;} 提示:请使用花括号来包围声明. 原文地址:https://www.cnblogs.c

（1）css语法和基本知识

1.CSS全称为"层叠样式表",它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 注:使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体.字号或者颜色等. 2.css语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响. 声明:在英文大括号"{}"