本文从属于笔者的Web前端入门与最佳实践系列文章,本文只是文字化的归纳,
请前往这里交互式的浏览整个文档与查看效果。
重要的事情说三遍,请移步这里
重要的事情说三遍,请移步这里
重要的事情说三遍,请移步这里
当你希望分享一些产品、文件或者一个新的想法在你自己的网站上时,在你正式的发布网站之前,你需要把它打扮的漂漂亮亮,充满吸引力,不一定专业,但是至少要得体.
那么我们应该从哪里启动呢?如果你想了解我是怎么做的,那么请点击左边的链接
别忘了,设计是为了更好地展示内容.貌似这是一句废话,不过还是要强调网站中首要的元素正是内容,而不应该置若罔闻,放到最后.
我们正在编写的内容,就好像你看到的这段话,占据了一个网站90%以上的部分,为文本内容添加合适的样式任重而道远.
假设你已经决定好了要展示的内容,然后创建了一个空白的style.css文件,那么第一条自定义样式规则会是啥呢?
在单行中放置过长的文本会难以解析,并且难以阅读.为每行的单词数目设置一个上限有助于提升整体的可读性,让读者好像为文本建立了一个笆篱
body{margin:0auto;max-width:50em;}
浏览器默认的字体是Times,有时候看上去是如此的枯燥无味.尝试使用无衬线字体譬如Helvetica或者Arial能够提升你整个界面的感官
body{font-family:Helvetica,Arial,sans-serif;}
如果你打算使用衬线字体,试试Georgia.
我们选择一些有趣的字体,能够让网站更有吸引力,下一步,就让我们再提高可读性.
王下邀月熊:这里原作者是为英文字体样式做了说明,我没有修改为中文样式,大概是懒吧,不过因为中文字体往往都比较大,建议使用font-spider等类似工具来抽取你所需要的字体
有时候用户会抱怨网站好像坏掉了,往往都是间隔的问题.在你文档的四周与内部都添加些间隔也能够美化你的网站.
body{line-height:1.5;padding:4em1em;}h2{margin-top:1em;padding-top:1em;}
只需要一些小小的操作就能让整个页面更加地和谐:
code,pre{background:#eee;}code{padding:2px4px;vertical-align:text-bottom;}pre{padding:1em;}
我们可以为边、背景乃至于body字体颜色设置更多的个性化显示.
body{color:#566b78;}code,pre{background:#f5f7f9;border-bottom:1pxsolid#d8dee9;color:#a7adba;}pre{border-left:2pxsolid#69c;}
上文中也提到过,文本是网站的主要内容,那么我们设置一个自定义的字体会为页面添加更多明显的标志.
你可以选择使用类似于Typekit这样的在线服务或者自定义些webfont,我们这里使用来自于免费的GoogleFonts服务的:Roboto
@import
推荐：