介绍 CSS 公共样式包括什么以及如何编写

发布时间：2023-10-13 09:48:39 所属栏目：语言来源：

导读：本篇内容介绍了“CSS公共样式包括了哪些，怎么写”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够

本篇内容介绍了“CSS公共样式包括了哪些，怎么写”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
/*
* @description: 公共样式表
* @author: LMD同学
* @update: LMD同学(2018-05-22 09:35)
*/
@charset "utf-8";
*{margin: 0px;padding: 0px;}
body {background: #FFFFFF;color: #333;font-family: "微软雅黑";font-size: 14px;font-weight: lighter;}
ul,li,ol,dl,dt,dd {list-style: none;}
a {color: #333;text-decoration: none;cursor: pointer;outline: 0 none;}
a:link,a:visited {text-decoration: none;color: #1F376D;}
a:hover,a:active {text-decoration: none;color: #BD0A01;border: none;}
button,input,select {vertical-align: middle;}
button{cursor: pointer;}
img {border: 0 none;}
table{border-collapse:collapse;}
.fl{float: left;}
.fr{float: right;}
.overflow-h {overflow: hidden;}
.cl {clear: both;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.none {display: none}
.block {display: block}
.inline-block{display: inline-block}
.t-l {text-align: left;}
.t-c {text-align: center;}
.t-r {text-align: right;}
.vm {vertical-align: middle}
.bg-red {background-color: #FB8B76;}
.bg-red:hover{background-color: #FF2525;}
.bg-yellow {background-color: #FCBA50;}
.bg-yellow:hover{background-color: #FF2525;}
.bg-blue {background-color: #3DC5D0;}
.bg-blue:hover{background-color: #FF2525;}
.bg-green{background-color: #82D745;}
.bg-green:hover{background-color: #FF2525;}
.bg-gray {background-color: #FDFDFE;}
.bg-gray:hover{background-color: #FF2525;}
.bg-pink{background-color: #EC6C8D;}
.bg-pink:hover{background-color: #F24874;}
.F12{font-size: 12px;}
.F14{font-size: 14px;}
.F16{font-size: 16px;}
.F18{font-size: 18px;}
.F20{font-size: 20px;}
.color1{color: #333;}
.color2{color: #666;}
.color3{color: #999;}
.FB{font-weight: bold;}
.FN{font-weight: normal;}
.FI{font-style: italic;}
.upper{text-transform: uppercase;}
.lower{text-transform: lowercase;}
.w{width:100%}
.h{height:100%}
.h30 {height:30px;}
.lh30 {line-height: 30px;}
.btn{display: inline-block;padding:0px 16px;height:100%;border-radius:4px;cursor: pointer;}
/*遮罩层*/
.maskLayer{z-index: 9999;display: none;position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3);}
/*文字溢出*/
.p-eclipse{
width: 100%;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-moz-binding:url('ellipsis.xml#ellipsis');
}
.p-eclipse-2{
　　overflow:hidden;
　　text-overflow:ellipsis;
　　word-break:break-all;
　　-webkit-box-orient:vertical;
　　-webkit-line-clamp:2;
}
.p-eclipse-3{
　　overflow:hidden;
　　text-overflow:ellipsis;
　　word-break:break-all;
　　-webkit-box-orient:vertical;
　　-webkit-line-clamp:3;
}
/*页面顶部阴影*/
.top-shadow:before {
z-index: 100;
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
/***********************设置滚动条样式**************************/
.scroll{overflow: scroll;}
/*滚动条整体部分，
* 其中的属性有width,height,background,border
* （就和一个块级元素一样）等。
* */
.scroll::-webkit-scrollbar{
width: 12px;
background-color: #eee;
}
/*外层轨道。
* 可以用display:none让其不显示，
* 也可以添加背景图片，颜色改变显示效果。
* */
.scroll::-webkit-scrollbar-track{
background-color: #eee;
}
/*滚动条里面可以拖动的那部分*/
.scroll::-webkit-scrollbar-thumb{
border-radius: 10px;
background: #3DB6A4;
}
/*滚动条两端的按钮。
* 可以用display:none让其不显示，
* 也可以添加背景图片，颜色改变显示效果。
* */
.scroll::-webkit-scrollbar-button:start {
background: url(./imgs/up.png) no-repeat;
background-size: 12px 12px;
}
.scroll::-webkit-scrollbar-button:end{
background: url(./imgs/down.png) no-repeat;
background-size: 12px 12px;
}
/*内层轨道，滚动条中间部分（除去）。*/
.scroll::-webkit-scrollbar-track-piece{

};
/*边角 */
.scroll::-webkit-scrollbar-corner{

};
/*定义右下角拖动块的样式*/
.scroll::-webkit-resizer{

};
/*****************************渐变背景颜色*********************/
.bg-lr{
/*火狐*/
background:-moz-linear-gradient(left, #F68E06, #F45408);
/*Safari5.1 Chrome 10+*/
background:-webkit-linear-gradient(left, #F68E06, #F45408);
/* Safari 4-5, Chrome 1-9*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F68E06), to(#F45408));
/*Opera 11.10+*/
background: -o-linear-gradient(left, #F68E06, #F45408);
/* IE 10 */
background:-ms-linear-gradient(left, #F68E06, #F45408);
/*IE 6 7 8*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#F68E06, endColorstr=#F45408)";
background:linear-gradient(left, #F68E06, #F45408);
+background:#FA7002;
}
.bg-tb{
/*火狐*/
background:-moz-linear-gradient(top, #F68E06, #F45408);
/*Safari5.1 Chrome 10+*/
background:-webkit-linear-gradient(top, #F68E06, #F45408);
/* Safari 4-5, Chrome 1-9*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F68E06), to(#F45408));
/*Opera 11.10+*/
background: -o-linear-gradient(top, #F68E06, #F45408);
/* IE 10 */
background:-ms-linear-gradient(top, #F68E06, #F45408);
/*IE 6 7 8*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#F68E06, endColorstr=#F45408)";
background:linear-gradient(top, #F68E06, #F45408);
+background:#FA7002;
}
/*****************************table表格样式**********************/
/*奇数偶数行颜色不一样*/
.inner-table tbody tr:nth-child(even){background: #f5f5f5;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;}
/*table 四周圆角形成*/
.inner-table thead:first-child {-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;border-radius: 6px 0 0 0; }
.inner-table thead:last-child {-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;border-radius: 0 6px 0 0;}
.inner-table thead:only-child{-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;border-radius: 6px 6px 0 0;}
.inner-table tfoot td:first-child {-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;border-radius: 0 0 0 6px;}
.inner-table tfoot td:last-child {-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;border-radius: 0 0 6px 0;}
.inner-table tfoot td:only-child{-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6pxborder-radius: 0 0 6px 6px}
/*鼠标悬浮改变table行的颜色*/
.inner-table tr:hover {background: #fbf8e9;-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out;
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!