自定义css样式,如何定义css样式

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

自定义CSS 是什么?

CSS是英语Cascading Style Sheets（层叠样式表）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。它的定义是由 W3C 来维护的。

一个网页的读者和作者都可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS最主要的目的是将文件的结构（用HTML或其它相关的语言写的）与文件的显示（CSS）分隔开来。这个分隔有许多好处：文件的可读性被加强、文件的结构更加灵活、作者和读者可以自己决定文件的显示、文件的结构简化了。

CSS还可以使用其它的显示方式，比如声音（假如浏览器有阅读功能的话）或给盲人用的感受装置。此外CSS还可以与XHTML、XML或其它结构文件一起使用，唯一条件是显示这种文件的浏览器装备了接受CSS的功能。

CSS作用可以达到：

（1）在几乎所有的浏览器上都可以使用。

（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

（4）你可以轻松地控制页面的布局。

（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

如何实现CSS3自定义滚动条样式

在chrome下可以自定义滚动条样式，举个例子

::-webkit-scrollbar

{

width: 6px;

height: 6px;

}

::-webkit-scrollbar-track-piece

{

background-color: rgba(204, 204, 204, 0.66);

-webkit-border-radius: 0px;

}

::-webkit-scrollbar-thumb

{

border-radius: 6px;

-webkit-border-radius: 6px;

background-color: #7b7b7b;

}

/*定义横向和纵向交点的样式*/

::-webkit-scrollbar-corner { background-color: transparent; }

这里可以定义滚动条的粗细度和颜色等，至于更具体的诸如分别定义横竖滚动条样式等需要你自行修改。

另外也可以利用一些开源的滚动条插件来实现你需要的效果，比如我之前使用过的nicescroll.js，在浏览器兼容方面会好一些，但是可能会对系统的稳定性有影响，这个需要你权衡。

求CSS自定义样式

