Jouez rapidement avec les styles de pages Web

Par exemple, vous souhaitez partager un produit, un portfolio, ou tout simplement une inspiration sur votre site internet. Avant de le publier en ligne, vous voulez qu’il soit attrayant et professionnel, ou du moins qu’il ait l’air de cette façon. Alors que faire ensuite ?

Texte

Le but du design est d'améliorer la présentation du contenu auquel il est appliqué. Cela peut sembler une évidence, mais le contenu est l’élément principal d’un site Web et il ne devrait pas être une réflexion secondaire pour le modifier après le lancement.

La rédaction de contenu, comme l'article que vous lisez actuellement, représente plus de 90 % d'une page Web. L'ajout de styles à ce contenu textuel sera très utile.

Supposons que vous avez terminé le contenu que vous souhaitez publier et que vous avez créé un document style.css vide, quelle est la première règle que tu peux écrire

Centré

Un texte long est difficile à analyser et donc difficile à lire. Fixer une limite de caractères par ligne peut améliorer considérablement la lisibilité et l'attrait de grandes quantités de texte.

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

Après avoir ajouté des styles au conteneur de texte, que diriez-vous d'ajouter des styles au texte lui-même

Police

La police par défaut du navigateur est Times , peut paraître peu attrayant (principalement parce qu'il s'agit d'une police "sans style"). Passer à une police sans empattement comme Helvetica ou Arial peut grandement améliorer la lisibilité de vos pages Web.

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

Si vous insistez pour utiliser des polices serif, vous pouvez essayer Georgia.

Lorsque nous rendons le texte plus attrayant, nous devons également le rendre plus lisible.

Intervalle

Lorsque les utilisateurs ont l'impression qu'une page est cassée, il s'agit généralement d'un problème d'espacement. Vous pouvez augmenter l'attrait de votre page en prévoyant un espacement approprié autour et dans le texte.

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

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

Bien que la mise en page ait été grandement améliorée jusqu'à présent, ajoutons quelques détails supplémentaires.

　Couleur et contraste

Un texte noir sur fond blanc sera plus accrocheur. Choisissez un noir plus doux pour votre texte afin de rendre la page plus facile à lire.

body {
  color: #555;
}

Pour conserver un bon contraste, choisissons une ombre plus foncée pour le texte important.

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

Bien que la majeure partie de la page ait été visuellement améliorée, certains éléments semblent toujours déplacés, comme les extraits de code.

Solde

Il suffit de quelques ajustements supplémentaires pour équilibrer la page :

code,
pre {
  background: #eee;
}

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

pre {
  padding: 1em;
}

À ce stade, vous souhaitez probablement que votre page se démarque , pour le rendre plus personnel.

Couleur principale

La plupart des marques ont une couleur principale qui sert de ton visuel. Sur une page Web, cette couleur dominante peut être utilisée pour mettre en valeur des éléments interactifs tels que des liens.

a {
  color: #e81c4f;
}

Mais pour maintenir l'équilibre/la coordination, nous avons également besoin de quelques couleurs supplémentaires.

Couleur auxiliaire

Les couleurs principales peuvent être complétées par des teintes plus subtiles, utilisées dans les bordures, les arrière-plans et même le corps du texte.

body {
  color: #566b78;
}

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

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

Nous avons changé la tonalité des couleurs, pourquoi ne pas aussi changer la forme/police...

　　自定义字体

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!