Web page effects using CSS style sheet to implement the first word capitalization

Css| Capital | special Effects | web | page Effects | style sheet

There are many attributes that are rarely used in CSS, but these properties are sometimes discovered and immediately cause some people to chase them, which is the result of the first word capitalization. Recently more and more bloggers began to use this method in their blog, something is very simple, the following to introduce you to the use of: First-letter pseudo-class to achieve this effect method:

: First-letter version: CSS2 Compatibility: ie5.5+

Grammar:

Selector:first-letter {Srules}

Description

Sets the style of the first character within an object.

This pseudo object is used only for block objects. Inline elements to use this attribute, you must first set the height or width property of the object, or set the Position property to absolute, or set the display property to block.

Use the Font-size property and float property together in this pseudo object to make a drop cap effect.

Example:

P A:first-letter {Color:green}

Div:first-letter {color:red;font-size:16px;float:left;}

Apply to:

ie5.5+ address blocks QUOTE body CENTER DD DIV DL DT fieldset FORM Hn LEGEND LI LISTING MARQUEE MENU P plaintext PRE XMP

At present, both IE and FF support this attribute, so we do not have to worry about compatibility issues, of course, to remember to set the Float property Oh, otherwise there will be no such characters close to a few lines of effect.

Example (the Float property is not set):

<style>p{line-height:25px;} p:first-letter{font-size:50px;line-height:50px;} </style><p> Welcome to <a href= "http://www.webjx.com" > Web Teaching Network </a></p>
Run code Copy Code Save Code Collect this page

Example (set float property to left):

<style>p{line-height:25px;} P:first-letter{font-size:50px;line-height:50px;float:left;} </style><p> Welcome to <a href= "http://www.webjx.com" > Web Teaching Network </a></p>
Run code Copy Code Save Code Collect this page