Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

An example Analysis of the background and text of CSS style

2025-02-25 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly shows you the "background of CSS style, sample analysis of the text", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and study the "background of CSS style, sample analysis of the text" this article.

I. background

1. The background color uses the background-color attribute, for example: body {background-color:red}

2. Use the background-image attribute with the image as the background, such as body {background-image:ul1 (23.jpg)

3. The background is tiled repeatedly by the picture with the backgroud-repeat attribute, and repeat-x or repeat-y represent horizontal or vertical tiling, respectively.

No-repeat means to allow tiling from any direction.

For example: body

{background-image:url (23.jpg)

Background-repeat:repeat-x:)}

4. Use the background-position attribute to locate the background. [location: top, bottom, left, right, center, and can also be used.

Percentage (50%), length value (50px 50px)]

For example: body

{background-image:url (23.jpg)

Background-position:center}

5. Set the image association attribute to use background-attachment, for example, the background of the following picture will not scroll as the text scrolls.

Body {background-image:url (23.jpg)

Background-repeat:no-repeat

Background-attachment:fixed;}

II. Text

1. Indent text with the text-indent attribute. The most common indent is the first line of a paragraph. The indent value can be negative.

For example: P {text-indent:-5em}, but setting a negative number is easy to exceed the left boundary of the browser window, so pay special attention to it.

The indent value unit can be percentage%, length unit px, measure unit em

The text-indent property can be inherited, for example:

Div#outer {width:500px;}

Div#inter {text-indent:10%}

P {width:200px;}

Some text.some text.some text.

This is a pragramph

2. Horizontal alignment uses text-align attributes (left, right, center, justity)

3. Word-spacing can change the standard interval between words (words). The default value of normal is the same as the setting value of 0.

Word-spacing accepts either positive or negative length values.

4. Letter-spacing changes the spacing between characters and letters, and the rest is the same as word-spacing. The default value normal and the setting value 0 are

Similarly, accept positive and negative length values

5. Text-transform handles the case of text (none, uppercase uppercase, lowercase lowercase, capitalize initials are uppercase

6. Text-decoration handles text decoration (none, underline, overline underline, line-through run-through, blink flicker)

7. Handle the white space character white-space

Value pre-line, space character: merge, newline character: reserved, automatic line wrap: allow

Value normal, white space: merge, newline: ignore, auto-wrap: allow

Value nowrap, blank character: merge, newline character: reserved, automatic line wrapping: not allowed

Value pre-wrap, space character: reserved, newline character: reserved, automatic line wrapping: allowed

8. The direction attribute affects the writing direction of the text in the block-level element, the direction of the layout in the list, the direction in which the content fills its text box horizontally, and the position of the last line in the element at both ends (there are two values, ltr and rtk, where ltr is the default value, from left to right)

9. Line-height sets row height

The above is all the content of this article "background of CSS style, sample Analysis of text". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report