4分钟内完成网页设计:简单美观通用的CSS - jgthms


本文入选最受欢迎的黑客新闻文章。几分钟内让你学会编写一个简单的HTML网页:
假设您有一个产品,一个产品组合,或者只是一个想与自己网站上的所有人共享的想法。在将其发布到Internet上之前,您希望使其看起来有吸引力,专业或至少看起来不错。

内容
设计的目的是增强所应用内容的表示。听起来似乎很明显,但是内容是网站的主要元素,不应将其作为事后考虑。
书面内容(例如您当前正在阅读的段落)占Web的90%以上。样式化此文本内容将有很长的路要走。
假设您已经完成了要发布的内容并刚刚创建了一个空style.css文件:

<!DOCTYPE html>
<html>
<head>
<style>

</style>
    </head>
<html>
<body>
    这里是正文内容
</body> 
</html>

 
长行文本可能难以解析,因此很难阅读。设置每行字符数限制可以大大提高文本墙的可读性和吸引力:
body {
  margin: 0 auto;
  max-width: 50em;
}

将上面代码贴入第一份代码的style之间。
 
浏览器的字体默认为"Times",看起来不那么吸引人(主要是因为它是“未样式化”的字体)。切换为Sans-Serif字体,例如"Helvetica"或"Arial"可以大大改善网页的外观。(中文字体切换为微软雅黑)
body {
 font-family:'Segoe UI',SegoeUI,'Microsoft YaHei';
}

 
当页面看起来“破碎”时,通常是间距问题。在内容的周围和内部提供空间可以增加页面的吸引力。

body {
  line-height: 1.5;
  padding: 4em 1em;
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
}
 

在白色背景上的黑色文本在眼睛上可能很刺眼。为正文选择较柔和的黑色阴影会使页面阅读更舒适:
body {
  color: #555;
}

 
为了保持适当的对比度,让我们为重要的单词选择较深的阴影

h1,
h2,
strong {
  color: #333;
}
 

只需进行一些其他操作即可校正页面的平衡:
code,
pre {
  background: eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}
 

大多数品牌的原色都具有视觉上的重心。在网站上,这里强调诸如链接的交互元素。

a {
  color: e81c4f;
}

强调色可以用更微妙的阴影进行补充,以用于边框,背景,甚至是正文。

body {
  color: #566b78;
}

code,
pre {
  background: f5f7f9;
  border-bottom: 1px solid d8dee9;
  color: a7adba;
}

pre {
  border-left: 2px solid #69c;
}

以上是原文简单的CSS,可以通用美观,总结如下:

<!DOCTYPE html>
<html>
<head>

<style>
body {
  margin: 0 auto;
  max-width: 50em;
  font-family:'Segoe UI',SegoeUI,'Microsoft YaHei';
  line-height: 1.5;
  padding: 4em 1em;
  color: #555;
}
h2 {
  margin-top: 1em;
  padding-top: 1em;
}
h1,
h2,
strong {
  color: #333;
}
code,
pre {
  background: eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}
a {
  color: e81c4f;
}
body {
  color: #566b78;
}

code,
pre {
  background: f5f7f9;
  border-bottom: 1px solid d8dee9;
  color: a7adba;
}

pre {
  border-left: 2px solid #69c;
}

</style>
    </head>
<html>
<body>
    这是<a href="/">正文</a>
</body> 
</html>