快速玩網頁樣式

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

#　　文字

#　　文字

　　設計的目的是為了增強它所應用到的內容的表現。這看上去是顯而易見的事，但內容是一個網站的主要元素，它不應該在發布後才想到要調整。

　　寫的內容，就像你目前正在閱讀的文章，組成了超過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;
}

######　　雖然大部分頁面在視覺上已經有所提升，但是有些元素依然顯得格格不入，如程式碼片段。 ##############################　　平衡################### ###########　　只需要一些額外的調整就可以平衡頁面：######

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;
}

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

　　自定义字体

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

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

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

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

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

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

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

　　让我们从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;
}

　　按照网页设计的基本原则，我们在短短几分钟内设计了一个像样的页面。只剩下最后一件事啦...

以上是快速玩網頁樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！