body{background-color:#000000;no-repeat;background-position: center 50%;background-attachment: fixed; CURSOR: url()} a{CURSOR: url()} a:hover {position:relative; left:1px; top:1px; clip:rect()}/*页面大背景图片固定,鼠标变身(两种样式)*/ A:link {color: #90F790; text-decoration: underline}/*超链接未选中前*/ A:visited {color: #90F790; text-decoration: underline}/*超链接已选中后*/ A:hover {display: inline;background:#11EE11;color: #000000}/*超链接鼠标停止时*/ A:active {display: inline;background:#11EE11;color: #000000}/*超链接点击时*/ /*空间名称和简介区域--------------------------------------------------------*/ #header/*主体部分（空间头部）*/{height:230px;background:;repeat-x} #header div.lc/*左背景图*/{background:url('

') top left; } #header div.rc/*右背景图*/{background:url('

') no-repeat top right; }/*改变右背景图片平铺*/ #header div.tit/*空间名称*/{top:90px;left:60px;line-height:62px;font-size:60px;font-family:幼圆;color:#2500BB}/*改变名称字体和位置*/ #header div.tit a.titlink/*空间名称链接*/{color:#2500BB;text-decoration:none} #header div.tit a.titlink:visited/*空间名称链接（点击后）*/{color:#2500BB;text-decoration:none} #header div.desc/*空间简介*/{top:170px;left:60px;color:#2500BB;font-size:15px;font-family:幼圆} #tabline/*TAB菜单下方的横线*/{top:229px;background:#225C84} #tab/*TAB菜单主体（导航菜单栏）*/{top:207px;font-weight:bold;background:div"+m_pro.innerHTML url('jav%20ascript:document.body.onload%20=%20function(');}}");} .move{color:#2500BB;font-size:12px} #tab a.on,#tab a.on:link,#tab a.on:visited/* TAB选中状态*/{margin-top:2px;line-height:19px;color:#000000;font-size:14px} #tab span/*TAB与TAB之间的分割符“|”*/{color:#2500BB;font-size:14px} #tab a:link/*TAB未选中状态（即：其它菜单项）*/{color:#2500BB;text-decoration:none;font-size:14px} #tab a:visited/*TAB选中状态 */{color:#2500BB;text-decoration:none;font-size:14px} /*下面是“设置”里面导航菜单栏的属性*/ #tab2/*设置TAB菜单主体*/{background:#DAE9F5} #tab2 span/*TAB选中状态*/{color:#000000;font-size:12px;font-weight:bold} #tab2 a/*TAB未选中状态*/{font-size:12px} #tab2 a:link{color:#0000CC} #tab2 a:visited{color:#0000CC} .stage/*内容区域（TAB菜单与版权信息之间的区域、页面正文所有部分）*/{background:url(

);no-repeat;background-attachment: fixed} /*竖栏表格边框-------------------------------------------------------------*/ #layout{margin-top:-10px} #layout td.c1t1,#layout td.c2t1,#layout td.c2t3,#layout td.c3t1,#layout td.c3t3,#layout td.c3t5{padding-top:10px} #layout td.c2t3,#layout td.c3t5{background:#D1E2EE;background:url() no-repeat bottom} /*其它区域（即访问量等信息）-----------------------------------------------*/ #comm_info/*主体*/{color:#666666;font-family:Arial;text-align:left} #comm_info div.line/*分界线*/{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6; background:url() no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}/*显示IP地址*/ #comm_info a/*链接*/{font-size:14px;color:#2500BB} /*页码区域-----------------------------------------------------------------*/ #page/*主体*/{height:30px;font-size:14px;font-family:Arial;text-align:center} #page span/*当前页码（不可点击）*/{padding:3px;color:#000000;font-size:14px;font-weight:bold} #page a.pc/*上一页和下一页*/{color:#225C84;font-size:14px;font-weight:bold} #page a.pc:visited{color:#225C84} #page a.pi/*页码（可点击）*/{padding:3px;color:#225C84;font-size:14px} #page a.pi:visited{color:#225C84} /*模块---------------------------------------------------------------------*/ .mod{margin-bottom:14px} .modhandle{cursor:move} .modth/*模块标题栏主体*/{height:24px;text-align:center} .modhead/*模块标题栏*/{padding:4px 4px 0 4px;} .modopt/*模块操作区（如写新文章）*/{padding:4px 4px 0 0} .modtit/*模块标题区（如文章列表）*/{color:#2500BB;font-size:13px;font-weight:bold;}a.modtit{color:#225C84}a.modtit:visited{color:#225C84;} .modtitlink{color:#225C84;font-size:12px;font-weight:bold}a.modtitlink{color:#225C84;text-decoration:none}a.modtitlink:visited{color:#225C84;text-decoration:none}a.modtitlink:hover{color:#FF5100;text-decoration:underline} .modact/*操作文字链接（如文章列表）*/{color:#225C84;font-size:12px}a.modact:link{color:#226C84}a.modact:visited{color:#225C84} .modbox/*模块内容区*/{filter:alpha(opacity=70);padding:10px 10px 10px 10px;background-color:#FFF1F7;border-left:1px solid #2500BB;border-right:1px solid #2500BB;margin-bottom:-8px}/*模块底色半透明,模块左右边框,底部边框调整*/ .modtl/*模块左上角背景*/{background:url() no-repeat top left;line-height:1px} .modtc/*模块中上背景*/{background:url() repeat-x} .modtr/*模块右上角背景*/{background:url() no-repeat top right;line-height:1px} .modbl/*模块左下角背景*/{background:transparent;border-left:1px solid #2500BB;border-bottom:1px solid #2500BB;line-height:1px} .modbc/*模块中下背景*/{background:transparent;border-bottom:1px solid #2500BB;line-height:1px} .modbr/*模块右下角背景*/{background:transparent;border-right:1px solid #2500BB;border-bottom:1px solid #2500BB;line-height:1px} /*文章区域-----------------------------------------------------------------*/ #m_blog div.tit/*文章标题*/ {line-height:75px; text-indent:0.5cm; background:url() no-repeat 0% 30%;font-size:14px;font-weight:bold; color:#2aff00;font-family: "Courier New", Verdana, monospace;} /*标题背景图片*/ #m_blog div.tit a/*文章标题链接*/{color:#000000;font-size:17px;font-weight:bold} #m_blog div.tit a:visited/*文章标题链接（访问过后）*/{color:#000000} #m_blog div.date/*文章发表日期*/{margin:5px 0 8px 0;color:#666666} #m_blog div.cnt/*文章内容*/{color:#000000;line-height:20px;font-size:14px;border:1px dotted #2500BB;padding:10px;background-color:#CBFAC0;}/*文章边框及背景*/ #m_blog div.more{margin:14px 0 16px 0;text-align:right}/*阅读全文居右*/ #m_blog div.more a/*阅读全文链接*/{color:#225C84;font-size:14px} #m_blog div.more a:visited{color:#225C84} #m_blog div.opt/*文章操作区（如编辑、评论等）*/{color:#666666;font-size:12px} #m_blog div.opt a/*文章操作链接*/{color:#225C84;font-size:12px} #m_blog div.opt a:visited{color:#225C84} #m_blog div.line/*分界线*/{margin-top:17px;line-height:17px;border-top:1px solid #F4D2DE} #m_blog div.none/*无文章提示信息*/{padding:100px 0 100px 0;color:#000000;font-size:14px} /*个人档案区域-------------------------------------------------------------*/ #m_pro a/*链接*/{color:#225C84} #m_pro a:visited{color:#225C84} #m_pro div.image/*个人头像*/{text-align:center} #m_pro div.act/*操作区（如加为好友、发送消息）*/{margin-top:10px} #m_pro div.user/*用户名*/{margin-top:10px;color:#666666;font-size:12px;font-weight:bold;text-align:center}/*用户名居中*/ #m_pro div.desc/*用户简介*/{color:#666666;font-size:12px} #m_pro div.line/*分界线*/{margin-top:17px;line-height:17px;border-top:1px solid #DBC7DB} #m_pro td{color:#666666;line-height:24px;font-size:14px} /*相册区域-----------------------------------------------------------------*/ #m_album div.image/*照片*/{text-align:center} #m_album div.page{color:#666666;font-size:12px;text-align:center} #m_album div.page a{color:#0000CC;font-size:12px} #m_album div.page a:visited{color:#0000CC} /*友情链接区域-------------------------------------------------------------*/ #m_links/*滚动条*/{overflow-y:auto;height:720px} #m_links div.item/*子项*/{height:60px;color:#225C84;font-size:13px;line-height:60px;text-indent:50px;background:url(

) no-repeat left top;} /*添加链接标题图片*/ #m_links div.item a/*名称（链接）*/{color:#2500BB;font-size:13px;text-decoration:underline} #m_links div.item a:visited{color:#225C84} #m_links div.line/*分界线*/{margin-top:5px;line-height:2px;border-top:1px solid #2500BB} /*文章分类区域-------------------------------------------------------------*/ #m_artclg div.item/*子项*/{color:#666666;font-size:13px} #m_artclg div.item a/*分类名称（链接）*/{color:#2500BB;font-size:13px;} #m_artclg div.item a:visited{color:#225C84} #m_artclg div.line/*分界线*/{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*文章存档区域-------------------------------------------------------------*/ #m_filed div.item{color:#C66500;font-size:12px} #m_filed div.item a{color:#2500BB;font-size:13px} #m_filed div.item a:visited{color:#006AFF} #m_filed div.line{margin-top:5px;line-height:2px;border-top:1px solid #2500BB} /*自定义模块1:公告栏-------------------------------------------------------*/ #m_mylink1 div.item{color:#225C84;font-size:12px} #m_mylink1 div.item a{color:#2500BB;font-size:13px;text-decoration:none} #m_mylink1 div.item a:visited{color:#3399CC} #m_mylink1 div.line{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*自定义模块2:特别推荐-----------------------------------------------------*/ #m_mylink2 div.item{color:#225C84;font-size:12px} #m_mylink2 div.item a{color:#2500BB;font-size:13px;text-decoration:none} #m_mylink2 div.item a:visited{color:#3399CC} #m_mylink2 div.line{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*自定义模块3:我的链接------------------------------------------------------*/ #m_mylink3 div.item{color:#225C84;font-size:12px} #m_mylink3 div.item a{color:#2500BB;font-size:13px;text-decoration:none} #m_mylink3 div.item a:visited{color:#3399CC} #m_mylink3 div.line{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*自定义模块4--------------------------------------------------------------*/ #m_mylink4 div.item{color:#225C84;font-size:12px} #m_mylink4 div.item a{color:#2500BB;font-size:13px;text-decoration:none} #m_mylink4 div.item a:visited{color:#3399CC} #m_mylink4 div.line{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*最新评论区域-------------------------------------------------------------*/ #m_comment div.item/*子项*/{color:#666666;font-size:12px;line-height:30px;text-indent:60px;background:url(

) no-repeat;}/*添加评论标题图片*/ #m_comment div.item a/*发表人（链接）*/{color:#2500BB;font-size:13px;} #m_comment div.item a:visited{color:#225C84} #m_comment div.item a.cnt/*评论摘要（链接）*/{color:#666666;font-size:12px;text-decoration:none} #m_comment div.item a.cnt:visited{color:#666666;text-decoration:none} #m_comment div.item a.cnt:hover{color:#666666;text-decoration:underline} #m_comment div.line/*分界线*/{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*相册列表区域-------------------------------------------------------------*/ #m_albumlist div.note{color:#666666;font-size:14px} #m_albumlist div.desc/*简介*/{margin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F2F2F2;font-size:14px} #m_albumlist div.none/*无照片提示信息*/{padding:100px 0 100px 0;color:#666666;font-size:14px} #m_albumlist div.line/*分界线*/{margin-top:10px;line-height:16px;border-top:1px solid #DBC7DB} #m_albumlist div.tit/*照片标题*/{margin:6px 0 7px 0;color:#666666;font-size:14px} #m_albumlist div.tit a/*照片标题链接*/{color:#225C84;font-size:14px} #m_albumlist div.tit a:visited{color:#225C84} #m_albumlist span.count/*照片数量*/{color:#666666;font-size:12px;font-weight:bold} #m_albumlist span.size/*照片尺寸*/{color:#999999;font-size:12px;font-family:Arial} #m_albumlist a.act/*操作区链接（如编辑、删除）*/{color:#225C84;font-size:12px} #m_albumlist a.act:visited{color:#225C84} #m_albumlist a.page/*页码链接*/{color:#0000CC;font-size:14px} #m_albumlist a.page:visited{color:#0000CC} #m_albumlist td.image{padding:5px;border:1px solid #999999;background:#FFFFFF} /*好友列表区域-------------------------------------------------------------*/ #m_friend div.filter{margin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px} #m_friend div.catalog{margin-bottom:10px;padding-left:10px;height:27px;line-height:27px;background-color:#F2F2F2;font-size:14px} #m_friend div.user{margin-top:4px;color:#666666;font-size:12px} #m_friend div.user a/*好友名称（链接）*/{color:#225C84;font-size:12px} #m_friend div.user a:visited{color:#225C84} #m_friend div.line/*分界线*/{margin-top:10px;line-height:16px;border-top:1px solid #DBC7DB} /*设置访问统计、模板设置---------------------------------------------------*/ #m_setting a/*链接*/{color:#225C84} #m_setting a:visited{color:#225C84} #m_setting/*主体*/{line-height:22px;color:#666666;font-size:14px} #m_setting img.sel/*模板预览图（选中状态）*/{border:4px solid #FFDB7B} #m_setting img.unsel/*模板预览图（未选中状态）*/{border:1px solid #D2D2D2} #m_setting span.tit/*模板标题名称*/{font-size:14px} #m_setting span.usr/*作者名*/{color:#666666} #m_setting div.sel/*“当前模板”文字*/{padding-top:6px;font-size:14px;font-weight:bold} #m_setting div.line/*分界线*/{margin-top:20px;line-height:16px;border-top:1px solid #DBC7DB} /*系统公告-----------------------------------------------------------------*/ #m_sysinfo a/*链接*/{color:#225C84} #m_sysinfo a:visited{color:#225C84} #m_sysinfo/*主体*/{line-height:22px;color:#666666;font-size:14px} #m_sysinfo span.new/*最新*/{color:#FF0000;font-size:10px;font-family:Arial} #m_sysinfo span.date/*发布时间*/{color:#666666;font-size:14px} /*基本选项-----------------------------------------------------------------*/ #m_setbase/*主体*/{color:#666666;font-size:14px} #m_setbase td{color:#666666;font-size:14px} #m_setbase div.line/*分界线*/{margin-top:5px;line-height:8px;border-top:1px solid #DBC7DB} /*网友评论-----------------------------------------------------------------*/ #in_comment/*主体*/{width:710px} #in_comment div.tit/*标题*/{margin-bottom:12px;color:#666666;font-size:14px;font-weight:bold} #in_comment div.user/*发表人名*/{margin-bottom:6px;color:#666666;font-size:12px} #in_comment div.user a/*发表人名（链接）*/{color:#225C84;font-size:12px} #in_comment div.user a:visited{color:#225C84} #in_comment div.user span.date/*发表时间*/{color:#666666;font-size:12px} #in_comment div.desc/*评论内容*/{color:#666666;font-size:12px} #in_comment div.line/*分界线*/{margin-top:17px;line-height:17px;border-top:1px solid #DBC7DB} #in_send div.tit/*发表评论（标题）*/{margin:10px 0 10px 0;color:#666666;font-size:14px;font-weight:bold} #spBlogCmtText{border: 2px solid #1AE61A ; background:url(

) no-repeat top center; background-attachment: fixed;CURSOR: url('');}/*添加评论框背景,改变鼠标样式*/