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

This article will explain in detail what the appearance attribute of css is, and the editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

CSS appearance Properties

Color: text color

The color attribute is used to define the color of text, and its values can be obtained in the following three ways:

Predefined color values, such as red,green,blue, etc.

Hexadecimal, such as # FF0000,#FF6600,#29D794, etc. In practice, hexadecimal is the most common way to define colors.

A RGB code, such as red, can be expressed as rgb (255j0mem0) or rgb (100% pence0pl 0% 0pc0).

It is important to note that if you use the percentage color value of the RGB code, the percent sign cannot be omitted when the value is 0, and must be written as 0%.

Line-height: line spacing

The line-height property is used to set line spacing, which is the distance between lines, that is, the vertical spacing of characters, commonly referred to as line height. There are three kinds of attribute value units commonly used in line-height, which are pixel px, relative value em and percentage%. In practical work, pixel px is the most commonly used.

In general, line spacing is about 7.8 pixels larger than the font size.

Text-align: horizontal alignment

The text-align property is used to set the horizontal alignment of text content, which is equivalent to the align alignment property in html. The available property values are as follows:

Left: align to the left (default)

Right: align to right

Center: Center alignment

Text-indent: first line indent

The text-indent property is used to set the indentation of the first line of text. Its property value can be a numeric value of different units, a multiple of the width of the em character, or a percentage of the width of the browser window. Negative values are allowed. It is recommended to use em as the setting unit.

1em is the width of a character. If it is a paragraph of a Chinese character, 1em is the width of a Chinese character.

P {line-height:25px;/* line spacing * /

Indent the first line of text-indent:2em;/* * /

}

H4 {

Text-align:center;/* horizontal alignment * /

}

Letter-spacing: word spacin

The letter-spacing attribute is used to define word spacing, which is the space between characters. Its attribute value can be a value of different units, negative values are allowed, and the default is normal.

Word-spacing: word spacing

The word-spacing property is used to define the spacing between English words and is not valid for Chinese characters. Like letter-spacing, its property values can be values in different units, negative values are allowed, and the default is normal.

Both word-spacing and letter-spacing can be set in English. The difference is that letter-spacing defines the spacing between letters, while word-spacing defines the spacing between English words.

P {

Letter-spacing:2px;/* word spacing * /

}

P {

Word-spacing:5px;/* word spacing is not valid for English and Chinese * /

}

Word-break: automatic line wrapping

Normal uses the browser's default line wrapping rules.

Break-all allows line breaks within words.

Keep-all can only wrap at half-width spaces or hyphens.

Color translucency (CSS3)

When the color of the text reaches css3, we can adopt a translucent format.

Color:rgba is alpha transparent. The value range is 0 to 1, color:raba (0 to 0).

Text Shadow (CSS3)

We can add shadow effects to the text, Shadow shadow.

Text-overflow: horizontal position, vertical position blur distance shadow color

Value description

H-shadow is required. The position of the horizontal shadow. Negative values are allowed.

V-shadow is required. The position of the vertical shadow. Negative values are allowed.

Blur is optional. A blurred distance.

Color is optional. The color of the shadow. See CSS color values.

The first two items must be written, and the last two items can be selected.

This is the end of this article on "what is the appearance of css?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.