Detailed introduction to CSS font, text, and list properties

1. Font properties

color, specifies the color of the text, such as div{color:red;}

font-style, specifies the way text is displayed, such as p.normal {font-style: normal;}, which includes normal (normal display), italic (italic display, with some changes in the font structure), and oblique (oblique display, which is just an oblique version of the text)

font-variant, set small capital letters, small capital letters are different from ordinary capital letters, and they are not lowercase letters. Example p {font-variant: small-caps; }, attribute value: normal (default value), small-caps (small capital letters), inherit (inherited from the parent element)

font-weight, set the font weight of the text, including 4 attribute values: normal (normal, default value), bold (bold), bolder (bolder), lighter (lighter), and can also set 9 numerical levels from "100 to 900", 400 is equivalent to normal, 700 is equivalent to bold

font-size, set the text font size, such as div {font-size: 30px; }. Pixels are usually used as the unit for setting absolute sizes, and em is used as the unit for setting relative sizes. The default text font size in the browser is 16px = 1em.

font-family, defines the font family of the text, such as h1 {font-family:宋体, serif;}. In order to prevent the user agent from not installing the set font, this problem can be solved by using a specific font name + serif universal font family

Similar to the background abbreviation, you can also use the font abbreviation

However, unlike the background abbreviation, the attribute values ​​of the font abbreviation must be written in the order specified by the official regulations (the order listed above, color does not belong to the font attribute), and the size attribute value and the family attribute value must be in the order specified by the official regulations.

2. letter-spacing, set the character spacing, example: div {letter-spacing: 3px; }

3. opacity, set the color transparency for the entire element (including text, background, etc.), the attribute value range is "0~1", 1 is opaque, 0 is completely transparent, similar to the "a" in rgba

4. overflow, set the display mode when the content overflows the element box, controlled by setting the attribute value, visible (default value, the content will not be processed, overflow display), hidden (hidden), auto (automatic, display scroll bar when overflowing), scroll (display scroll bar)

5.text-overflow, sets the display mode when text overflows the containing element, attribute values: clip (clip text), ellipsis (display ellipsis to represent the trimmed text), string (use a given string to represent the trimmed text)

6.white-space, set how to handle blanks and line breaks within an element

Property Value:

normal, blanks and line breaks are ignored by the browser

pre, whitespace and line breaks will be preserved by the browser

Nowrap, the text is displayed on the same line and will not wrap

pre-wrap, preserve whitespace but wrap normally (preserve newlines and word wrap)

pre-line, merge whitespace but preserve newlines

inherit, inherits the white-space property value from the parent element

7.text-align, text alignment, attribute value: left, center, right, example: p {text-align: center; }

8.text-decoration, specifies whether the text has decoration or not, attribute values: none (default, none), underline (text decoration underline), overline (text decoration overline), line-through (text decoration through line, similar to strikethrough), blink (text blinking)

9.text-transform, set the case of letters in the text, attribute values: none (default, none), capitalize (convert the first letter of each order to uppercase), uppercase (convert all letters to uppercase), lowercase (convert all letters to lowercase)

10.text-indent, set the first line of text indent, the attribute value is a number, example: p {text-indent: 2em; }, the attribute value can also be expressed in pixels (px)

11.Word-wrap, set whether the current line wraps when it exceeds the boundary of the specified container, attribute value: normal (default, only wrap at allowed hyphenation points), break-Word (wrap inside long words or URL addresses)

12.vertical-align, sets the vertical alignment of the text, which is the alignment of the elements in the container relative to the content in the parent element.

Common attribute values: top (top alignment), middle (center alignment), bottom (bottom alignment), super (vertical alignment of text superscript), sub (vertical alignment of text subscript)

Test code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css import</title>
    <style>
        div{
            width: 500px;
            height: 300px;
            background-color: aquamarine;
        }
        a{
            display: inline-block; height: 150px; width: 100px; background-color: blanchedalmond;
            vertical-align:bottom; margin: 3em 0em 0em 0em;
        }
    </style>
</head>
<body>
    <div>
        Test vertical-align vertical alignment <a href="">empty link</a>
    </div>
</body>
</html>

Test results:

13.line-height, set the line height of the object (negative values ​​are not allowed), attribute value: normal (default), number (set a number, this number will be multiplied by the current font size to set the line spacing/line height), length (set a fixed value line spacing)

We generally use line height to vertically center a line of text. When the line height is equal to the container height, the text is vertically centered.

14.list-style-image, sets the image (bullet) of the list item marker. There is only one url attribute for guiding the image. The syntax is: ul {list-style-image: url("markimg.jpg"); }

The overall bullet point reset needs to be applied to <ul>, and the individual settings are applied to <li>

15.list-style-position, set how the list item marker and text content are arranged, attribute value: outside (default, bullet points are placed outside the text), inside (bullet points are placed inside the text), syntax: ul {list-style-position: inside; }

16.list-style-type, sets the preset mark used by the list item (the effect is similar to the style attribute in the ul line in HTML), attribute value: none (no symbol), disc (solid circle), circle (hollow circle), square (solid square), syntax: ul {list-style-type:disc; }

17. list-style abbreviation, merge the previous attributes into a composite attribute, through the "list-style" attribute can define several attribute values, the attribute value writing order (not strict): list-style-image list-style-position list-style-type

Syntax example: ul {list-style: url ("markimg.jpg") outside disc; } . The purpose of setting the bullet point at the end is to replace the image if it is not displayed properly.

This is the end of this article about CSS font, text, and list attributes. For more relevant CSS font, text, and list attribute content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!