关闭

Csdn 之"自定义CSS样式"

325人阅读 评论(2) 收藏 举报

1、使用工具:

      《1》Firebug: 能方便得出页面中各个元素的css标记名;

             (1) Firebug 的下载、安装:

                   <1>打开火狐(Firefox)浏览器;

                   <2>查找、安装Firebug 如下图;

               

              

    

 

 

 

 

 

 

 

                   <3>打开、使用Firebug 如下图;

                        点击浏览器右下角的按钮打开Fire面板(如下)

                 

 点击Firebug面板左上角的按钮,再点击页面中的元素,则显示该元素的代码(如下)

             

     《2》Dreamweave:能方便、快捷的书写css样式;

 

2、所要了解的知识点:

     《1》各种css样式的优先级:

             页面中         style="css样式"                         

             页面中         <style type="text/css">css样式</style>    

             页面中         <link href="css样式文件" type="text/css" rel="stylesheet" />

            如上三种css样式,优先级为从高到低,即 上面的样式会覆盖下面的样式

            Csdn中的自定义css,就是利用上面的优先级达到自定义,自定义的css会插入到

            <style type="text/css">css样式</style> 中,从而覆盖原来导入的css样式

            文件,达到自定义样式的效果。但却不能覆盖 style="css样式" 中的样式,所以

            我们会经常遇到 显示效果 与我们自定义的样式不一样 的情况。

     《2》css中背景图片可以通过网络连接:

             可以先将要使用的背景图片上传到相册中,然后查看该图片的属性中url,再在css中

             background:url(图片url) ;  将图片设置为某个元素的背景图片。

     《3》自定义css和导入的css文件同时使用:

             写好自定义的css样式后,我们可以切换不同的风格,来使整体页面呈现出不同

             的效果。

 

3、自定义css样式实例(登录、注册 按钮效果):

     《1》通过Firebug 或直接 查看页面源文件 得到页面中登录、注册的Html代码如下:

             (1)通过Firebug

             (2)通过查看源文件

     《2》自定义该元素的css样式 如下:

    

  1. /*登录,注册菜单选项*/  
  2. /*列表格式*/  
  3. #csdnblog_header ul#personalnav{  
  4.  float:right;  
  5.  margin:0 1em;  
  6.  position:absolute;  
  7.  top:1px;  
  8.  right:0px;  
  9. }  
  10. /*列表项中注册链接标签初始格式*/  
  11. #csdnblog_header UL#personalnav LI A#a_register {  
  12.     background-color:#c8db4a ;  
  13.     border:2px  dashed #c8db4a;  
  14.     text-align:center;  
  15.     color:#fff;  
  16. }  
  17. /*列表项中注册链接标签鼠标悬浮格式*/  
  18. #csdnblog_header UL#personalnav LI A#a_register:hover {  
  19.     background-color:#8CB5F2;  
  20.     border:2px  dashed #8CB5F2;  
  21.     text-align:center;  
  22.     color:#000;  
  23.     text-decoration:underline;  
  24. }  
  25. /*列表项中登录链接标签初始格式*/  
  26. #csdnblog_header UL#personalnav LI A#a_login{  
  27.     background-color:#8CB5F2;  
  28.     border:2px  dashed #8CB5F2;  
  29.     text-align:center;  
  30.     color:#fff;  
  31. }  
  32. /*列表项中登录链接标签鼠标悬浮格式*/  
  33. #csdnblog_header UL#personalnav LI A#a_login:hover {  
  34.     background-color:#c8db4a ;  
  35.     border:2px  dashed #c8db4a;  
  36.     text-align:center;  
  37.     color:#000;  
  38.     text-decoration:underline;  
  39. }  

     《3》将如上的自定义css代码写入到自己网页中 如下:

            (1) 点击我的博客后面的 (配置) 进入博客设置页面

 

 

            (2) 将自定义css代码填入到  "自定义css样式" 下面的文本框,点击 "保存配置"

                 完成自定义css样式设置。   该代码的效果如下:

          

             是不是要漂亮些了啊 ,下面自己试试吧!

   《4》另一种方法 (通过输入样式表)(未用过)

 

 输入样式表也是引用一个外部样式表,但不是通过link元素而是在style区内通过@import语法来引用:   @import url(css的url地址);可以在<style>元素内引用一些输入样式表,同时又指定一些只应用于本文档的样式。但是(Netscape)浏览器对输入样式表的支持还不普遍,所以建议使用<link>来引用外部样式表。 

举例:输入样式表和嵌入样式表的联合使用。

<head>

<style type = “type/css”>

<!--

@import url(corerules.css);

@import url(linkrules.css);

/* a rule specific to this document */

h1{

  font : 24pt;

  font-family : Sans-Serif;

  color : black;

  text-align : center;

}

-->

</style>

</head>

 由于可以通过在<style type = “type/css”></style>中写如下代码: 

@import url(样式表文件地址);

 来导入样式表

 

所以我们可以将自定义的样式写在*.css文件中,假如我有自定义的css文件csdn.css,那我想使用这个样式表

则将csdn.css样式表上传到网络上,然后在 "自定义css样式" 下面的文本框中输入   url(样式表文件地址),

点击 “保存配置”  完成自定义样式。

 

 

