Quickly play with web page styles

For example, you want to share a product, a portfolio, or just inspiration on your website. Before you post it online, you want it to look attractive and professional, or at least look like it. So what should you do next?

##　Text

## The purpose of design is to enhance the presentation of the content to which it is applied. This may seem like a no-brainer, but content is the main element of a website and it shouldn’t be an afterthought to tweak after launch.

Written content, like the article you are currently reading, makes up over 90% of a web page. Adding styles to this text content will go a long way.

Let us assume that you have completed the content you want to publish and have created an empty style.css file, what is the first rule you could write?

## Centered

Long text is difficult to parse and therefore difficult to read. Setting a character limit per line can greatly improve the readability and appeal of large amounts of text.

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

After adding styles to the text container, how about adding styles to the text itself?

Font

## The default font of the browser is Times, you can Looks unattractive (mainly because it's an "unstyled" font). Switching to a sans serif font like Helvetica or Arial can greatly improve the readability of your web pages.

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

If you insist on using serif fonts, you can try Georgia.

When we make text more attractive, we also need to make it more readable.

## Interval

When users feel that a page is broken, it is usually a spacing issue. You can increase the appeal of your page by providing appropriate spacing around and within text.

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

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

Although the layout has been greatly improved so far, let's add a few more details.

##　
Color and Contrast

Black text on a white background will look more eye-catching. Choose a softer black for your text to make the page easier to read.

body {
  color: #555;
}

To maintain a good contrast, let’s choose a darker shade for the important text.

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

Although most of the page has been visually improved, some elements still look out of place, such as code snippets.

balance

Just a few extra adjustments are needed to balance the page:

code,
pre {
  background: #eee;
}

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

pre {
  padding: 1em;
}

At this point, you may want to make your page stand out and make it stand out It has more personality.

main color tone

Most brands have a main color that serves as the visual tone. On a web page, this dominant color can be used to emphasize interactive elements such as links.

a {
  color: #e81c4f;
}

But to maintain balance/coordination, we also need some additional colors.

## Secondary color

## Main colors can be supplemented with more subtle hues, used in borders, backgrounds, and even body text.

body {
  color: #566b78;
}

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

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

I have changed the color tone, why not also change the shape/font...

　　自定义字体

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

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

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

The above is the detailed content of Quickly play with web page styles. For more information, please follow other related articles on the PHP Chinese website!