Home > Developer > Web Develop
1. Text Style: font-family
Font: Sans-serif (font eye-catching), serif (the beginning and end of the stroke has an additional decoration part, the readability is stronger)
* Page design preferably has multiple alternate fonts
2. Text Size: font-size
The absolute size and the relative size, in relative size Px,%,em (%,em with the browser default relative to the parent tag, without setting the parent tag).
Different browsers adopt relative font sizes.
3. Font Color: Color
span tags, which can be changed for specific fonts, inline elements
4. Text Thickness: font-weight
5. Text Italic: Font-style
Normal,italic,oblique
6. Underline, delete line: text-decoration
Blink flashing, ie not supported, FF can be
7. Letter case: Text-transform
Capitalize first letter capital; uppercase uppercase; lowercase lowercase
8. Paragraph alignment
Horizontal: text-align; Vertical: vertical-align, for the literal itself, this property has no effect on block-level elements and is useful for tables.
9. Line spacing: line-height word spacing: letter-spacing
10. First word magnification: float and span, special style control for the first word via the Span tab, and then Float:left highlighting
Pseudo-Class: First-letter, can also be implemented similar to the first word amplification, but the text of the property for some other CSS style support is not good, is not recommended to use.
Example: Baidu Search content display
1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />5 <title>Baidu Search Page</title>6 <styletype= "Text/css">7 Body{8 margin:0px;9 padding:0px;}Ten P{ One margin:0px; A font-family:Arial, Helvetica, Sans-serif;} - P.title{ - Padding-bottom:0px; the font-size:16px;} - p.content{ - Padding-top:3px; - font-size:13px; + Line-height:18px;} - P.link{ + font-size:13px; A Padding-bottom:25px; at Color:#008000;} - Span.search{ - Color:#c60a00;} - Span.quick{ - Color:#666666; - text-decoration:Underline;} in P.title Span.search{ - text-decoration:Underline;} to + </style> - </Head> the * <Body> $ <Pclass= "title"><ahref="#">China<spanclass= "Search">Spring festival</span>Welcome to the Web</a></P>Panax Notoginseng <Pclass= "Content">In the Chinese traditional festivals, the most lively. One of the most popular festivals is<spanclass= "Search">Spring festival</span>。<spanclass= "Search">Spring festival</span>, is the Lunar New Year's Day, is ... Send the lucky money is Chaoshan Spring Festival custom Important One, the elder wants to divide the income to the younger generation, can make money the younger generation also to send ...</P> - <Pclass= "link">www.chunjie.net.cn 2012-11-08-<spanclass= "Quick">Baidu Snapshot</span></P> the </Body> + </HTML>
CSS text effects
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
