CSS3 First day of study

CSS3 text and font text-overflow and Word-wrap

Grammar:

Text-overflow:clip;       /* Cut */text-overflow:ellipsis;    /* Omit Mark */

But Text-overflow is only used to illustrate the text overflow in what way display, to achieve overflow when the effect of ellipsis, you must also define the force text in a row (white-space:nowrap) and overflow content is hidden (Overflow:hidden), This is the only way to achieve an overflow text display ellipsis effect, the code is as follows:

CSS3 text and font embedding fonts @font-face

@font-face is able to load the server-side font file, allowing the browser to display fonts that are not installed on the user's computer.

Grammar:

{    : font name ; : The relative or absolute path of the font file on the server ;}     

Once this is set, you can set the font style in (font-*) as you would with normal fonts.

Like what:

{    :12px; : "My Font";         /* required, set font-family same value in @font-face */}

CSS3 background Background-origin

Grammar:

Ackground-origin:border-box | Padding-box | Content-box;

The parameters indicate whether the background picture is from the border, the padding (the default), or the content area to begin displaying.

It is important to note that if the background is not no-repeat, this property is not valid, it will be displayed starting from the border

CSS3 background Background-size

Sets the size of the background picture to be displayed as a length or percentage, and to scale the picture through cover and contain.

Grammar:

Background-size:auto | < length value > | < percent > | Cover | Contain

Value Description:

1, Auto: Default value, do not change the original height and width of the background picture;

2, < length value;: paired appearance such as 200px 50px, the background image width is set to the first two values, when setting a value, it as the width of the picture as a value to zoom;

3, < percent >:0%~100% any value between the width of the background image is set to the height of the element is the value of the previous percentage, when a value is set as above;

4, cover: As the name implies for coverage, the background image is more than scaling to fill the entire container;

5, contain: accommodate, will be the background picture, etc. than zoom to one side of the edge of the container.

CSS3 First day of study