Home > Developer > Web Develop
The color color property is used to set the colors of the text.
Colors are most often specified by CSS:
The background color of a Web page refers to the selection within the body:
{color:red;} {color:#00ff00;} {color:rgb (255,0,0);}Note: for standard CSS: If you define a color attribute, you must also define the background color property.
Second, the text of the alignmentThe Text-align text arrangement property is 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).
{text-align:center;} {text-align:right;} {text-align:justify;}Example code:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"> <title>CSS Tutorials</title> <style>H1{text-align:Center;}p.date{text-align: Right;}P.main{text-align:Justify;}</style></Head><Body><H1>CSS Text-align Instances</H1><Pclass= "Date">March 14, 2015</P><Pclass= "Main">"When I was young, I dreamed of changing the world, and when I was mature, I found that I could not change the world, I looked shorter, decided to change only my country; When I came into my twilight years, I found that I could not change our country, and my last wish was only to change my family, but that was not possible. When I was lying in bed, dying, I suddenly realized: if at first I just changed myself, then I could change my family, and with the help and encouragement of my family, I might do something for my country; and who knows? I may even change the world. ”</P><P><b>Attention:</b>Reset browser window size view"Justify"How it works.</P></Body></HTML>
Effect:
Third, text decorationThe 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:
{text-decoration:none;}You can also decorate text like this:
{text-decoration:overline;} {text-decoration:line-through;} {text-decoration:underline;}Example code:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"> <title>CSS Tutorials</title> <style>H1{text-decoration:overline;}H2{text-decoration:Line-through;}H3{text-decoration:Underline;}</style></Head><Body><H1>This is Heading 1</H1><H2>This is Heading 2</H2><H3>This is Heading 3</H3></Body></HTML>
Effect:
Note: We do not recommend highlighting text that is not linked, because this is often confusing for users.
Iv. Text ConversionThe Text-transform text conversion property is used to specify uppercase and lowercase letters in one text.
Can be used to turn all words into uppercase or lowercase letters, or capitalize the first letter of each word.
{text-transform:uppercase/* to uppercase */{text-transform :lowercase/* to lowercase */{text-transform: Capitalize/* to capitalize the first letter of each word * /The Text-indent text Indent property is used to specify the indentation of the first line of text.
{text-indent:50px;}Letter-spacing how to increase or decrease the space between characters.
{letter-spacing: add space between 2px/* Characters */{letter-spacing :-3px/* reduces space between characters * /LINE-HEIGHT Specifies the space between lines and rows.
{line-height:70%;} {line-height:200%;}Direction changes the text direction of the element.
{Direction:RTL;}Example code:
<HTML><Head><MetaCharSet= "Utf-8"> <title>CSS Tutorials</title> <styletype= "Text/css">div.ex1{direction:RTL;}</style></Head><Body><Div>Some text. Default writing direction</Div><Divclass= "Ex1">Some text. Right-to-left writing direction</Div></Body></HTML>
Effect:
Nine, the white space between the wordsWord-spacing increases the space between words.
P { word-spacing:30px;}White-space How to disable the wrapping of text within an element (sets the way in which whitespace is handled in the element).
P { white-space:nowrap;}Vertical-align how to set the vertical alignment image of text.
{vertical-align:text-top;} {vertical-align:text-bottom;}Effect
12. Set Text ShadowText-shadow sets the text shadow.
{Text-shadow:2px 2px #FF0000;}Effect
Note: Internet Explorer 9 and earlier browsers do not support the Text-shadow property.
13. All CSS Text propertiesCSS text (text)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
