如何利用PHP和CSS改变网页文字大小

互联网 | 编辑: 2006-05-23 00:00:00转载 一键看全文

用PHP和CSS改变网页文字大小——在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法

如何利用PHP和CSS改变网页文字大小(下)

第二步:创建样式表

接下来,为每种文字大小创建样式表文件:small.css, medium.css和large.css,这是small.css的文件内容:

body {
font: 10px
}

同样,可以创建medium.css和large.css,分别使用17px和25px,将这些样式表文件和上一步创建的网页保存在同一个目录中。

第三步:创建文本大小的改变机制

正如上文介绍的,网页通过查找预先定义的会话变量可以"知道"加载哪个样式表文件,会话变量是通过脚本文件resize.php来控制的(参见列表B),该文件是在用户点击了网页顶部改变文字大小的按钮时激活的,这是resize.php的内容:

列表B

// start session
// import selected size into session
session_start();
$_SESSION['textsize'] = $_GET['s'];
header("Location: " . $_SERVER['HTTP_REFERER']);
?>
  这很简单,当用户选择了一种新的文本大小,resize.php通过GET方法来获得字号的值,并将其存储在会话变量$_SESSION['textsize']中,然后将浏览器重新定向到原来打开的哪个页面。

当然,这里还缺少一个组件:智能化得让网页自动检测现在用户现在选定的文本大小并加载相应的样式表,为加入这一功能,打开您的网页文件index.php,并将以下语句加入到文件的开头(参见列表C):

{ad}列表C

// start session
// import variables
session_start();
// set default text size for this page
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'medium';
}
?>

You should also add a stylesheet link between the ... elements, as follows:
type="text/css">

这是列表D,完整的index.php文件应该是这样的:

列表D:

// start session
// import variables
session_start();
// set default text size for this page
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'medium';
}
?>

type="text/css">


Text size: small | href="resize.php?s=medium">medium | large


Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua. Utenim
ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea
commodoconsequat.
Duisauteirure dolor in reprehenderit in
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
officiadeseruntmollitanim id estlaborum.

理解这种工作方式应该很简单了,当载入网页的时候,它恢复当前的会话,并检查$_SESSION['textsize']变量是否与当先选择的字号相符,然后通过元素动态加载相应的样式表,这将导致网页以正确的大小自动重新渲染。联合使用PHP和CSS与传统的方式略有不同,传统方式是使用JavaScript来动态改变CSS样式表,相对于JavaScript方法,PHP方法的优势在于您不需要依赖客户端对JavaScript的支持,您也不需担心专门创建针对某个浏览器的工作,也许下一次您坐下来设计网站的时候会发现这种方法很有效,祝编程愉快!

提示:试试键盘 “← →” 可以实现快速翻页 

总共 2 页< 上一页12
一键看全文

本文导航

相关阅读

每日精选

点击查看更多

首页 手机 数码相机 笔记本 游戏 DIY硬件 硬件外设 办公中心 数字家电 平板电脑