4分鐘學會網頁樣式

原文：Web Design in 4 minutes

譯者：shery

譯文：www.zcfy.cc/article/web-design-in-4-minutes-1237.html

（點擊文末閱讀原文即可前往）

比方說，你想要在自己網站上分享一個產品，或者是一個作品集，又或者僅僅只是一個靈感。在你發布到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那麼回事。

那麼你接下來該做什麼呢？

文本

設計的目的是為了增強它所應用到的內容的表現形式。這看上去是顯而易見的事，但內容是一個網站的主要元素，它不應該在發布后才想到要調整。 編寫的內容，就像你目前正在閱讀的文章，組成了超過90%的網頁。為這個文本內容添加樣式將有一個很長的路要走。 讓我們假設你已經完成了你想發布的內容，同時已經創建了一個空的style.css文件，什麼是你可以寫的第一條規則？

居中

長文本很難解析，也因此不易閱讀。每行設置字元限制，可以大大提高大量文本的可讀性和吸引力。

body {

margin: 0 auto;

max-width: 50em;

}

在為文本容器添加了樣式后，為文本本身添加樣式可好？

字體

瀏覽器的默認字體為Times，可看起來缺乏吸引力（主要是因為它是「無樣式」字體）。切換到一個無襯線字體，如Helvetica或Arial可以大大提高你網頁的可讀性。

body {

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

}

如果你堅持要用襯線體，可以試試Georgia。 當我們讓文本更具吸引力時，也需要讓它更具可讀性。

間隔

當用戶覺得一個頁面崩壞的時候，通常來說都是間距問題。通過在文本周圍和文本內設置適當的間距就可以增加頁面的吸引力。

body {

line-height: 1.5;

padding: 4em 1em;

}

h2 {

margin-top: 1em;

padding-top: 1em;

}

雖然到目前為止布局已經大大改善，但讓我們添加更多細節處理。

顏色和對比度

白色背景上的黑色文字看起來會比較扎眼。為文本選擇一款較軟一點的黑色，讓頁面閱讀起來更舒服。

body {

color: #555;

}

為了保持一個良好的對比度，讓我們為重要文本選擇一個更黑暗的陰影。

h1,

h2,

strong {

color: #333;

}

雖然大部分頁面在視覺上已經有所提升，但是一些元素依然顯得格格不入，如代碼段。

平衡

只需要一些額外的調整就可以平衡頁面：

pre {

padding: 1em;

}

在這一點上，你可能想讓你的頁面脫穎而出，讓它更有個性。

主色調

大多數品牌都有一個主色調，作為視覺基調。在一個網頁上，這個主色調可以用來強調交互元素，如鏈接。

a {

color: #e81c4f;

}

但是為了保持平衡/協調，我們還需要一些額外的顏色。

輔助色

主色調可以用更微妙的色調來補充，用於邊框，背景，甚至正文中。

pre {

border-left: 2px solid #69c;

}

已經改變了色調，為什麼不一併改變外形/字體...

自定義字體

由於文本是網頁的主要內容，使用自定義字體能使頁面更加引人注目。 當你可以嵌入自己的網頁字體或使用類似Typekit的在線服務時，讓我們使用免費谷歌字體Roboto：

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

在通過自定義字體凸顯你的個性后，想讓頁面更加豐富多彩又怎麼辦呢？

圖片和圖標既可用來作為支持你的內容的裝飾品，還可以在你想要傳達的信息中擔當積極部分。

讓我們從Unsplash挑選一張漂亮的背景圖片來美化header。

header {

background-color: #263d36;

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

background-position: center top;

background-repeat: no-repeat;

background-size: cover;

line-height: 1.2;

padding: 10vw 2em;

text-align: center;

}

添加logo

header img {

display: inline-block;

height: 120px;

vertical-align: top;

width: 120px;

}

讓我們借這個機會，來提高文本格調。

header h1 {

color: white;

font-size: 2.5em;

font-weight: 300;

}

header a {

border: 1px solid #e81c4f;

border-radius: 290486px;

color: white;

font-size: 0.6em;

letter-spacing: 0.2em;

padding: 1em 2em;

text-transform: uppercase;

text-decoration: none;

transition: none 200ms ease-out;

transition-property: color, background;

}

header a:hover {

background: #e81c4f;

color: white;

}

瞧！

按照網頁設計的基本原則，我們在短短几分鐘內設計了一個像樣的頁面。