CSS knowledge finishing (3) style

table of Contents

One, font

Font: font-famliy
Font size: font-size
Thickness: font-weight
Color: color

Second, the text

Color: color
Alignment: text-align
First line indentation: text-indent
Line height: line-height
Decoration: text-decoration
Shadow: text-shadow

Three, list

CSS list properties allow you to place and change list item logos, or use images as list item logos.

List type: list-style-type

Set the list item flag to be filled circle, hollow circle, square

List item image: list-style-image

Set the list item flag to a picture

Four, background

Background color: background-color
Background image: background-image
Background repeat: background-repeat

You can set whether the picture is repeated to fill the background or other

Background positioning: background-position

This is relatively simple, you can check it now

for example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-family: 楷体; /*字体*/
            color: brown; /*文本颜色*/
            text-align: center; /*排版*/
        }

        h1 {
            font-size: 50px; /*字号*/
        }

        p[class=p1] {
            font-weight: bolder; /*粗细*/
            text-indent: 2em; /*首行缩进*/
        }

        .p2 {
            background: yellow; /*背景色*/
            height: 200px; /*段落高度*/
            line-height: 15px; /*行高*/
        }

        .p3{
            text-decoration: underline; /*文本修饰符*/
        }


        /*body {*/
        /*    font: bolder 16px "楷体";*/
        /*}*/


    </style>
</head>
<body>
<h1>蜀道难</h1>
李白
<p class="p1">噫吁嚱，危乎高哉！<br>
    蜀道之难，难于上青天！<br>
    蚕丛及鱼凫，开国何茫然！<br>
    尔来四万八千岁，不与秦塞通人烟。<br>
    西当太白有鸟道，可以横绝峨眉巅。<br>
    地崩山摧壮士死，然后天梯石栈相钩连。<br>
    上有六龙回日之高标，下有冲波逆折之回川。<br>
    黄鹤之飞尚不得过，猿猱欲度愁攀援。<br>
    青泥何盘盘，百步九折萦岩峦。<br>
    扪参历井仰胁息，以手抚膺坐长叹。<br>
</p>
<p class="p2">
    问君西游何时还？畏途巉岩不可攀。<br>
    但见悲鸟号古木，雄飞雌从绕林间。<br>
    又闻子规啼夜月，愁空山。<br>
    蜀道之难，难于上青天，使人听此凋朱颜！<br>
    连峰去天不盈尺，枯松倒挂倚绝壁。<br>
    飞湍瀑流争喧豗，砯崖转石万壑雷。<br>
    其险也如此，嗟尔远道之人胡为乎来哉！<br>
</p>
<p class="p3">
    剑阁峥嵘而崔嵬，一夫当关，万夫莫开。<br>
    所守或匪亲，化为狼与豺。<br>
    朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。<br>
    锦城虽云乐，不如早还家。<br>
    蜀道之难，难于上青天，侧身西望长咨嗟！<br>
</p>


</body>
</html>

The results are as follows:

The content of the article is organized according to the self-study of the CSS part of " Meeting Crazy God" . I would like to thank the blogger here .