来讲讲：网页计划教程:CSS笔墨排版技能年夜全

在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
网页制造Poluoluo文章简介：CSS笔墨排版最终指南.
译自：TheUltimateGuidetoCSSTypography
中文：CSS笔墨排版最终指南
请尊敬版权，转载请说明来历！多谢。
在明天的计划中，排版经常被无视，出格是被网页计划师无视。这真是件遗憾的事变由于CSS能够做良多事变来把持我们的排版。也就是说，我们被范围于某些“收集平安”排版，可是我们不该该限定我们本人的制造性。本文收拾了一些用于在网页上排版的CSS技能。

Font属性

CSS供应了font属性，它同意我们在我们的页面中调剂笔墨。这是一系列的关于语法和怎样利用CSS调剂笔墨的概述。
Font-size

利用font-size能够修正你的笔墨的巨细。

1. 123

复制代码

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

复制代码

预览

• 笔墨巨细为1.2em.
  
• 笔墨巨细为12px.
  
• 笔墨巨细为10pt.
  

Font-weight

该属性用来改动你的笔墨的粗细(好比bold,bolder)

1. 1234

复制代码

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

复制代码

预览

• font-weight设置为normal
  
• font-weight设置为bold
  
• font-weight设置为bolder
  
• 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(首字母年夜写)等效果到你的笔墨。固然，该属性不克不及用于中文。

1. 1234

复制代码

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

复制代码

预览

• Capitalizesthefirstletterineveryword
  
• Allowsyourhtmltobelowercasetheconvertsitalltouppercasecharacters
  
• ALLOWSYOURHTMLTOBEUPPERCASETHENCONVERTSITTOLOWERCASE,THISWASTYPEDINALLCAPS
  
• inheritsthetext-transformpropertyfromitsparentelement
  

Text-decoration

text-transform属性同意你利用一些笔墨润色，好比下划线(underline)、上划线(overline)、删除线(line-through)和笔墨明灭(blink)。

1. 12345

复制代码

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

复制代码

预览

• text-decoration设置为normal
  
• text-decoration设置为underline
  
• text-decoration设置为overline
  
• text-decoration设置为line-through
  
• text-decoration设置为blink(只要Firefox和Opera撑持)
  

Font-Variant

font-variant属性同意你制造小型年夜写字母效果，也就是将小写字母酿成年夜写并减小字体型号

1. 123

复制代码

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

复制代码

预览

• FontVariant设置为normal
  
• FontVariant设置为small-caps
  
• Fontvariant设置为inherit
  

Letter-Spacing和word-spacing

这两个属性都用来增加他们对应的元素中的空缺。letter-spacing增加字母之间的空缺，而word-spacing增加每一个单词之间的空缺。请注重，word-spacing对中文有效。

1. 123

复制代码

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

复制代码

预览

• Letterspacing设置为normal
  
• Letterspacing设置为2px
  
• Letterspacing设置为inherit
  

font缩写

下面的font属性能够缩写，如许能够年夜年夜的进步你的css的效力。

1. font-size:1.2em;font-size:12px;font-size:10pt;2

复制代码

1. font-size:1.2em;font-size:12px;font-size:10pt;3

复制代码

请注重下面的缩写的誊写按次。别的，假如这里不设置line-height，元素的line-height将会被设置为默许的1，而不会从父级元素或body元素承继。利用缩写的时分，font-size和font-family是必需的，别的几项可依据情形不写。
制造有吸引力的段落

关于更有吸引力的段落排版，能够接纳RobertBringhurst的办法，它商定：用你的笔墨巨细乘以30就能够失掉段落的宽度。
好比假如你的笔墨巨细是12px，用30乘以它，也就是360px，如许每行约莫能够出现65个英笔墨符。
不准确的段落巨细：

LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry’sstandarddummytexteversincethe1500s,whenanunknownprintertookagalleyoftypeandscrambledittomakeatypespecimenbook.Ithassurvivednotonlyfivecenturies,butalsotheleapintoelectronictypesetting,remainingessentiallyunchanged.
准确的段落巨细

LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry’sstandarddummytexteversincethe1500s,whenanunknownprintertookagalleyoftypeandscrambledittomakeatypespecimenbook.Ithassurvivednotonlyfivecenturies,butalsotheleapintoelectronictypesetting,remainingessentiallyunchanged.
Line-height示例

行高用来限制每行笔墨之间的空缺巨细。一个履历之谈就是让行高比你的字体年夜6-7px。
好比，假如你的笔墨巨细是12px，加上6px就是你的行高，也就是18px。
不准确的Line-Height

LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry’sstandarddummytexteversincethe1500s,whenanunknownprintertookagalleyoftypeandscrambledittomakeatypespecimenbook.Ithassurvivednotonlyfivecenturies,butalsotheleapintoelectronictypesetting,remainingessentiallyunchanged.
准确的Line-Height

LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry’sstandarddummytexteversincethe1500s,whenanunknownprintertookagalleyoftypeandscrambledittomakeatypespecimenbook.Ithassurvivednotonlyfivecenturies,butalsotheleapintoelectronictypesetting,remainingessentiallyunchanged.

明晰的夸大笔墨

下划线应当只用于笔墨链接，而斜体是一个更明晰的可选计划.
不准确的例子

LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry’sstandarddummytexteversincethe1500s,whenanunknownprintertookagalleyoftypeandscrambledittomakeatypespecimenbook.Ithassurvivednotonlyfivecenturies,butalsotheleapintoelectronictypesetting,remainingessentiallyunchanged.
准确的例子

LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry’sstandarddummytexteversincethe1500s,whenanunknownprintertookagalleyoftypeandscrambledittomakeatypespecimenbook.Ithassurvivednotonlyfivecenturies,butalsotheleapintoelectronictypesetting,remainingessentiallyunchanged.
first-letter与first-line

望文生义，first-letter就是第一个字母，first-line是第一行笔墨，它们是少有的被一切支流扫瞄器撑持的CSS2.1伪元素，你能够为它们界说恣意款式。
示例代码

1. 123

复制代码

1. font-size:1.2em;font-size:12px;font-size:10pt;5

复制代码

前端察看LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry’sstandarddummytexteversincethe1500s,whenanunknownprintertookagalleyoftypeandscrambledittomakeatypespecimenbook.Ithassurvivednotonlyfivecenturies,butalsotheleapintoelectronictypesetting,remainingessentiallyunchanged.前瞻–CSS3

已有一部分很棒的CSS3特征能够用到你的计划中了。固然这些中的一部分新属性还不克不及用于IE，可是你也许懂得这对IE来讲是常事儿，以是你无妨尝尝。
@Font-face

@font-face同意你前次一个字体文件到你的网站服务器并将其引进到你的内部CSS文件中，然后就能够将它使用到你的网站的任何笔墨上。
这是处置笔墨的最年夜的功效，可是随之而来的是它的负面效果。因为版权成绩，只要多数的字体“被同意”利用。这些字体也就是CSS3平安就在这里内里提到的。固然，关于中笔墨体来讲，除版权成绩，另有网速的成绩，一样平常中笔墨体动辄几MB的巨细，字体文件下载到扫瞄器就要几分钟，这关于用户来讲是不划算的。
利用@font-face

在这个例子中我在我的网站的根目次下放了一个font文件夹，然后将必要用到的字体放进该文件夹。你起首必要声明@font-face属性以导进你的字体文件，然后利用该字体称号来把持别的元素的字体。

1. font-size:1.2em;font-size:12px;font-size:10pt;6

复制代码

1. font-size:1.2em;font-size:12px;font-size:10pt;7

复制代码

Text-Shadow

text-shadow属性赶走了用Photoshop为某些元素制造下拉暗影的需求，并给你供应静态的暗影把持。固然，该属性IE其实不撑持。
[size=2em]示例题目

1. font-size:1.2em;font-size:12px;font-size:10pt;8

复制代码

1. font-size:1.2em;font-size:12px;font-size:10pt;9

复制代码

[size=2em]示例题目2

1. font-size:1.2em;font-size:12px;font-size:10pt;2

复制代码

1. 12341

复制代码

[size=2em]示例题目3

1. font-size:1.2em;font-size:12px;font-size:10pt;2

复制代码

1. 12343

复制代码

PS：呃，实在前端察看的文章题目和章节的二级题目都用了text-shadow，并且仍是用了更大度的RGBa色彩。
应战

本文中提到的这些手艺都只是一个进门指南。试着接纳并完成你喜好的手艺到你的计划中。排版多是一个网站中最主要的部分，请不要忽视它。
PS:本文在原文的基本上，增补了大批内容，好比first-letter和first-line部分——神飞
关于原作者

ShaneJeffers是ThreeStyles的兴办者和作者。他对计划趋向和教程有共同的喜欢。你能够经由过程这个接洽页面和他接洽到他大概在twitter上存眷他@ThreeStyles
</p>
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

可以使用 CSS 检查工具进行设计。

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。