13518219792
所谓的自定义css风格，我知道的有两种方法，
网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了良庆免费建站欢迎大家使用！
第一种就是制作几种css风格，然后可以让用户选择，当他选择其中一种后，在页面内调用那种css，然后刷新页面，将该css名称储存至cookie中，这样下次登录的时候还是上次选择的那种。
还一种就是用户通过表单来自定义css中的细节，然后提交表单后，由后台程序生成一个自定义的css样式，那个页面就会调用这个生成的css，用户数据可以保存至cookie中，也可以保存至数据库中，方便下次调用。
其实两种方法只是实现起来不同，本质是一样的。
CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading
Stylesheet）。
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
它的作用可以达到：
（1）在几乎所有的浏览器上都可以使用。
（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
（4）你可以轻松地控制页面的布局
。
（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
其实单用HTML也可以实现样式多样化，只不过太费了，代码会臃肿！！！
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('');}/*添加评论框背景,改变鼠标样式*/
1.首先找到wordpress菜单中的class类名
2.在wordpress模版目录下一般在wp-content\themes\主题名，找到style.css
3.在style.css中为类名添加样式，如下：
.menu-item:{color:red;}
这样就可以设计菜单css样式了
定义CSS样式 (三种方式)
一、在head标签中加载一个CSS文件示例head link rel="stylesheet" type="text/css" href="style.css" //head
此例使用了link标签。
abbr { font-size:12px;}.text10pxwhite { font-size:10px; color: #FFFFFF;}
style.css的内容
二、直接把CSS内容写在HTML文件的head标签中示例head style type="text/css" abbr { font-size: 12px; } .text10pxwhite { font-size: 10px; color: #FFFFFF; } /style/head
此例使用了style标签。
两种方法是殊途同归的(但是推荐使用第一种方法).
三、使用style属性对标签加载样式示例p style="font-size: 12px;color: #000;"使用css/p
此例使用了标签的style属性。
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
head
link rel="stylesheet" type="text/css" href="mystyle.css"
/head
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 style 标签定义内部样式表。
head
style type="text/css"
body {background-color: red}
p {margin-left: 20px}
/style
/head
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
p style="color: red; margin-left: 20px"
This is a paragraph
/p
在样式文件或style标签里设置全局样式，具体的写法如下：
style
*{
color: blue;
font-family: '楷体';
}
/style
color表示字体颜色， font-family表示字体样式
