网页文字应用CSS的一些技巧

2016-02-19 23:23 4 1 收藏

下面是个网页文字应用CSS的一些技巧教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

我想以一章的篇幅来讨论用CSS设定文字样式的做法是个好点子.一般处理文字内容大概是应用CSS最多的地方,就算对没有完全遵守标准的网站来说也是一样.去掉网页中反复出现的font标签曾经是(现在也是)十分吸引设计者的事情,而且不难看出以CSS控制文字排印的巨大优势,也就是进一步分离内容和展示方式.

从先前的很多例子我们知道了CSS能处理许多情况,而设定文字样式就算对最基本的网页来说也是加上设计元素最简单的方法.同时,以CSS为文字加上样式也能让我们避免在页面内加上不必要的图片.

在这一章里,我们将看到CSS如何把一段乏味普通的文字带到另一个高度(以新色彩,大小和字体).

如何让超文本看起来更酷?

指定文字样式是CSS最擅长的工作之一,就算是面对略嫌老旧,不完整支持CSS进阶功能的浏览器也是一样.在过去,设计者与开发者或许会想在设计文字达到大小,粗体之外的效果时,制作出以今日标准来看无法忍受并且难以使用的网页(曾经看过文字大多以图片表现的网页吗?但你又恰巧在使用文字浏览器的时候...)

为了提供你一些使用图片之外的替代方法同时能回答上面这个问题,在这章中,会用一段尚未设定样式的文字作为开头,逐渐为它加上各种CSS规则,使它成为引人注目的设计.

不断改变的Times

开始先以浏览器的预设字体看一段即将处理的文字.以我的情形来说,预设字体是16像素的Times.并在Mac OS X上面使用Safari浏览器,因为这样,所以看到的文字会是以反锯齿方式描绘的,如果是使用Windows XP并启动了ClearType的话,也能看到类似的效果.

Times(或者是变体 Times New Roman)是许多浏览器的预设字体,然而,这很容易被使用者改成他们自己喜欢的字体,因此你当然不能依赖这个预设值.

图13-1显示了我们在本章里使用的尚未加上样式的文字内容:一个以h1标记的简单标题,跟这是三段家居装潢的技巧说明.

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

图13-1 浏览器显示标题,文字的预设效果

来源:http://www.tulaoshi.com/n/20160219/1629789.html

延伸阅读
标签: Web开发
其实去年的时候,我就有过接触css了都是跟着一些网页教程学做的无非是用来控制一下link,vlink之类的那个时候觉得css好像也不过如此,对于层什么那个时候很不屑于顾,因为感觉层定位起来不如表格方便今年十月份的时候,正式开始学习css才发现一些网站不用表格,仍然可以做到非常的好除此之外css还有着对于大流量网站的速度优势到现在为止,断断...
标签: Web开发
CSS官方站点 CSS Recommendations http://www.w3.org/TR/REC_CSS1 http://www.w3.org/TR/REC_CSS2 CSS在线中心 w3c CSS Activity page http://www.w3.org/style/css 指向css的规范,思路,以及css的相关站点,有好多有用资料 CSS错误检测站点 w3c CSS Test Suite http://www.w3.org/style/css/test 提供用于测试css实现的相当完整的...
互联网行业,几乎每天都有新的网站上线,旧的网站改版,但不论是新站还是改版都有一个共同的特征就是’全新’,全新的产品结构,全新的视觉风格带来全新的用户体验,这样的创新和调整多多少少都会给用户带来些许茫然。 最近关注一些大型站点改版设计,如七月末淘宝的改版2013淘宝新详情页改版出炉以及针对京东改版谈网页设计趋势,...
标签: Web开发
CSS命名规范 一.文件命名规范 全局样式:global.css; 框架布局:layout.css; 字体样式:font.css; 链接样式:link.css; 打印样式:print.css; 二.常用类/ID命名规范 页 眉:header 内 容:content 容 器:container 页 脚:footer 版 权:copyright 导 航:menu 主导航:mainMenu 子导航:subMenu 标 志:Logo...
下面这些都是使用CSS3制作的网页动画演示,通过这些内容可以了解CSS3的强大,此外部分动画结合了Javascript脚本来运行,其中有些演示内容是十分有用的,可以应用在网页制作中,而且大多数演示功能看起来很帅,不过如果要浏览这些演示效果的话可能最好别用IE浏览器(作者原话:)) 1.使用jQuery的CSS3时钟 2.模拟时钟 3.使用方向键旋转的3D盒...

经验教程

845

收藏

85
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部