Shulou(Shulou.com)06/01 Report--

This article mainly introduces CSS how to define the appearance of the text, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

CSS text

The CSS text property defines the appearance of the text.

With text properties, you can change the color of the text, character spacing, align, decorate, indent, and so on.

Indent text

Indent the first line of a paragraph on a Web page, which is one of the most common text formatting effects.

CSS provides the text-indent attribute, which makes it easy to indent text.

By using the text-indent attribute, the first line of all elements can be indented by a given length (which can be negative).

The most common use of this attribute is to indent the first line of a paragraph. The following rule indents the first line of all paragraphs by 5 em:

P {text-indent: 5em;}

Note: in general, you can apply text-indent to all block-level elements, but you cannot apply this attribute to inline elements.

Tip: if you want to "indent" the first line of an inline element, you can use the left inner or outer margin to create this effect.

Use negative valu

Text-indent can also be set to a negative value.

P {text-indent:-5em; padding-left: 5em;}

Note: to prevent the text from going beyond the left boundary of the browser window, set another outer margin or some inner margin for negative indentation.

Percentage value of use

Text-indent can use all length units, including percentage values.

Div {width: 500px;} p {text-indent: 20%;}

This is a paragragh

Note: the percentage is relative to the width of the parent element. In this example, the indentation value is 20% of the parent element, that is, 100 pixels.

Inherit

The text-indent attribute can be inherited, consider the following tag:

Div#outer {width: 500px;} div#inner {text-indent: 10%;} p {width: 200px;} some text. Some text. Some text.

This is a paragragh.

Note: the paragraph in this example will also be indented by 50 pixels because it inherits the indentation value of the div element whose id is inner.

horizontal alignment

Text-align is a basic attribute that affects how lines of text in an element are aligned to each other.

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 for all text-align is left.

For languages such as Hebrew and Arabic, text-align defaults to right because they read from right to left.

Unsurprisingly, center centers each line of text in the element.

Tip: to center block-level or table elements, you need to set the left and right margins appropriately on these elements.

Text-align:center vs.

You might think that text-align:center works the same as an element, but in fact the two are very different.

It not only affects the text, but also centers the entire element.

Text-align does not control the alignment of elements, but only affects the internal content. The element itself is not affected, only the text in it.

Align text justify at both ends

The horizontal alignment attribute justify, which aligns the text at both ends, places the left and right ends of the text line on the inner boundary of the parent element.

End-aligned text is common in the field of printing, adjusting the spacing between words and letters so that the lines are exactly equal in length.

Word interval

The word-spacing property changes the standard interval between words (words).

The default value, normal, is the same as the setting value of 0.

The word-spacing property accepts a positive or negative length value.

If you provide a positive length value, the interval between words increases. Setting a negative value will pull it closer:

P.spread {word-spacing: 30px;} p.tight {word-spacing:-0.5em;} This is a paragraph. The spaces between words will be increased.

This is a paragraph. The spaces between words will be decreased.

Letter spacing

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

As with the word-spacing property, the available value of the letter-spacing property includes all lengths.

The default keyword is normal (equivalent to letter-spacing: 0). The length value you enter increases or decreases the spacing between letters:

H2 {letter-spacing:-0.5em} h5 {letter-spacing: 20px} This is header 1This is header 4

Character conversion

The text-transform property handles the case of the text. This property has four values:

None: default value, no changes are made to the text, using the original case in the source document.

Uppercase: converts text to all uppercase characters.

Lowercase: converts text to all lowercase characters.

Capitalize: capitalize only the first letter of each word.

Example: controls the case of letters in text

H2 {text-transform: uppercase} p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} This Is An H1 Element This is some text in a paragraph.

This is some text in a paragraph.

This is some text in a paragraph.

Tip: there are two benefits to using text-transform.

First of all, you only need to write a simple rule to make this change without modifying the H2 element itself.

Second, if you later decide to switch all case back to the original case, you can make the change more easily.

Text decoration

The text-decoration property provides a lot of very interesting behavior. There are 5 values for text-decoration:

