打印

怎样控制正文的字体大小

各位高手,

请问怎样用CSS控制新闻正文的字体大小,
(如搜狐的新闻http://news.sohu.com/20050118/n223987777.shtml),仅仅是正文的字体(全球最大的商用客机——欧洲空中客车公司的A380巨型客机,......驱动力  31.8吨

  最高时速 1078.2公里(客机);1041.2公里(货机)

  航程  14805.5公里

  本版编译 李斌

页面其他地方的字体不变。


 提示:您可以先修改部分代码再运行
I follow W3C Web Content Accessibility Guidelines.
Fifty Studio  
是新闻的正文,怎样用CSS来实现字体大(16px)中(14px)小(12px)的切换

(如搜狐的新闻http://news.sohu.com/20050118/n223987777.shtml


访问者要以大字体浏览,只要点“大”,新闻正文就以16px显示;
访问者要以中字体浏览,只要点“中”,新闻正文就以14px显示;
默认是小字体(12px)

方便不同视力的人浏览。

这应该要三个CSS来控制字体大小的切换,但怎样写,及怎样调用才最简洁。请高手帮忙。
把正文放在一个指定ID的单元格中
用JS代码控制他就行了。

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
那应该怎样写JS呢,才符合标准。我对JS一点都不感冒

TOP

效果:http://fifty.512j.com/test/
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>demo</title>
<script src="style.js" type="text/javascript"></script>
<link rel="stylesheet" href="12.css" type="text/css" media="all" title="1" />
<link rel="alternate stylesheet" type="text/css" href="14.css" title="2" />
<link rel="alternate stylesheet" type="text/css" href="16.css" title="3" />
</head>
<body><p></p><div><a onclick="setActiveStyleSheet('3'); return false;" href="javascript:void()">大</a>│<a onclick="setActiveStyleSheet('2'); return false;" href="javascript:void()">中</a>│<a onclick="setActiveStyleSheet('1'); return false;" href="javascript:void()">默认</a></div><p></p>
<div id="main">
<p>全球最大的商用客机——欧洲空中客车公司的A380巨型客机,将于北京时间今晚6时左右,正式在法国图卢兹下线。届时英国首相布莱尔、法国总统希拉克、德国总理施罗德和西班牙首相萨帕特罗等政要将出席揭幕仪式。它是欧盟和空中客车公司的一大赌注,明年投入营运后可能取代波音747成为新的空中霸王,也可能成为不符合21世纪民用航空经营模式的失败产品。</p>
<p><b>A380诞生经过</b></p>
<p>空中客车公司开始探讨能否制造500个座位以上的营运客机,以便跟美国波音公司的747客机竞争;</p>
<p>驱动力  31.8吨</p>
<p>最高时速 1078.2公里(客机);1041.2公里(货机)</p>
<p>航程  14805.5公里</p>
<p>本版编译 李斌</p></div>
</body>
</html>
I follow W3C Web Content Accessibility Guidelines.
Fifty Studio  

TOP

厉害

TOP

谢谢。

那style.js 的代码是不是这段:

<a onclick="setActiveStyleSheet('3'); return false;" href="javascript:void()">大</a>│<a onclick="setActiveStyleSheet('2'); return false;" href="javascript:void()">中</a>│<a onclick="setActiveStyleSheet('1'); return false;" href="javascript:void()">默认</a>

TOP

style.js
复制内容到剪贴板
代码:
function setActiveStyleSheet(title)
{
    var i, a, main;
    for(i = 0; (a = document.getElementsByTagName("link")[i]); i++)
    {
        if (a.getAttribute("rel").indexOf("style") != -1 &&
            a.getAttribute("title"))
        {
            a.disabled = true;
            if (a.getAttribute("title") == title)
                a.disabled = false;
        }
    }
}
function getActiveStyleSheet()
{
    var i, a;
    for(i = 0; (a = document.getElementsByTagName("link")[i]); i++)
    {
        if(a.getAttribute("rel").indexOf("style") != -1 &&
           a.getAttribute("title") && ! a.disabled)
            return a.getAttribute("title");
    }
    return null;
}
function getPreferredStyleSheet()
{
    var i, a;
    for (i = 0; (a = document.getElementsByTagName("link")[i]); i++)
    {
        if(a.getAttribute("rel").indexOf("style") != -1 &&
           a.getAttribute("rel").indexOf("alt") == -1 &&
           a.getAttribute("title"))
            return a.getAttribute("title");
    }
    return null;
}
function createCookie(name, value, days)
{
    if (days)
    {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name)
{
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++)
    {
        var c = ca[i];
        while (c.charAt(0) == ' ')
            c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0)
            return c.substring(nameEQ.length, c.length);
    }
    return null;
}
window.onload = function(e)
{
    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);
}
window.onunload = function(e)
{
    var title = getActiveStyleSheet();
    createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
I follow W3C Web Content Accessibility Guidelines.
Fifty Studio  

TOP