4分钟学会网页样式

比方说，你想要在自己网站上分享一个产品，或者是一个作品集，又或者仅仅只是一个灵感。在你发布到网上之前，你想让它看起来有吸引力，专业，或者至少得看起来像那么回事。那么你接下来该做什么呢?

 

文本

 

　　设计的目的是为了增强它所应用到的内容的表现形式。这看上去是显而易见的事，但内容是一个网站的主要元素，它不应该在发布后才想到要调整。

 

　　编写的内容，就像你目前正在阅读的文章，组成了超过90%的网页。为这个文本内容添加样式将有一个很长的路要走。

 

　　让我们假设你已经完成了你想发布的内容，同时已经创建了一个空的style.css文件，什么是你可以写的第一条规则?

 

　　居中

 

　　长文本很难解析，也因此不易阅读。每行设置字符限制，可以大大提高大量文本的可读性和吸引力。

1

body {

 

2

  margin: 0 auto;

 

3

  max-width: 50em;

 

4

}

　　在为文本容器添加了样式后，为文本本身添加样式可好?

 

　　字体

 

　　浏览器的默认字体为Times，可看起来缺乏吸引力(主要是因为它是“无样式”字体)。切换到一个无衬线字体，如Helvetica或Arial可以大大提高你网页的可读性。

1

body {

 

2

  font-family: "Helvetica", "Arial", sans-serif;

 

3

}

　　如果你坚持要用衬线体，可以试试Georgia。

　　当我们让文本更具吸引力时，也需要让它更具可读性。

 

　　间隔

 

　　当用户觉得一个页面崩坏的时候，通常来说都是间距问题。通过在文本周围和文本内设置适当的间距就可以增加页面的吸引力。

1

body {

 

2

  line-height: 1.5;

 

3

  padding: 4em 1em;

 

4

}

 

5

 

6

h2 {

 

7

  margin-top: 1em;

 

8

  padding-top: 1em;

 

9

}

　　虽然到目前为止布局已经大大改善，但让我们添加更多细节处理。

 

　　颜色和对比度

 

　　白色背景上的黑色文字看起来会比较扎眼。为文本选择一款较软一点的黑色，让页面阅读起来更舒服。

1

body {

 

2

  color: #555;

 

3

}

　　为了保持一个良好的对比度，让我们为重要文本选择一个更黑暗的阴影。

1

h1,

 

2

h2,

 

3

strong {

 

4

  color: #333;

 

5

}

　　虽然大部分页面在视觉上已经有所提升，但是一些元素依然显得格格不入，如代码段。

 

　　平衡

 

　　只需要一些额外的调整就可以平衡页面：

01

code,

 

02

pre {

 

03

  background: #eee;

 

04

}

 

05

 

06

code {

 

07

  padding: 2px 4px;

 

08

  vertical-align: text-bottom;

 

09

}

 

10

 

11

pre {

 

12

  padding: 1em;

 

13

}

　　在这一点上，你可能想让你的页面脱颖而出，让它更有个性。

 

　　主色调

 

　　大多数品牌都有一个主色调，作为视觉基调。在一个网页上，这个主色调可以用来强调交互元素，如链接。

1

a {

 

2

  color: #e81c4f;

 

3

}

　　但是为了保持平衡/协调，我们还需要一些额外的颜色。

 

　　辅助色

 

　　主色调可以用更微妙的色调来补充，用于边框，背景，甚至正文中。

01

body {

 

02

  color: #566b78;

 

03

}

 

04

 

05

code,

 

06

pre {

 

07

  background: #f5f7f9;

 

08

  border-bottom: 1px solid #d8dee9;

 

09

  color: #a7adba;

 

10

}

 

11

 

12

pre {

 

13

  border-left: 2px solid #69c;

 

14

}

　　已经改变了色调，为什么不一并改变外形/字体...

 

　　自定义字体

 

　　由于文本是网页的主要内容，使用自定义字体能使页面更加引人注目。

　　当你可以嵌入自己的网页字体或使用类似Typekit的在线服务时，让我们使用免费谷歌字体Roboto：

　　@import'网页链接

1

@import '网页链接;

 

2

 

3

body {

 

4

  font-family: "Roboto", "Helvetica", "Arial", sans-serif;

 

5

}

　　在通过自定义字体凸显你的个性后，增加一千个单词又怎么办呢?

　　图形和图标既可用来作为支持你的内容的装饰品，还可以在你想要传达的信息中担当积极部分。

　　让我们从Unsplash挑选一张漂亮的背景图片来美化header。

01

  header {

 

02

  background-color: #263d36;

 

03

  background-image: url("header.jpg");

 

04

  background-position: center top;

 

05

  background-repeat: no-repeat;

 

06

  background-size: cover;

 

07

  line-height: 1.2;

 

08

  padding: 10vw 2em;

 

09

  text-align: center;

 

10

}

 

　　添加logo

 

1

header img {

 

2

  display: inline-block;

 

3

  height: 120px;

 

4

  vertical-align: top;

 

5

  width: 120px;

 

6

}

　　让我们借这个机会，来提高文本风格。

01

header h1 {

 

02

  color: white;

 

03

  font-size: 2.5em;

 

04

  font-weight: 300;

 

05

}

 

06

 

07

header a {

 

08

  border: 1px solid #e81c4f;

 

09

  border-radius: 290486px;

 

10

  color: white;

 

11

  font-size: 0.6em;

 

12

  letter-spacing: 0.2em;

 

13

  padding: 1em 2em;

 

14

  text-transform: uppercase;

 

15

  text-decoration: none;

 

16

  transition: none 200ms ease-out;

 

17

  transition-property: color, background;

 

18

}

 

19

 

20

header a:hover {

 

21

  background:  #e81c4f;

 

22

  color: white;

 

23

}

　　按照网页设计的基本原则，我们在短短几分钟内设计了一个像样的页面。只剩下最后一件事啦... 老司机说一句话：html  css 多花点时间去记，而JS就是算法及逻辑的学习方法，本酋长后面谈谈咯

--希望能分享给更多想学习的人学习

WEB前端学习交流群21 598399936