CSS text

QQ截图20161011145219.png

We will not describe the attributes in the above table one by one. We will only describe some commonly used attributes, mainly for everyone to learn and practice at the same time. You can test other content yourself, and you can also view the specific content of each attribute on w3c.

Example 1 color color

index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <p>查看颜色</p>
        <h1>标题查看颜色</h1>
    </body>
</html>

style.css

body{
   color: aqua;
}

Run result :

QQ截图20161011145634.png

You can see that we set the color for the body, but the p tag and h1 tag also show the color set by the body. The font color indicates that the two tags inherit the font color of the body.

Example 2 text-align

text-align is a basic attribute that affects the relationship between lines of text in an element. alignment. The first 3 values are fairly straightforward, but the 4th and 5th are a little more complicated.

The values left, right, and center cause the text in the element to be left-aligned, right-aligned, and centered respectively.

Western languages are read from left to right, and the default value of all text-align is left. The text is aligned on the left border and jagged on the right border (called "left-to-right" text). index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <p>php中文网</p>
    </body>
</html>

style.css

body{
   color: red;
   text-align: center;
}

Run results:

QQ截图20161011145702.png

##Example 3 text-indent

Indent text Indent the first line of a paragraph on a Web page. This is one of the most commonly used text formatting effects. CSS provides the text-indent property, which can conveniently implement text indentation. By using the text-indent attribute, the first line of all elements can be indented by a given length, even a negative value. The most common use of this attribute is to indent the first line of a paragraph. The following rule will indent the first line of all paragraphs by 5 em:

p {text-indent: 5em;}

The code in the index.html below is:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div>
            <h3>PHP中文网</h3>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
         </div>
    </body>
</html>

If you don’t add any css modification at this time. The displayed effect is:

Add the following indentation to our style.css code to indent the three words "Lab Building" by 2 bytes.

 h3{
   text-indent: 5em;
 }

Running results:

QQ截图20161011145739.png

word spacing

word-spacing attribute is OK Change the standard spacing between characters (words). Its default value normal is the same as setting it to 0.

The word-spacing attribute accepts a positive or negative length value. If a positive length value is provided, the spacing between words increases. Setting a negative value for word-spacing will bring it closer:

<html>
<body>
		<h1 style="word-spacing:15px;">设置中文字符间距</h1>
		<h1 style="word-spacing:15px;">this is a test</h1>
	</body>
</html>

Letter spacing

The difference between the letter-spacing attribute and word-spacing is that letter spacing modifies the spacing between characters or letters.

Like the word-spacing attribute, the possible values for the letter-spacing attribute include all lengths. The default keyword is normal (which is the same as letter-spacing:0). The entered length value will increase or decrease the space between letters by the specified amount:

<html>
<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head>
<body>
<h1>php中文网</h1>
<h4>php中文网</h4>
</body>
</html>

Character conversion

## The #text-transform property handles the case of text. This attribute has 4 values:

none
uppercase
lowercase
capitalize

The default value none will not make any changes to the text and will use the original capitalization in the source document. As the names suggest, uppercase and lowercase convert text into all uppercase and all lowercase characters. Finally, capitalize only capitalizes the first letter of each word.

As a property, text-transform may not matter, but it can be useful if you suddenly decide to make all h1 elements uppercase. Instead of modifying the content of all h1 elements individually, just use text-transform to do it for you:

h1 {text-transform: uppercase}

The benefits of using text-transform are twofold. First, just write a simple rule to accomplish this modification without modifying the h1 element itself. Secondly, if you later decide to switch all case back to the original case, it will be easier to complete the modification.

Text Decoration

Next, we discuss the text-decoration attribute, which is a very interesting attribute that provides a lot of interesting the behavior of.

text-decoration has 5 values:

none
underline
overline
line-through
blink

The value none turns off all decorations originally applied to an element. Usually, plain text is the default look, but not always. For example, links are underlined by default. If you wish to remove the underline from a hyperlink, you can use the following CSS to do so:

a {text-decoration: none;}

Note: If you explicitly use such a rule to remove the underline of the link, then the only visual difference between the anchor and the normal text is the color (at least this is the default, but there is no complete guarantee that the color will be the same) the difference).

You can also combine multiple decorations in one rule. If you want all hyperlinks to be both underlined and overlined, the rule is as follows:

a:link a:visited {text-decoration: underline overline;}

However, it should be noted that if two different decorations match the same element, the value of the winning rule will be exactly Replace another value. Please consider the following rules:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

For the given rules, all h2 elements with class stickyn have only one throughline decoration, and no underline or overline, because the text-decoration value will be replaced instead of Accumulate.

Handling White Space

The white-space attribute affects the user agent's handling of spaces, newlines, and tab characters in the source document.

By using this attribute, you can affect the way the browser handles whitespace between words and between lines of text. To some extent, default XHTML processing already handles whitespace: it merges all whitespace characters into a single space. So given the following markup, when displayed in a web browser, only a single space will be displayed between each word, and newlines in the element will be ignored:

<p>This     paragraph has    many
    spaces           in it.</p>

This default can be set explicitly with the following statement Behavior:

p {white-space: normal;}

The above rule tells the browser to do what it normally would: discard extra whitespace. If this value is given, newline characters (carriage returns) are converted to spaces, and sequences of multiple spaces on a line are converted to a single space.

Text direction

If you read a book in English, you will read it from left to right, top to bottom, that is English flow direction. However, this is not the case for all languages. We know that ancient Chinese is read from right to left, and of course Hebrew and Arabic are read from right to left. CSS2 introduced a property to describe its directionality. The

direction property affects the writing direction of text in block-level elements, the direction of column layout in tables, the direction in which content fills its element box horizontally, and the position of the last line in justified elements.

Note: For inline elements, the direction attribute will only be applied when the unicode-bidi attribute is set to embed or bidi-override.

The direction attribute has two values: ltr and rtl. In most cases, the default is ltr, which displays text from left to right. If displaying right-to-left text, the value rtl should be used.

Continuing Learning

new file

<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div> <h3>PHP中文网</h3> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> </div> </body> </html>

submit Reset Code

Automatic operation

CSS text

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]