Web front-end articles: CSS used to format layout

First, the font attribute
set the font attributes:

body{font-family:"Microsoft Yahei"}

body{font-family:"Microsoft Yahei","宋体","黑体"}
#备选字体可以有无数个，那么浏览器在去解析这个代码的时候，是从左往右解析的，如果没有微软雅黑，再去找宋体，最后黑体。

font size:

The most commonly used pixel units: px, em, rem, here we introduce a first unit, px.
px: pixels is defined by the small square image composed of these small squares have a clear position and color values are assigned small box color and position of the image presented on the decision out of the way.
Click to receive free information and courses

font color:

Color representation There are three ways in the css:
English word notation: Red / Green / Blue
rgb notation
hexadecimal notation

Font-style font styles

The site is divided into a common font and font italic font, we can use the font-style property to set the corresponding font style.

normal normal, italic italic, oblique italic

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-style:italic;
        }
    </style>
</head>
<body>
    <p>你好</p>

</body>
</html>

Font weight

font-weight
Here Insert Picture Description

Text attributes:

text-decoration
Here Insert Picture Description

Text-indent

We usually write the article, the first letter of two blank spaces. So we need to use
text-indent, its property values are pixels (px, em, rem) units.

Line spacing
line-height: Numerical px / em
Vertical lines word spacing / letter-spacing

letter-spacing: value PX;
Word-spacing: PX value;

Text alignment

text-align

Here Insert Picture Description

二, px in rem

px is the name of the unit pixels, which is a unit of fixed size, is calculated for the pixel (PC / mobile phone) screen, a pixel (1px) is a point on the (computer / mobile phone) screen, i.e. a screen resolution minimum cut. Click to receive free information and courses
It is an object with respect to the current font size of the text; browser default font size if the current object is not artificially set within the text font size, then it is relatively
rem only with respect to the root, i.e. HTML element. Set the font size so long as the label on the html document font size will as a reference standard for the adaptive general layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        html{
            font-size:20px
        }
        .box{
            font-size:12px;
            width:20rem;
            height:20rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Here Insert Picture Description

Web front-end articles: CSS used to format layout

Guess you like