网络编程
位置:首页>> 网络编程>> 网页设计>> CSS文字排版终极指南

CSS文字排版终极指南

作者:神采飞扬 来源:前端观察 发布时间:2010-01-19 10:30:00 

标签:文字,排版,css,font

在今天的设计中,排版常常被忽视,特别是被网页设计师忽视。这真是件遗憾的事情因为CSS可以做很多事情来控制我们的排版。也就是说,我们被局限于某些“网络安全”排版,但是我们不应该限制我们自己的创造性。本文整理了一些用于在网页上排版的CSS技巧。


Font属性

CSS提供了font属性,它允许我们在我们的页面中调整文字。这是一系列的关于语法和如何使用CSS调整文字的概述。

Font-size

使用font-size可以修改你的文字的大小。

font-size: 1.2em;
font-size: 12px;
font-size: 10pt;

预览
  1. 文字大小为1.2em.

  2. 文字大小为12px.

  3. 文字大小为10pt.

PS:关于font-size,推荐一下码头写的《http://www.css88.com/archives/821

Font-weight

该属性用来改变你的文字的粗细(比如bold, bolder)

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;

预览
  1. font-weight设置为normal

  2. font-weight设置为bold

  3. font-weight设置为bolder

  4. font-weight设置为lighter

font-weight属性还可以使用100,200,300,400,500,600,700,800,900等数字值,数字越大,文字越粗。400等效于normal,700等效于bold。

Text-transform

text-transform属性允许你应用uppercase(大写), lowercase(小写), 以及capitalize(首字母大写)等效果到你的文字。当然,该属性不能用于中文。

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: inherit;

预览
  1. Capitalizes the first letter in every word

  2. Allows your html to be lower case the converts it all to uppercase characters

  3. ALLOWS YOUR HTML TO BE UPPERCASE THEN CONVERTS IT TO LOWERCASE, THIS WAS TYPED IN ALLCAPS

  4. inherits the text-transform property from its parent element

Text-decoration

text-transform属性允许你使用一些文字修饰,比如下划线(underline)、上划线(overline)、删除线(line-through)以及文字闪动(blink)。

text-decoration: normal;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;

预览
  1. text-decoration设置为normal

  2. text-decoration设置为underline

  3. text-decoration设置为overline

  4. text-decoration设置为line-through

  5. text-decoration设置为blink (只有Firefox 和Opera 支持)

Font-Variant

font-variant属性允许你制作小型大写字母效果,也就是将小写字母变成大写并减小字体型号

font-variant: normal;
font-variant: small-caps;
font-variant: inherit;

预览
  1. Font Variant 设置为 normal

  2. Font Variant 设置为 small-caps

  3. Font variant 设置为 inherit

Letter-Spacing 和 word-spacing

这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白,而word-spacing添加每个单词之间的空白。请注意,word-spacing对中文无效。

letter-spacing: normal;
letter-spacing: 2px;
letter-spacing: inherit;

预览
  1. Letter spacing 设置为 normal

  2. Letter spacing 设置为 2px

  3. Letter spacing设置为 inherit

font缩写

上面的font属性可以缩写,这样可以大大的提高你的css的效率。

font:font-style font-variant font-weight font-size[/line-height] font-family

请注意上面的缩写的书写顺序。另外,如果这里不设置line-height,元素的line-height将会被设置为默认的1,而不会从父级元素或body元素继承。使用缩写的时候,font-size和font-family是必须的,其它几项可根据情况不写。

0
投稿

猜你喜欢

  • 自动更新统计信息的基本算法是: · 如果表格是在 tempdb 数据库表的基数是小于 6,自动更新到表的每个六个修改。 · 如果表的基数是大
  • 安装MySQL假设你把所有必须的源码或者包都放在了/tmp下。如果你下载的是RPM包的话,那比较简单;如果你下载的是二进制包(你没有rpm程
  • Sql Server的存储过程是一个被命名的存储在服务器上的Transacation-Sql语句集合,是封装重复性工作的一种方法,它支持用户
  • HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同,HTML 5 并非仅仅用来表示 Web 内容,它的使命是将 W
  • 用css属性选择器可以有选择性地对链接样式进行控制,如让所有的外部链接都加一个小图标来标识其是一外部链接。但用css有弊端: 1、只支持Fi
  • asp如何将RGB颜色转化成到16进制的?在R G B中输入小于255的数字点击观看即可转换成#开通的16进制。代码如下:<%R_RG
  • 科讯5.0 标签和之前版本变化不大,如果用老版本的科讯,可以参考这个标签使用。相关文章:新云4.0 模板通用标签说明 标签清单:======
  • 有的时候,我们在网页中会用到复选框,也就是多选框,当用户提交输入信息的时候我们会获取复选框的内容,然后保存到数据库中,如经常用到的是用户输入
  • 2008年的圣诞节LOGO依旧延续着2007年的圣诞老人、鹿车、红帽子、圣诞树、蜡烛等元素装点。当然,也少不了雪花,但在LOGO设计上,较0
  • 因此为了节省服务器资源,应该尽可能关闭连接以释放连接所占有的资源,这种关闭记录集的连接而不关闭记录集的技术叫做断开记录集,这个记录集本身则称
  • <%dim conn     ’定义一个连接变量 dim&nbs
  • 代码如下:'个人代码风格注释(变量名中第一个小写字母表表示变量类型) 'i:为Integer型; 's:为Strin
  • 这个符合设计标准的三 级向上弹出菜单,纯css代码控制,没有使用javascript脚本,绿色环保,呵呵。兼容性应该更好。截图:<!D
  • 按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含
  • 分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没
  • 比如说在1-3000之内生成随机永不重复数,点击运行代码的时候请注意,此代码比较占用资源,如果硬件配置比较菜请把count改小。俺的电脑配置
  • 本文帮你六步改善SQL Server安全规划全攻略。一、什么是SQL注入式攻击所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的
  • 如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷,涌现出大量优秀精美的网页。大量网络信息的呈现
  • 使用ASP实现网站的目录树数据库结构(共使用了两个表)1。tblCategory字段名  类型   Root&
  • 英文的文档在这里,详细全面,本文仅为自己的学习笔记,只是试图通过转述加深自己的学习,不详细不全面。由于浏览器之间的差异,所以在JS中监听事件
手机版 网络编程 asp之家 www.aspxhome.com