Paragraph styles and backgrounds in CSS

First, paragraph style

the style of the paragraph in CSS is mainly line height, indentation, paragraph pairs Qi , text spacing, text overflow, paragraph wrapping, and so on. Their specific syntax is as follows:

　　

     Line-height:normal | Length Text-indent:length Text-align:left | Right | Center | Justify Letter-spacing:normal | Length Text-overflow:clip | Ellipsis Word-wrap:normal | Break-word

it refers to the height of each line of text in the paragraph, which is essentially different from the size of the text. After you set the row height, the text within the line is centered vertically within the row (the parent container is not less than the row height ), which is a common alignment in the page layout.

Cases:

p {line-height:25px;font-size:15px}

After you set the text in this way, the first line in the text label creates a 5-pixel spacing from the top border of the text.

Indentation is one of the most frequently used styles in Web typography, which controls the indentation of the first line of a paragraph.

Cases:

p {text-indent:2em;}

the first line of text in the P tag is indented 2 characters in length. Its attribute value can also be px,pt,cm , etc. representing the length of the unit.

paragraph pairs Qi You can use the text in a label in a way that is unique to it, with its attribute values representing the left, right, center, and justified. Where center alignment is often used in the layout of a Web page , and justification (justify ) is mostly used for typesetting articles in a foreign site .

Cases:

p {text-align:center;}

The text in P will be in the middle part.

Letter-spacing and word-wrap The value you set usually refers to the horizontal spacing of the text, and as for vertical spacing, we can use the line-height to set the adjustment. The two attribute values represent whether the line breaks at the boundary, normal The constant line that can overflow. and Causes the content to wrap within the bounds. If necessary, word breaks are allowed inside words.

Text-overflow is only used to indicate how the text overflow is displayed, to produce an ellipsis effect (ellipsis) when overflowing, and todefine mandatory text to be displayed on one line ( White-space:nowrap) and overflow content is hidden (overflow:hidden), the only way to achieve overflow text display ellipsis effect.

Cases:

Div,input{overflow:hidden;/* Condition 1: Out of partially hidden */white-space:nowrap;/* condition 2: Forces all text to be displayed on the same line */text-overflow:ellipsis;/* Out-of-section display ... */}

Second, the background

Determine the style of the background with color, picture, tiling method, positioning, etc.

1 Background color

setting the background color of the label is usually used to background-color:transparent | Color

The first value represents the background transparency, and the second value is the way a color behaves. The three representations of colors are in alphabetical order, followed by a 6-digit hexadecimal number, RGB (), or RGBA ().

Cases:

div{background-color:red;} Div{background-color: #ff0000;/* This can be abbreviated as #f00*/}div{background-color:rgb (255,0,0)}div{background-color:rgba ( 255,0,0,1);/* Fourth value is opacity, value range 0~1*/}

All four of these expressions produce the same red background.

2. Background Image

Background-image:none | URL (URL)

Using a background image, you can use a picture that is outside the text as the background of a particular label, with the value of the background image relative to the path or absolute path of the page file (image on the web).

Cases:

Body {background-image:url (images/bg.gif);}

The background image can also be a custom object, with the addition of linear and radial gradients in CSS3, here we look at linear gradients.

Cases:

Background-image:linear-gradient (to left, Red 30%,blue);

The above example sets the element to the right of the 0~30% width to red, followed by a gradient from red to blue. As you can see from the child, the linear gradient has three values separated by commas, each referring to the gradient direction, the starting point color, and the end color. Where the color can be followed by a space plus a percentage, indicating the proportion of the color in the entire object, and then the gradient begins to occur.

For the first property value, the number plus deg (angle) can be represented in addition to the direction of the gradient in English, which is 0deg above, and the angle value increases in a clockwise direction. The point described by the value is the end point of the gradient, and its start position is on the border of the 180deg direction element that the point rotates clockwise.

Cases:

Background-image:linear-gradient (270deg, Red 30%,blue);

Its appearance effect is consistent with the above.

3. Tiling Method

The tiling of the background is typically used in cases where the background is rendered as a picture, with values representing a full, uneven, tiled along the x-axis, and tiled along the y-axis.

Cases:

4. Background Positioning

Background-position: Align left alignment

Background positioning represents the position of the background object being set relative to the target element, with two values representing both horizontal and vertical coordinates, either in English or as a percentage, in pixels.

Cases:

5. Background Origin

Background-origin : border-box | padding-box | content-box;

This property sets the original starting position of the element background picture, and when you set the property, you must ensure that the background background-repeat is no-repeatand this property will not take effect. The so-called original starting position can also be understood as the positioning of the background, but it specifies the three attribute values so that the positioning can only be specified in the elements of the border, padding, content area. As shown in the following:

6. Background Display Area

Sets the area in which the background image is cropped outwards. This is the background that can be seen inside the element, and it shows the following results:

7. Background dimensions

In many cases, the background image we set does not match the size of the element, when we either see only part of the background image, or we see a large number of blank backgrounds within the element, which does not match our expectations. If the effect is not achieved, we will set the size of the background image with the following syntax:

Background-size: Width Value Height value

For the value of its property value, we have the following five ways to take the value:

Auto default value, does not change the original height and width of the background picture.

The length of the pair appears in pairs such as 200px 50px, the background image width is set to the first two values, when setting a value, as the picture width of the value to be scaled.

Any value between the percent 0%~100%, set the background image width height to the value of the element's width, multiplied by the previous percentage, and the same as when a value is set.

Cover is optional. The ruler of the shadow is the name of the overlay, and the background image is scaled to fill the entire container inch.

Contain is optional. The color of the shadow. See CSS Mask to accommodate the color value of the background image, such as zooming to one side and sticking to the edge of the container.
By understanding the above values, we can easily set the background image to the way we want it to be.

Cases:

Div{background:url (img_flwr.gif); background-size:100% 100%;background-repeat:no-repeat;}

With the above settings, we set the size of the background image to the style of the fully populated element.

Having learned the settings of the above seven background styles, we can do shorthand in the actual code operation in the following format:

Background: Background color background image background tile style background positioning

Using this method we can greatly reduce the amount of code written.

Cases:

Body {background-color:# Ededed;background-image:url (images/bg.png); background-repeat:no-repeat; background-position:50%  30px;}

After the abbreviation, there is only one line of code

Body {background: #EDEDED URL (images/bg.png) no-repeat 50% 30px;}

The above is to set a single background for an element, to understand the above knowledge, we can also set a number of background images for an element. The specific syntax is as follows:

Background: [Background-color] | [Background-image] | [Background-position] [/background-size] | [Background-repeat] | [Background-attachment] | [Background-clip] | [Background-origin],...

We only need to use commas to separate the abbreviated values for each set of background, which should be noted:

1. If there is a size value, it needs to be followed by position and separated by "/";
2. If there is more than one background picture, and the other property has only a single (for example, Background-repeat only one), it indicates that all background pictures apply the property value.
3.background-color can only set one.

Paragraph styles and backgrounds in CSS