CSS (3) text (text)

Source: Internet
Author: User

First, CSS text format

1. Text Color

The Color property is used to set the color of the text. Colors are most often specified by CSS: Hexadecimal values-such as "#ff0000"; an RGB value-"RGB (255,0,0)"; Name of the color-such as "Red"

The background color of a Web page refers to the selection within the body:

body {color:blue;}

h1 {color: #00ff00;}

H2 {Color:rgb (255,0,0);}

2. Alignment of text

Text arrangement properties are used to set the horizontal alignment of text. Text can be centered or aligned to the left or right, justified. When Text-align is set to "justify", each line is expanded to equal width, left, and right margin are aligned (such as magazines and newspapers).

<! DOCTYPE html>


3. Text Decoration

The Text-decoration property is used to set or remove decorations for text. From a design point of view, the Text-decoration property is primarily used to remove the underline of a link:

a {text-decoration:none;}

You can also decorate text like this:

h1 {Text-decoration:overline;}

h2 {Text-decoration:line-through;}

h3 {Text-decoration:underline;}

Remark we do not recommend highlighting text that is not linked, because this often confuses the user.

4. Text conversion

Text conversion properties are used to specify uppercase and lowercase letters in a text. Can be used to turn all words into uppercase or lowercase letters, or capitalize the first letter of each word.

<! DOCTYPE html>

5. Indent text

The text indent property is used to specify the indentation of the first line of text. p {text-indent:50px;}

6. Text direction/writing direction

The Direction property specifies the text direction/writing direction. LTR: Default, Text direction from left to right. RTL: Text direction from right to left. Inherit: Specifies that the value of the direction property should be inherited from the parent element.

<! DOCTYPE html>


7. Character Spacing

The Letter-spacing property increases or decreases whitespace between characters (character spacing).

<! DOCTYPE html>


8, Row High

Line-height sets the row height in percent. Normal: Default. Set a reasonable line spacing. Number: Set the numbers, which are multiplied by the current font size to set the line spacing. Length: Sets the fixed line spacing. %: The percent line spacing based on the current font size. Inherit: Specifies that the value of the Line-height property should be inherited from the parent element.

<! DOCTYPE html>


9. Vertical alignment

The Vertical-align property sets the vertical alignment of an element.

Baseline: Default. element is placed on the baseline of the parent element.

Sub: subscript for vertical aligned.

Super: Superscript of vertical aligned aligned

Top: Aligns the top of the element to the top of the highest element in the row

Text-top: Aligns the top of the element with the top of the parent element's font

Middle: Places this element in the middle of the parent element.

Bottom: Aligns the top of the element to the top of the lowest element in the row.

Text-bottom: Aligns the bottom of the element with the bottom of the parent element's font.

%: Use the percent value of the "Line-height" property to arrange this element. Negative values are allowed.

Inherit: Specifies that the value of the Vertical-align property should be inherited from the parent element.

10, the Blank processing method

The White-space property specifies how whitespace within an element is handled.

Normal: Default. The blank will be ignored by the browser.

Pre: The blank will be reserved by the browser. It behaves like a <pre> tag in HTML.

NoWrap: Text does not wrap, text continues on the same line until the <br> tag is encountered.

Pre-wrap: Preserves a sequence of whitespace characters, but wraps normally.

Pre-line: Merges a sequence of whitespace characters, but preserves newline characters.

Inherit: Specifies that the value of the White-space property should be inherited from the parent element.

11. Word Spacing

The Word-spacing property increases or decreases the whitespace between words.

<! DOCTYPE html>


Second, CSS3 text effect

1. Shadow text

The Text-shadow property is applied to the shadow text. Syntax Text-shadow:h-shadow v-shadow blur color; Note: The Text-shadow property joins one or more shadow text. The property is a shadow, separated by commas for each 2 or 3 length value specified and an optional color value. The length of the time lapse is 0.

H-shadow: Required. The position of the horizontal shadow. Negative values are allowed.

V-shadow: Required. The position of the vertical shadow. Negative values are allowed.

Blur: Optional. Blur the distance.

Color: Optional. The color of the shadow.

<! DOCTYPE html>

 

2. Automatic line Wrapping

The Word-wrap property allows for long content to be wrapped automatically. Word-wrap:normal|break-word;

Normal: line breaks only on allowed hyphenation points (the browser keeps the default processing).

Break-word: Wraps inside a long word or URL address.

<! DOCTYPE html>


If there is no word-wrap:break-word;

3, the Alignment method

The Text-justify property specifies the justification for text alignment set to "justify". This property specifies how the justified alignment and spacing should be aligned. Grammar text-justify:auto|inter-word|inter-ideograph|inter-cluster| Distribute|kashida|trim;

Auto: The browser decides to align the line algorithm.

None: Disables snapping to lines.

Inter-word: Increases/decreases the spacing between words.

Inter-ideograph: Use ideographic text to align content.

Inter-cluster: Only content that does not contain internal word breaks (such as Asian languages) is aligned.

Distribute: Similar to the newspaper layout, except in the East Asian language, the last line is not aligned.

Kashida: Aligns the contents by stretching the characters.

4. Text Overflow

The Text-overflow property specifies what should happen when the text overflows the element that contains it. Grammatical text-overflow:clip|ellipsis|string;

Clip: Trim text.

Ellipsis: Displays the ellipsis to represent the trimmed text.

String: Uses the given string to represent the trimmed text.

<! DOCTYPE html>


CSS (3) text (text)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.