:How to modify text font, text color and text size in CSS-empirical point of view免费ppt模版下载-道格办公

How to modify text font, text color and text size in CSS

Preface

Some friends asked me questions about webpage text, such as how to modify the color of text, or how to modify the size of text. Since these are definitely encountered in web design, I will collect common questions from everyone. Get up and form text, so that friends can check it out, I hope it will be helpful to everyone.

Opening

Before starting this article, I prepared a case. Combining the case will make it easier to understand than pasting the code directly. The following will start to explain with pictures and texts.

Impressions

Full code

< li>

<html><head> <style> body{ background:#E0FFFF;/*Set background color*/  /*Set font*/ }< /span>
 .container{ width:100%;/*set width*/ text-align:center;/*Set the content to be centered*/ padding-top:50px;/*Set the distance between the content and the top*/< /span> }</style></head><body><body> <div class='container'> <h1 >Weekend の Lime</h1> <p >Weekend Brief Design-Share good works, deliver positive Energy</p> <p> Weekend <font size='10px' color='#EE6A50'> Simple design</font>, concise < ;font size='5px' color='#71C671'> is not </font>equal to simple </p>< /span> </div></body> ;</html>

Next we come Analyze the method to achieve the above effects, I will circle the key code

1. Modify the text font

Switch fonts through font-family, as for which fonts you can search by yourself

2. Modify text color

Set the font color by color, As for what web safe colors you can search by yourself

3. Modify text size

There are two ways to modify the text size

(1) Modify through the font-size attribute of style

(2) Modify by font tag size attribute

PS:

Common units of font size are px and em

px: Absolute unit, the page is displayed in precise pixels.

em: Relative unit, the reference point is the font size of the parent node.

It doesn't matter if you are not very clear about the above concepts, you can adjust the size to observe, and finally it can fit your webpage.

Postscript

You can see as far as you are patient!

Case Download

Link:

https://pan.baidu.com/s/1kSUJZfgAAZrObG99Cukjwg

Extraction code:

bwv4

          

                        
                            
                        
                        Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/How%20to%20modify%20text%20font%20text%20color%20and%20text%20size%20in%20CSS.html