What are the css appearance properties? Introduction to css appearance properties

This article brings you what are the appearance attributes of css? The introduction of CSS appearance attributes has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

CSS Appearance Properties

color: Text Color

The color property is used to define the color of text. There are three ways to take values:

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

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

3. RGB code, such as red can be represented as rgb(255,0,0) or rgb(100%,0%,0%).

It should be noted that if you use the percentage color value of 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 the line spacing, which is the distance between lines, that is, the vertical spacing of characters, generally called line height. There are three commonly used attribute value units for line-height, namely pixel px, relative value em and percentage %. The most commonly used unit in actual work is pixel px.

Under normal circumstances, the line spacing is about 7.8 pixels larger than the font size.

text-align: Horizontal alignment

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

left: Left-aligned (default value)

right: Right-aligned

center: Center-aligned

text-indent: The first line indent

text-indent attribute is used to set the indent of the first line of text. Its attribute value can be a value in different units, a multiple of the em character width, or a percentage relative to the width of the browser window. , negative values ​​are allowed, and it is recommended to use em as the setting unit.

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

p {    line-height: 25px;/*行间距*/
    text-indent: 2em;/*首行缩进*/
    }
h3 {    
    text-align: center;/*水平对齐*/
    }

letter-spacing: word spacing

letter-spacing attribute is used to define Word spacing, the so-called word spacing is the space between characters. Its attribute value can be a numerical value in different units, negative values ​​are allowed, and the default is normal.

word-spacing: word spacing

The word-spacing attribute is used to define the spacing between English words and is invalid for Chinese characters. Like letter-spacing, its attribute 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 for 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;/*字间距*/
    }
p {
    word-spacing: 5px;/*单词间距 针对英文 中文无效*/
    }

word-break:automatic line break

normal Use the browser's default line break rules.

break-all allows line breaks within words.

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

Color semi-transparent (CSS3)

When the text color reaches css3, we can adopt a semi-transparent format.

color:rgba(r,g,b,a) a是alpha 透明的意思 取值范围 0~1之间 color:raba(0,0,0,0.3)

Text Shadow (CSS3)

We can add a shadow effect to the text Shadow Shadow

text-overflow:水平位置 垂直位置 模糊距离 阴影颜色；

##Value Descriptionh-shadowRequired. The position of the horizontal shadow. Negative values ​​are allowed. v-shadowRequired. The position of the vertical shadow. Negative values ​​are allowed. blur Optional. Blurred distance. colorOptional. The color of the shadow. See CSS color values. The first two items are required, and the last two items are optional.

Related recommendations:

Use the appearance attribute of CSS3 to change the appearance of elements_html/css_WEB-ITnose

css margin Summary of margin attributes and usage

The above is the detailed content of What are the css appearance properties? Introduction to css appearance properties. For more information, please follow other related articles on the PHP Chinese website!