Spielen Sie schnell mit Webseitenstilen

Sie möchten beispielsweise ein Produkt, ein Portfolio oder einfach nur eine Inspiration auf Ihrer Website teilen. Bevor Sie es online veröffentlichen, möchten Sie, dass es attraktiv und professionell aussieht oder zumindest so aussieht. Was sollten Sie also als nächstes tun?

Text

Der Zweck von Design besteht darin, die Präsentation des Inhalts, auf den es angewendet wird, zu verbessern. Das mag wie eine Selbstverständlichkeit erscheinen, aber der Inhalt ist das Hauptelement einer Website und es sollte kein nachträglicher Einfall sein, ihn nach dem Start zu optimieren.

Das Verfassen von Inhalten, wie dem Artikel, den Sie gerade lesen, macht über 90 % einer Webseite aus. Das Hinzufügen von Stilen zu diesem Textinhalt wird viel bewirken.

Nehmen wir an, Sie haben den Inhalt, den Sie veröffentlichen möchten, fertiggestellt und ein leeres style.css-Dokument erstellt. Was ist die erste Regel, die Sie schreiben können? 🎜>

Langer Text ist schwer zu analysieren und daher schwer zu lesen. Das Festlegen einer Zeichenbeschränkung pro Zeile kann die Lesbarkeit und Attraktivität großer Textmengen erheblich verbessern.

Wie wäre es nach dem Hinzufügen von Stilen zum Textcontainer mit dem Hinzufügen von Stilen zum Text selbst?

Schriftart

body {
  margin: 0 auto;
  max-width: 50em;
}

Die Standardschriftart des Browsers ist Times kann unattraktiv aussehen (hauptsächlich, weil es sich um eine „unformatierte“ Schriftart handelt). Der Wechsel zu einer serifenlosen Schriftart wie Helvetica oder Arial kann die Lesbarkeit Ihrer Webseiten erheblich verbessern.

Wenn Sie darauf bestehen, Serifenschriften zu verwenden, können Sie Georgia ausprobieren.

Wenn wir Texte attraktiver gestalten, müssen wir sie auch besser lesbar machen.

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

Intervall

Wenn Benutzer das Gefühl haben, dass eine Seite kaputt ist, liegt das meist an einem Abstandsproblem. Sie können die Attraktivität Ihrer Seite erhöhen, indem Sie für angemessene Abstände um und innerhalb des Textes sorgen.

Obwohl das Layout bisher stark verbessert wurde, fügen wir noch ein paar Details hinzu.

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

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

Schwarzer Text auf weißem Hintergrund wirkt auffälliger. Wählen Sie für Ihren Text ein weicheres Schwarz, um die Lesbarkeit der Seite zu verbessern. Um einen guten Kontrast aufrechtzuerhalten, wählen wir einen dunkleren Schatten für den wichtigen Text.

Obwohl der Großteil der Seite optisch verbessert wurde, wirken einige Elemente immer noch fehl am Platz, wie zum Beispiel Codeausschnitte.

body {
  color: #555;
}

Balance

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

Es sind nur ein paar zusätzliche Anpassungen erforderlich, um die Seite auszubalancieren:

An diesem Punkt möchten Sie wahrscheinlich, dass Ihre Seite auffällt , um es persönlicher zu machen.

Hauptfarbe

code,
pre {
  background: #eee;
}

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

pre {
  padding: 1em;
}

Die meisten Marken haben eine Hauptfarbe, die als visueller Ton dient. Auf einer Webseite kann diese dominante Farbe verwendet werden, um interaktive Elemente wie Links hervorzuheben.

Aber um das Gleichgewicht/die Koordination aufrechtzuerhalten, brauchen wir auch einige zusätzliche Farben.

Hilfsfarbe

a {
  color: #e81c4f;
}

Hauptfarben können durch subtilere Farbtöne ergänzt werden, die in Rahmen, Hintergründen und sogar im Fließtext verwendet werden.

Wir haben den Farbton geändert, warum nicht auch die Form/Schriftart ändern...

　　自定义字体

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

　　当你可以嵌入自己的网页字体或使用类似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;
}

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