4、我的页面自定义css样式代码:

  1. /*页面body块样式*/  
  2. body{  
  3.  background:#f7fdfd;  
  4.  text-align:center;  
  5. }  
  6. /*整体页面样式*/  
  7. #csdnblog_allwrap{  
  8.  width:970px;  
  9.  height:auto;  
  10. }  
  11. /*页面左侧*/  
  12. #csdnblog_sidebar{  
  13.  width:250px;  
  14. }  
  15. /*页面右侧*/  
  16. #csdnblog_content{  
  17.  width:720px;  
  18. }  
  19. /*页面头部块*/  
  20. #csdnblog_header{  
  21.  width:950px;  
  22.  height:164px;  
  23.  background:url(http://hi.csdn.net/attachment/200911/11/3766949_1257937597mmn8.gif);  
  24. }  
  25.   
  26. /*页面查询块*/  
  27.  #csdnblog_header ul#blogsearchsty{  
  28.  float:left;  
  29.  position:absolute;  
  30.  top:135px;  
  31.  right:0px;  
  32.  float:right;  
  33. }  
  34. /*页面菜单块*/  
  35. #csdnblog_header ul#menu{  
  36.  height:25px;  
  37.  float:left;  
  38.  top:138px;  
  39.  position:absolute;  
  40.  width:auto;  
  41.  font-size:14px;  
  42. }  
  43. #csdnblog_header ul#menu li{  
  44.  float:left;  
  45.  width:76px;  
  46.  text-align:center;  
  47. }   
  48. #csdnblog_header ul#menu li a{  
  49.  float:left;  
  50.  color:#000;  
  51.  padding:0 0 0 0;  
  52.  margin:0 0 0 0;  
  53.  width:75px;  
  54.  background:url(http://hi.csdn.net/attachment/200911/11/3766949_1257939493L19h.gif);  
  55. }  
  56. #csdnblog_header ul#menu li a:hover{  
  57.  color:#F00;  
  58.  text-decoration:underline;  
  59. }  
  60.   
  61. /*页面尾部块*/  
  62. #pubfooter{  
  63.  background:url(http://hi.csdn.net/attachment/200911/11/3766949_1257943278j041.gif);  
  64. }  
  65.   
  66. /*左侧个人blog资料信息块(外)*/  
  67. #csdnblog_sidebar {  
  68.  DISPLAY: inline;   
  69.  FLOAT: left;   
  70.  MARGIN: 2px 0px 0px;  
  71.  TEXT-ALIGN: left;  
  72.  background-color:#e6faf8;  
  73.  width:245px;  
  74. }  
  75. /*左侧个人blog资料信息块(内)*/  
  76. #csdnblog_sidebar DIV.gutter {  
  77.  DISPLAY: inline;  
  78.  FLOAT: left;  
  79.  MARGIN: 5px 6px;  
  80.  OVERFLOW: hidden;  
  81.  WIDTH:234;  
  82.  FONT-FAMILY: "Microsoft yahei",verdana,sans-serif;  
  83.  background-color:#FFF;  
  84. }  
  85. .aboutauthor dl dt{  
  86.  background:url(http://hi.csdn.net/attachment/200911/12/3766949_1258000370ytn6.gif);  
  87.  border:0px;  
  88.  width:212px;  
  89.  height:30px;  
  90.  padding-top:5px;  
  91. }  
  92. /*登录,注册菜单选项或已登录用户的菜单项*/  
  93. /*页面个人blog菜单管理块*/  
  94. #csdnblog_header ul#personalnav{  
  95.  float:right;  
  96.  margin:0 1em;  
  97.  position:absolute;  
  98.  top:1px;  
  99.  right:0px;  
  100. }  
  101.   
  102. #csdnblog_header UL#personalnav LI A#a_register {  
  103.     background-color:#c8db4a ;  
  104.     border:2px  dashed #c8db4a;  
  105.     text-align:center;  
  106.     color:#fff;  
  107. }  
  108. #csdnblog_header UL#personalnav LI A#a_register:hover {  
  109.     background-color:#8CB5F2;  
  110.     border:2px  dashed #8CB5F2;  
  111.     text-align:center;  
  112.     color:#000;  
  113.     text-decoration:underline;  
  114. }  
  115. #csdnblog_header UL#personalnav LI A {  
  116.     background-color:#8CB5F2;  
  117.     border:2px  dashed #8CB5F2;  
  118.     text-align:center;  
  119.     color:#fff;  
  120. }  
  121. #csdnblog_header UL#personalnav LI A:hover {  
  122.     background-color:#c8db4a ;  
  123.     border:2px  dashed #c8db4a;  
  124.     text-align:center;  
  125.     color:#000;  
  126.     text-decoration:underline;  
  127. }  
  128. .new {  
  129.     positionabsolute;  
  130.     top: 0px;  
  131.     right: 0px;  
  132.     z-index200;  
  133.     height:auto;  
  134. }  
  135. .default_contents{  
  136.                border:1px dashed ;  
  137. }  

 

5、我的页面效果:

   《1》自定义与default皮肤搭配(当前使用)

 

 

 

   《2》自定义与pinktree皮肤搭配

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:358583次
    • 积分:3914
    • 等级:
    • 排名:第8479名
    • 原创:49篇
    • 转载:529篇
    • 译文:0篇
    • 评论:20条
    最新评论