站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
MolyX 文本属性
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
__NOTOC__ <span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[MolyX CSS教程|上一页]] | {{Template:MolyX导航}}</span> <div style="clear:both;"></div> '''定义间距''' 前面说了如何用[[CSS]]定义字体、颜色和背景属性,那么定义好的文本我们怎么对它进行排版呢? 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: <div> [[Image:mx7.png]] </div> 我们可以从表中看到在这里可以定义文本的文字间距、字母间距、装饰、对齐方式、缩进方式和行高等属性。 举个例子来看看吧。比如下面这段文字(如左下图): <div> [[Image:mx8.png]] </div><br> <div> [[Image:mx9.png]] </div> 我们对这段文字加上文本属性重新排版,排版后的效果如右上图所示。 我们看到经过文本属性处理的文本字与字之间多了间距,行与行之间多了行高,对齐方式变成了两端对齐,并且段首又多缩进了两格。这是怎样实现的呢?很简单,只是在html中加了如下的代码: <pre> <p style=“letter-spacing:1em;text-align:justify;text-indent: 4em;line-height:17pt”>……</p> </pre> //*letter-spacing设置了字间距为1em,其中1em为一个长度单位;text-align设置了对齐方式为两端对齐;indent设置了缩进格为4em;line-height设置了行高为17pt*// 从上面的例子,我们可以看出利用CSS的文本属性可以方便的对页面中的文本进行排版。下一节我将向您介绍文本的Text-decoration属性的一个小应用。 '''装饰超链接''' [[网页]]默认的[[链接]]方式是这样的:未访问过的链接是蓝色文字并带蓝色的下划线,访问过的[[超级链接]]是深紫色的文字并带深紫色的下划线。如果您所有的网页都是这种样式,是不是很单调呢? 其实,利用文本属性中的Text-decoration属性就可以实现对超链接的修饰。我们先看下面的这段代码: <pre> <html> <title>link css</title> <head> <style> <!-- //*定义伪类元素(a:),大括号内定义了前景色属性和文本装饰属性, hover加上‘font-size’属性目的是让鼠标激活链接时改变字体*// a:link{color:green;text-decoration:none} //*未访问时的状态,颜色为绿色(green),文本装饰属性(text-decoration)值 为没有(none)*// a:visited{color:red;text-decoration:none} //*访问过的状态,颜色为红色(red),文本装饰属性值为没有*// a:hover{color:blue;text-decoration:overline;font-size:20pt} //*鼠标激活的状态,颜色为蓝色(blue), 文本装饰属性值为上划(overline), 字体大小为20pt*// --> </style> </head> <body> <p style=“font-family:行书体;font-size:18pt”> <a href=“http://www.hongen.com”>未访问的链接</a></p> //*加链接,显示三种不同状态,并且定义了链接文本的字体和大小*// <p> <a href=“http://www.hongen.com”>访问过的链接</a></p> <p> <a href=“http://www.hongen.com”>鼠标激活的链接</a></p> </body> </html> </pre> 我们从例子中看到没有访问过的链接以绿色显示,并且去掉了下划线;而访问过的链接以红色且没有下划线显示;另外,当鼠标激活链接时,链接以蓝色显示,并且加上了上划线。这种效果是怎么实现的呢?它除了运用了文本属性中的text-decoration属性,而且采用了伪类元素。 通过上面的代码注释,相信您应该对伪类元素有一个大概认识。实际上我们用到的这种伪类应当称之为“锚伪类”,它规定了链接不同状态下的效果。 怎么样,是不是很简单的就可以实现动态链接的效果,赶紧自己动手试一试吧!下一节我将向您介绍“容器”属性。 [[category:MolyX手册]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:MolyX导航
(
编辑
)