前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS代码片段

CSS代码片段

作者头像
前端GoGoGo
发布2018-08-27 10:24:23
8850
发布2018-08-27 10:24:23
举报

字体

代码语言:javascript
复制
/*
    雅黑
    "STXihei" 是微软雅黑在Mac平台上的对应字体
*/
.ff-yahei{
    font-family: tahoma,arial,"STXihei","Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", "宋体", SimSun;
}
/* 普通黑体 */
.ff-hei{
    font-family: tahoma,arial,"STXihei",SimHei,"Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", "宋体", SimSun;
}
/* 宋体 */
.ff-song{
    font-family: tahoma,arial,"宋体", SimSun;
}

清浮动

代码语言:javascript
复制
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

CSS Hacks(Browser Specific Hacks)

browserhacks

跨浏览器的透明度

代码语言:javascript
复制
.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

对SEO和可访问性友好的隐藏元素的方法

代码语言:javascript
复制
#content {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

如果是一个元素用背景图来代替文本,需要隐藏文本,可用

代码语言:javascript
复制
.text{
    text-indent: -9999px;
}

注意:如果不合适的使用这种方法,会导致搜索引擎将该页面列为黑名单。

标出页面中存在问题的元素(Diagnostic CSS)

代码语言:javascript
复制
/* 空元素 */
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty
{ padding: 20px; border: 5px dotted yellow !important; }

/* 某些属性不该为空 */
*[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"]
{ border: 5px solid yellow !important; }

/* 废弃的元素 */
applet, basefont, center, dir, font, isindex, menu, s, strike, u
{ border: 5px dotted red !important; }

/* 废弃的属性 */
*[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start],
*[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link], *[text], *[vlink],
*[align], *[valign],
*[hspace], *[vspace],
*[height], *[width],
ul[type], ol[type], li[type]
{ border: 5px solid red !important; }

对某个具体的标准设备的Media Queries

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

去除IE6对png24图片的灰色背景

背景图

代码语言:javascript
复制
.yourselector {
   width:200px;
   height:100px;
   background: url(/folder/yourimage.png) no-repeat;
   _background:none;
   _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}

图片

代码语言:javascript
复制
img, .png {
   position: relative;
   behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
   this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
   this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
   this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
   this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

参考

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015.04.28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 字体
  • 清浮动
  • CSS Hacks(Browser Specific Hacks)
  • 跨浏览器的透明度
  • 对SEO和可访问性友好的隐藏元素的方法
  • 标出页面中存在问题的元素(Diagnostic CSS)
  • 对某个具体的标准设备的Media Queries
  • 去除IE6对png24图片的灰色背景
  • 参考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档