您的位置：首页 > Web前端 > CSS

Csdn 之"自定义CSS样式"

2016-06-01 08:53 411 查看

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样式如下：



[css] view plain copy

/*登录，注册菜单选项*/
/*列表格式*/
#csdnblog_header ul#personalnav{
float:right;
margin:0 1em;
position:absolute;
top:1px;
right:0px;
}
/*列表项中注册链接标签初始格式*/
#csdnblog_header UL#personalnav LI A#a_register {
    background-color:#c8db4a ;
    border:2px  dashed #c8db4a;
    text-align:center;
    color:#fff;
}
/*列表项中注册链接标签鼠标悬浮格式*/
#csdnblog_header UL#personalnav LI A#a_register:hover {
    background-color:#8CB5F2;
    border:2px  dashed #8CB5F2;
    text-align:center;
    color:#000;
    text-decoration:underline;
}
/*列表项中登录链接标签初始格式*/
#csdnblog_header UL#personalnav LI A#a_login{
    background-color:#8CB5F2;
    border:2px  dashed #8CB5F2;
    text-align:center;
    color:#fff;
}
/*列表项中登录链接标签鼠标悬浮格式*/
#csdnblog_header UL#personalnav LI A#a_login:hover {
    background-color:#c8db4a ;
    border:2px  dashed #c8db4a;
    text-align:center;
    color:#000;
    text-decoration:underline;
}

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

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

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

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

是不是要漂亮些了啊，下面自己试试吧！

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

输入样式表也是引用一个外部样式表，但不是通过link元素而是在style区内通过@import语法来引用：   @import url（css的url地址）；可以在<style>元素内引用一些输入样式表，同时又指定一些只应用于本文档的样式。但是（Netscape）浏览器对输入样式表的支持还不普遍，所以建议使用<link>来引用外部样式表。
举例：输入样式表和嵌入样式表的联合使用。
<head>
<style type = “type/css”>

</style>
</head>

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

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

所以我们可以将自定义的样式写在*.css文件中，假如我有自定义的css文件csdn.css，那我想使用这个样式表
则将csdn.css样式表上传到网络上,然后在 "自定义css样式" 下面的文本框中输入   url(样式表文件地址)，
点击 “保存配置” 完成自定义样式。

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

[css] view plain copy

/*页面body块样式*/
body{
background:#f7fdfd;
text-align:center;
}
/*整体页面样式*/
#csdnblog_allwrap{
width:970px;
height:auto;
}
/*页面左侧*/
#csdnblog_sidebar{
width:250px;
}
/*页面右侧*/
#csdnblog_content{
width:720px;
}
/*页面头部块*/
#csdnblog_header{
width:950px;
height:164px;
background:url(http://hi.csdn.net/attachment/200911/11/3766949_1257937597mmn8.gif);
}

/*页面查询块*/
#csdnblog_header ul#blogsearchsty{
float:left;
position:absolute;
top:135px;
right:0px;
float:right;
}
/*页面菜单块*/
#csdnblog_header ul#menu{
height:25px;
float:left;
top:138px;
position:absolute;
width:auto;
font-size:14px;
}
#csdnblog_header ul#menu li{
float:left;
width:76px;
text-align:center;
}
#csdnblog_header ul#menu li a{
float:left;
color:#000;
padding:0 0 0 0;
margin:0 0 0 0;
width:75px;
background:url(http://hi.csdn.net/attachment/200911/11/3766949_1257939493L19h.gif);
}
#csdnblog_header ul#menu li a:hover{
color:#F00;
text-decoration:underline;
}

/*页面尾部块*/
#pubfooter{
background:url(http://hi.csdn.net/attachment/200911/11/3766949_1257943278j041.gif);
}

/*左侧个人blog资料信息块（外）*/
#csdnblog_sidebar {
DISPLAY: inline;
FLOAT: left;
MARGIN: 2px 0px 0px;
TEXT-ALIGN: left;
background-color:#e6faf8;
width:245px;
}
/*左侧个人blog资料信息块（内）*/
#csdnblog_sidebar DIV.gutter {
DISPLAY: inline;
FLOAT: left;
MARGIN: 5px 6px;
OVERFLOW: hidden;
WIDTH:234;
FONT-FAMILY: "Microsoft yahei",verdana,sans-serif;
background-color:#FFF;
}
.aboutauthor dl dt{
background:url(http://hi.csdn.net/attachment/200911/12/3766949_1258000370ytn6.gif);
border:0px;
width:212px;
height:30px;
padding-top:5px;
}
/*登录，注册菜单选项或已登录用户的菜单项*/
/*页面个人blog菜单管理块*/
#csdnblog_header ul#personalnav{
float:right;
margin:0 1em;
position:absolute;
top:1px;
right:0px;
}

#csdnblog_header UL#personalnav LI A#a_register {
    background-color:#c8db4a ;
    border:2px  dashed #c8db4a;
    text-align:center;
    color:#fff;
}
#csdnblog_header UL#personalnav LI A#a_register:hover {
    background-color:#8CB5F2;
    border:2px  dashed #8CB5F2;
    text-align:center;
    color:#000;
    text-decoration:underline;
}
#csdnblog_header UL#personalnav LI A {
    background-color:#8CB5F2;
    border:2px  dashed #8CB5F2;
    text-align:center;
    color:#fff;
}
#csdnblog_header UL#personalnav LI A:hover {
    background-color:#c8db4a ;
    border:2px  dashed #c8db4a;
    text-align:center;
    color:#000;
    text-decoration:underline;
}
.new {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 200;
    height:auto;
}
.default_contents{
               border:1px dashed ;
}

5、我的页面效果：

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航