css写法

原创 2013年12月05日 11:25:43
id选择器 > 类选择器 > 标签选择器
@charset "utf-8";
charset=utf-8   表示当前文档的字符集是采用utf-8的字符,也就是我们常说英文字符集;
gbk gb2312     主要用于中文。big5  用于繁体中文

/*去除页面中所有标签的默认间距、补白*/
* { margin:0px; padding:0px;}

/*页面中的默认字体、字体大小、背景、文字颜色*/
body { font-size:12px; font-family:Arial; color:#666666; background:#ffffff; -webkit-text-size-adjust:none;}

webkit-text-size-adjust:none;
苹果移动设备上会识别,用于保证文字大小。
/*页面右侧滚动条*/
html { overflow-y:scroll;}

/*清除页面所有图片的默认边框1*/
img { border:none;}

/*去除ol、ul、li的默认样式*/
ol,ul,li { list-style-type:none;}
/*设置表单等项目的默认字体大小*/
input, select, textarea { color: #777777; font-family: Arial,Helvetica,sans-serif; font-size: 100%; vertical-align: middle;}

/*设置文字段落、表格单元格的默认行高*/
p,th,td { line-height:22px;}

/*字体*/
em { font-style:normal;}
.yahei { font-family:微软雅黑;}
.songti { font-family:宋体;}

/* 其它需要用到的字体大小 */
h1,h2,h3,h4,h5,h6 { font-weight:normal;}
h1{ font-size:14px;}
h2{ font-size:12px;}
h3{ font-size:12px;}
.font10 { font-size: 10px;}
.font11 { font-size: 11px;}
.font12 { font-size: 12px;}
.font13 { font-size: 13px;}
.font14 { font-size: 14px;}
.font15 { font-size: 15px;}
.font16 { font-size: 16px;}
.font17 { font-size: 17px;}
.font18 { font-size: 18px;}
.font20 { font-size: 20px;}
.font22 { font-size: 22px;}
.font24 { font-size: 24px;}

/*去除页面中的链接点击后留下的虚线框*/
body a{ outline:none;blr:expression(this.onFocus=this.blur());}

/* 整个网站需要的字体样式*/
.strong { font-weight:bold;}
.underline { text-decoration:underline;}

/* 图片边框 */
.imgp2 img { padding: 2px; border: 1px solid #cccccc; }

/* 1px细线 */
.div1px { border:#CCCCCC solid 1px; }

/* li相关 */
ul,li { list-style-type:none; }

/* 带着图片的li */
.imgli1 li{ list-style-image:url(../BG.jpg) ; }

/*默认的文字链接样式*/
a:link { color:#666666; text-decoration:none;}
a:visited { color:#666666; text-decoration:none;}
a:hover { color:#0f2c8d; text-decoration:none;}
a:active { color:#0f2c8d; text-decoration:none;}

/*其他文字链接样式*/
.cffffff { color:#ffffff;}
.cffffff a:link,.cffffff a:visited { color:#ffffff;}
.cffffff a:hover,.cffffff a:active { color:#cccccc;}

.cc3120e { color:#c3120e;}
.cc3120e a:link{ color:#c3120e;}
.cc3120e a:visited { color:#c3120e;}
.cc3120e a:hover { color:#666;}
.cc3120e a:active { color:#c3120e;}

/* w系列控制宽度 */
.wauto { width: auto}
.w25 { width: 25%;}
.w33 { width: 33.3%;}
.w50 { width: 50%;}
.w100 { width: 100%;}
/* h系列控制高度 */
.h100 { height:100%;}
.hauto { height:auto;}
.h20px { height:20px;}
.h30px { height:30px;}
.h55px { height:55px;}
.h86px { height:86px;}
.h255px { height:275px;}
.lineheight15px { line-height:15px;}
.lineheight18px { line-height:18px;}
.lineheight20px { line-height:20px;}

/* p系列控制padding */
.p5 { padding:5px;}
.p10 { padding:10px;}
.p15 { padding:15px;}
.pt2 { padding-top:2px;}
.pt5 { padding-top:5px;}
.pt10 { padding-top:10px;}
.pt15 { padding-top:15px;}
.pr5 { padding-right:5px;}
.pr10 { padding-right:10px;}
.pr15 { padding-right:15px;}
.pb5 { padding-bottom:5px;}
.pb10 { padding-bottom:10px;}
.pb15 { padding-bottom:15px;}
.pl5 { padding-left:5px;}
.pl10 { padding-left:10px;}
.pl15 { padding-left:15px;}

/* m系列控制padding */
.m5 { margin:5px!important;}
.m10 { margin:10px!important;}
.m15 { margin:15px!important;}
.mt5 { margin-top:5px!important;}
.mt10 { margin-top:10px!important;}
.mt15 { margin-top:15px!important;}
.mr5 { margin-right:5px!important;}
.mr10 { margin-right:10px!important;}
.mr15 { margin-right:15px!important;}
.mb5 { margin-bottom:5px!important;}
.mb10 { margin-bottom:10px!important;}
.mb15 { margin-bottom:15px!important;}
.ml5 { margin-left:5px!important;}
.ml10 { margin-left:10px!important;}
.ml15 { margin-left:15px!important;}

/*文本对齐样式*/
.center { margin:0px auto;}
.tcenter { text-align:center;}
.tleft { text-align:left;}
.tright { text-align:right;}

/*左右漂浮样式*/
.l { float:left;}
.r { float:right;}

/*css清除浮动*/
.c { clear:both}
.clear { clear:both; height:0px; line-height:0px; font-size:0px;}

/*clearfix:after*/
.clearfix:after { content:"."; display:block; height:0px; clear:both; visibility:hidden;}
.clearfix { display:inline-table; display:block;}
*html .clearfix { height:1%;}
*+html .clearfix { height:1%;}
.imgfix img{display:block;}

/* 1px细线 */
.b1s { border:1px solid #e4e4e4;}
.bt1s { border-top:1px solid #e4e4e4;}
.br1s { border-right:1px solid #e4e4e4;}
.bb1s { border-bottom:1px solid #e4e4e4;}
.bl1s { border-left:1px solid #e4e4e4;}
/*添加鼠标悬浮显示手的形状*/
.hand { cursor:pointer;}

/*单行截字*/
.textbreak { white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}

/*最小高度*/
.minheight500px { min-height:500px; height:auto!important; height:500px; overflow:visible;}
.minheight650px { min-height:650px; height:auto!important; height:650px; overflow:visible;}
.minheight710px { min-height:400px; height:auto!important; height:400px; overflow:visible;}

/*隐藏元素*/
.hide { display:none;}

/*解决IE6双边距加倍错误*/
.inline { _display:inline;}

兼容IE的CSS写法

一、hack 写法: .demo {margin-left: 30px; _margin-left: 20px; } 优点: 1、内嵌在CSS中,编写的时候很方便 2、内嵌在CS...
  • acm765152844
  • acm765152844
  • 2016年03月04日 20:58
  • 421

CSS——CSS的三种书写方式 CSS选择器

CSS有3种书写形式 行内样式:(内联样式)直接在标签的style属性中书写 style="color:red;"> 页内样式:在本网页的style标签中书写     bo...
  • liyunxiangrxm
  • liyunxiangrxm
  • 2016年06月12日 10:29
  • 1256

浅谈各种浏览器下的CSS Hack兼容性写法

这篇文章主要介绍了各种浏览器下的CSS Hack兼容性写法,CSS Hack大致可以分为内部Hack和选择器Hack以及HTML头部引用Hack,需要的朋友可以参考下。 由于不同浏览器所遵循的标...
  • Denghejing
  • Denghejing
  • 2016年10月13日 11:09
  • 1531

firefox(火狐)与IE Chrome浏览器兼容的javascript和CSS写法

css: 1. ul标签中FF中有个padding值,却没有margin值,而在IE中正好相反 解决办法:将ul的padding和margin都设为0(也可以不是0)如:padding:0;ma...
  • xhjfor
  • xhjfor
  • 2014年04月14日 16:15
  • 3933

CSS的组成,三种样式(内联式,嵌入式,外部式),优先级

----------------------------------------------------------------------------------------------------...
  • chq11106004389
  • chq11106004389
  • 2016年01月14日 10:52
  • 12614

CSS Sprites(基本写法,如何使用)

说白就是用样式表切一个大图片现在很多好的网站都是这么写,然后很多位置的图片,就用一张图片,然后一次URL请求就行了,加快网站访问速度这个就是切片工具可以直接导出下图框框中的内容这个是切片工具 全部拆分...
  • XTQueen_up
  • XTQueen_up
  • 2014年07月09日 16:48
  • 1887

清除浮动最有效的css写法

说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很...
  • u012396955
  • u012396955
  • 2017年03月04日 20:15
  • 906

全局global.css的写法

@charset "utf-8"; /* CSS Document */ /* CSS重置 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,c...
  • kongjiea
  • kongjiea
  • 2015年01月11日 19:31
  • 1926

前端学习(三)——CSS的三种写法与优先级

1.style属性中写CSS   样例: CSS写法优先级测试 CSS写法优先级测试     2.在标签中写CSS   样例: CSS写法优先级测试 p{ ...
  • tjq980303
  • tjq980303
  • 2016年09月09日 00:21
  • 251

HTML+CSS之CSS的继承、层叠和特殊性 (6)

本文继续学习CSS的继承、层叠和特殊性。
  • delphiwcdj
  • delphiwcdj
  • 2015年03月03日 23:57
  • 6003
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css写法
举报原因:
原因补充:

(最多只允许输入30个字)