二级域名做非法网站,企业网站2000元,临沂网站域名,wordpress怎么加地图吗语法#xff1a; Selector{sRule!important;} 说明#xff1a; 提升指定样式规则的应用优先权。 IE6及以下浏览器有个比较显式的支持问题存在#xff0c;!important并不覆盖掉在同一条样式的后面的规则。请看下述代码#xff1a; 示例代码#xff1a; div{color:#f00!impo…语法 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 htmlhtml langzh-cnheadmeta charsetutf-8 /title!important_CSS参考手册_web前端开发参考手册系列/titlemeta nameauthor contentJoy Du(飘零雾雨), dooyoegmail.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 #145.1.71311.5版本9-10 #2IE8及更早浏览器只支持微软自有的.eot(Embedded Open Type)格式。IE9-10部分支持ttf和otf字体格式。 示例 !DOCTYPE html html langzh-cn head meta charsetutf-8 / titlefont-face_CSS参考手册_web前端开发参考手册系列/title meta nameauthor contentJoy Du(飘零雾雨), dooyoegmail.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)或者直接是一个urlmedia_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 #145.1.71311.5版本8 #2版本9IE7及更早浏览器不支持import指定媒体类型和媒体查询。IE8不支持import指定媒体查询。 示例 !DOCTYPE html html langzh-cn head meta charsetutf-8 / titleimport_CSS参考手册_web前端开发参考手册系列/title meta nameauthor contentJoy Du(飘零雾雨), dooyoegmail.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 } ]* 取值 identifieridentifier定义一个动画名称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-945.1.713-2311.5版本105-1812版本1612.1 示例 !DOCTYPE html html langzh-cn head meta charsetutf-8 / titlekeyframes_CSS参考手册_web前端开发参考手册系列/title meta nameauthor contentJoy Du(飘零雾雨), dooyoegmail.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 idsport span idball弹球/span span idstaff滑杆/span /div /body /html 语法 mediamedia_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 mediascreen and (width:800px) relstylesheet hrefexample.css /
?xml-stylesheet mediascreen and (width:800px) relstylesheet hrefexample.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 #145.1.71311.5版本9IE8及更早浏览器不支持媒体查询。 示例 !DOCTYPE html html langzh-cn head meta charsetutf-8 / titlemedia_CSS参考手册_web前端开发参考手册系列/title meta nameauthor contentJoy Du(飘零雾雨), dooyoegmail.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 divMedia Queries媒体查询/div div classtest如果你的显示器水平分辨率为1024px的话将能看到本条规则的效果取决于输出设备屏幕分辨率的大小不随包括浏览器在内的窗体大小而改变/div div classtest2如果视口宽度为1024px的话将能看到本条规则的效果随包括浏览器在内的窗体大小而改变/div /body /html 语法 page label pseudo-classes{ sRules } 取值 label页面标识符pseudo-class打印伪类:first, :left, :right 说明 设置页面容器的版式方向边空等。 兼容性 浅绿 支持 红色 不支持 墨绿 部分支持 橙色 实验性质 支持版本\类型IEFirefoxSafariChromeOpera版本6-74-65.1.71311.5版本8 示例 !DOCTYPE html html langzh-cn head meta charsetutf-8 / titlepage_CSS参考手册_web前端开发参考手册系列/title meta nameauthor contentJoy Du(飘零雾雨), dooyoegmail.com, www.doyoe.com / style page:first{margin:300px;} /style /head body divpage:first{margin:300px;}/div /body /html 语法 /* 这里是注释内容 */ 说明 用于注释CSS中的某些内容。 兼容性 浅绿 支持 红色 不支持 墨绿 部分支持 橙色 实验性质 支持版本\类型IEFirefoxSafariChromeOpera版本645.1.71311.5 示例 !DOCTYPE html html langzh-cn head meta charsetutf-8 / titlecomment_CSS参考手册_web前端开发参考手册系列/title meta nameauthor contentJoy Du(飘零雾雨), dooyoegmail.com, www.doyoe.com / style .test{color:#f00;/*红色*/} /style /head body div classtestCSS中的注释语法/* 注释的内容 *//div /body /html 转载于:https://www.cnblogs.com/waitingforbb/p/7107879.html