The none:none value turns off all decorations that were originally applied to an element.

Underline:underline underlines the element, just like the U element in HTML.

Overline:overline does the opposite of underline, drawing an underline at the top of the text.

Line-through: draw a run-through line in the middle of the text, equivalent to the S and strike elements in HTML.

Blink:blink makes the text flicker, similar to the controversial blink tags supported by Netscape.

For example, links are underlined by default. If you want to remove the underscore from the hyperlink, you can use the following CSS code:

A {text-decoration: none;}

Multiple decorations can be combined in one rule. If you want all hyperlinks to be underlined and overlined, there are:

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

Note that if two different decorations match the same element, the value of the winning rule completely replaces the other value:

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

Note: all h3 elements whose class is stricken have only one underline decoration, no underscore and no underscore.

Dealing with blank characters

The white-space attribute affects how the user agent handles spaces, line feeds, and tab characters in the source document.

By using this property, you can affect how browsers handle white space between words and between lines of text.

Value normal

The default XHTML processing is done with white space: it matches all whitespace into a single space.

So when displayed in a Web browser, only one space is displayed between the words, while line breaks in the element are ignored.

You can explicitly set this default behavior with the following declaration:

P {white-space: normal;}

Note: the above rule tells browsers to do as usual: discard extra white space characters.

Tip: newline characters (carriage returns) are converted to spaces, and a sequence of multiple spaces in a line is converted to a single space.

Value pre

If white-space is set to pre, it behaves like the pre element of XHTML:

Among the elements affected by this attribute, whitespace characters will not be ignored, and browsers will pay attention to extra spaces, or even enter.

Value nowrap

The value nowrap prevents text wrapping in the element (newline characters are converted to spaces) unless a br element is used.

Using nowrap in CSS is similar to setting a table cell to not wrap lines in HTML 4.

However, the white-space value can be applied to any element.

Values pre-wrap and pre-line

When the property value is set to pre-wrap, the browser not only retains white space and line breaks, but also allows automatic line feeds.

When the property value is set to pre-line, the browser retains the newline character and allows automatic line wrapping, but merges white space characters.

Summarize the behavior of the white-space property:

Value space character line feed automatic line feed normal merge ignore allow nowrap merge ignore do not allow pre retention do not allow pre-wrap retention allow pre-line merge retention allow

Text orientation

If you are reading English books, you will read from left to right and from top to bottom. This is the direction of English flow. However, we read ancient Chinese from right to left, including Hebrew, Arabic and so on.

The direction attribute (the default is ltr) affects the direction in which the text in the block-level element is written, the direction in which the columns in the table are laid out, the direction in which the content fills its element box horizontally, and where the last row in the element is aligned at both ends.

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

Note: for inline elements, the direction attribute is applied only if the unicode-bidi attribute is set to embed or bidi-override.

Example

Div.one {direction: rtl} div.two {direction: ltr} Some text. Right-to-left direction. Some text. Left-to-right direction.

Row spacing

The line-height property sets the distance between rows (row height), and the line-height property does not allow negative values.

Normal: default. Set a reasonable spacing between lines.

Number: sets a number that is multiplied by the current font size to set line spacing.

Length: sets a fixed spacing between lines.

%: based on the percentage line spacing of the current font size.

Inherit: specifies that the value of the line-height attribute should be inherited from the parent element.

P.small {line-height: 90%} p.big {line-height: 30px} p.small1 {line-height: 0.5} p.big1 {line-height: 2}

CSS text attribute and description

Color: setting text color

Direction: sets the text orientation.

Line-height: sets the row height.

Letter-spacing: sets the character spacing.

Text-align: aligns the text in the element.

Text-decoration: add embellishments to the text.

Text-indent: the first line of text in an indented element.

Text-shadow: sets text shadows. CSS2 contains this attribute, but CSS2.1 does not retain it.

Text-transform: controls the letters in the element.

Unicode-bidi: sets the text orientation.

White-space: sets how white space in the element is handled.

Word-spacing: sets word spacing.

Thank you for reading this article carefully. I hope the article "how CSS defines the appearance of the text" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.