Learn from scratch _javascript_ series (--css<3>) (text, Alignment, fillet, box model, background)

Note that some CSS properties may not be supported for low-version browsers (typically IE), so it is important to note that when targeting a low-version browser.

Web site about compatibility detection for CSS properties: http://caniuse.com/

Some pictures from NetEase cloud classroom, invasion, private messages, delete

(34) Text font

①font-size: Text Size

② values are: Length (specified), Absolute-size (absolute value, less used), relative-size (relative value, less used), percentage (percent)

Length: 15px (15px size), 2EM (twice times the size of the parent element property)

Percentage: If 200% (similar to 2EM, indicating twice times the size);

③font-family: type of text

④ values are: family-name (literal type name), generic-family (generic type)

Family-name: If

Generic-family: such as serif, Sans-serif, cursive (cursive), Fantasy (fantasy), monospace (equal width font).

⑤ when a row style, font-family value at the same time have multiple side-by-side, priority to use the previous, if the font is not in front (for example, English font, not Chinese font), then use the back of the front.

In other words, if the previous Chinese and English are included, then the latter is invalid (if she is a description of English or English);

⑥font-weight: Font Bold

Values: normal (unchanged), bold (bold), bolder (relatively few), lighter (rarely used).

Values: 100, 200, etc. until 900, general fonts only support 400 and 900

⑦font-style: Font italic

Values: Normal (OK), italic (italic, font has italic words with this, generally use this), oblique (italic, forced tilt, the font without italics italic, generally do not)

⑧line-height: Line spacing

Values: Normal (non-fixed value, browser-determined, typically between 1.1~1.2), number (value, for example, 1.1), length (such as 35px, or 3em,1em size is font size), percentage (percent, such as 150%).

The difference between percentages and number (that is, the difference between 200% and 2): Percentages are not set by the style of a particular line (sub-label) (uniformly used, not for one), and number is affected by a specific line (font-size of a child tag) (direct inheritance).

In other words, if the font size of a child tag in the parent tag is different, number changes in real time, and the percentage is the same.

⑨ abbreviation: font: [<font-style> | | <font-weight>]? <font-size> [/<line-height>]? <font-family>

Simply put, Line-height should have a "/" before the specific value.

Note: In the case of abbreviations font-size and the font-family is required, it must be, and if it is less, the property will not work.

Example:font:italic bold 40px/200% fantasy;

Represents italic, bold, font size 40px, line spacing 200%, font fantasy body.

⑩color: Font Color

Value:

Text (such as red),

Six-bit notation (such as #ffffff for White, or three-bit notation),

RGB notation (such as RGB (0,0,0) for Black),

Rgba notation (on the basis of RGB notation, the last parameter for transparency, such as RGB (0,0,0,0.5) for black, 50% transparency, 1 for opaque)

Color:transparent means full transparency

(36) Text decoration

①Text-shadow: Text Shadow

Value:

None (no shadow);

Length (X-axis offset direction, y-axis offset direction, shadow blur radius (Defocus) can be omitted, plus a color can be omitted will automatically use the text color);

②text-decoration: Underline

Value:

None (without adding lines);

Underline (underline);

Overline (underlined);

Line-throught (midline dash);

Note: Three kinds of lines can exist simultaneously, do not interfere with each other, separated by a space

(37) Text Advanced settings

①text-overflow: setting when text overflows

Clip: Default value

Ellipsis: (overflow part set to three points)

Note: Text-overflow:ellipsis needs to be used in conjunction with Overflow:hidden and white-space:nowrap , which means no line break, and the overflow section is automatically hidden, with "..." Alternative.

②cursor: Defining the mouse shape

Value:

[<uri>,] picture

Auto default, Auto-processed

Default mouse cursor,

None disappears

Help with a question mark.

Pointer hand type

Zoom-in Magnifier

Zoom-out Narrow Mirror

Move an icon with four directions

Example:

Cursor:pointer; specified as Hand type

Cursor:url (xx.cur), pointer; specified as a picture, if the picture is invalid Pointer

This refers to the change when the mouse moves to the target area.

③inherit: Forced inheritance

When a property of a CSS has a parameter of inherit, it is forced to inherit the value of its parent element.

The reason is that there are CSS properties that may not inherit from the parent element, such as border, then using Border:inherit in child elements will force child elements to use the parent element's Border property

(35) Alignment

①text-align: Value

Left (right-aligned);

Right (justified);

Center (center);

Justify (justified) (requires more than one line and does not take effect on the last line.) Chinese characters will change the spacing, English will adjust the space between the words;

②vertical-align: Vertical alignment

Value:

Baseline (baseline alignment);

Sub (subscript);

Super (superscript);

Top (aligns to the highest point of the current line);

Text-top (highest point of the text);

Middle (vertical center);

Buttom and Text-buttom (corresponds to above);

Percentage: (referring to line high line-height, reference is also baseline as the starting point);

Length: (such as 10px, for the starting point of baseline, upward 10px, can also be negative, then down)

③text-indent: First line Indent

Value:

Length (1em is 1 text size, usually 2em, or 10px, which means the indent fixed 10px value is not normally used.) If it is a negative, then the text container moves outside, if very large, then leave the browser, can be used for SEO, does not affect the normal use but can be effective for the search engine);

Percentage (percent, refers to the entire container width, 20% indents the entire container's width of 20%)

④white-space: space, line wrapping, tab, whether wrap

Value:

Normal: Normal (browser decision), usually line, tab, Space will be merged into a space, will automatically wrap;

NoWrap: On the basis of normal, do not break the line (if one line cannot write, will exceed);

Pre: newline preserves, spaces and tabs are retained, and are not wrapped (in full format in code);

Pre-wrap: Allows automatic line wrapping on the basis of the pre.

Pre-line: Keep line breaks, spaces, tab merge, and allow line wrapping.

⑤word-wrap: Word wrap (but Word will remain intact)

Value: Normal (does not wrap), Break-word (allow word wrapping);

Effect: Assuming the bank does not fit, put it on the next line

⑥word-break: Word wrap (Word does not remain intact)

Values: normal (unchanged), Keep-all (similar to normal), Break-all (allows any two letters to be disconnected).

Effect: If the bank does not fit, the bank is full and the remaining letters are placed on the next line

(39) Fillet (low version IE not supported)

①Border-radius:x - direction radius {1~4 }/y direction radius {1~4 }

Note that there is a "/" between X and Y

Here are two parameters that can be understood as the length of the segment affected by the x direction and the length of the segment affected by the Y direction

② direction: Top-left, etc. four

③ Several scenarios are assumed:

<1>border-radius:10px; Four x, Y are 10px

<2>border-radius:10px100px; The top left and bottom right x, Y are 10px, the upper right and bottom left X, y are 100px;

<3>border-radius:10px/100px; Represents the x offset of Four Corners is the 10px,y offset is 100px

<4>border-radius:0px10px 20px 30px/100px 110px 120px 130px; Indicates upper left x offset 0,y offset 100px, upper right 10 and 110, lower right 20 and 120, lower left 30 and 130 (clockwise from top left)

<5>border-radius:50%; Four angular offsets, all 50% x and y (assuming x=y, then a positive circle)

(41) Size of box model

①box-sizing:

② value: Content-box (default, content/text area)

Border-box (refers to the size of the border)

③ Impact: The value of width and height affects which area:

Default value: Affects content area

Border-box: Affecting the border region

That is, in the case of Border-box, the size of the content area, which requires width and height minus the value of padding four directions, can be obtained.

(42) Box Shadow

①Box-shadow

② value: None (Default, outer shadow), inset (inner shadow)

③ For example:

box-shadow:1px 2px 3px 4pxred;

The first parameter refers to the horizontal offset (left and right), positive to right, negative to left;

The second parameter refers to the vertical offset (top and bottom), positive value downward, negative value upward;

The third parameter refers to the blur radius, the inside and out 1.5px blur (after the offset, plus the fourth parameter after the shadow size of the baseline as the Datum line, that is, the case of this data, the X-direction shadow farthest to 1px+4px+3/2px);

The fourth parameter refers to the shadow size, which refers to the width of the shadow's extra expansion after the offset (mainly affecting the two baselines after the offset, increasing the width of the shadow)

The fifth parameter refers to the color of the shadow;

④ Inner Shadow:

Box-shadow:inset 2px 2px 5px5px red;

Box shadow, X axis to the right offset 2px,y axis downward offset 2px, the blur radius is 5px (based on the baseline, the baseline definition as above), the shadow size is 5px, the shadow color is red;

⑤ Multiple Shadows:

box-shadow:5px 2px 10px 10pxred,inset 5px 2px 10px 10px Blue;

The equivalent of both inside and outside the shadow, specifically do not elaborate.

(43) Contour Line

①outline: color style width ;

can also be set apart:Outline-color , etc.

② Description: A line that is drawn around an element that is located on the periphery of the edge of the border can act as a prominent element. But it doesn't occupy space, or it's not necessarily a rectangle.

③ Style: Solid solid line, dashed dash, dotted point (square)

The ④ will be pressed onto the text/image and so on.

(40) Handling of excess parts

①Overflow:

② Value: Visible display (default)

Hidden hidden

Scroll scrolling (2 scroll bars appear, and no matter how much content is always there)

Auto Automatic (less scroll bar, more words with scroll bar)

③ set in one Direction individually: Overflow-x or overflow-y the x and y axes of a certain direction to the outside part of the processing

(45) Background color

①Background-color:

② value: Rgb,rgba, English word, #加6位/3-bit notation

③ default value is: transparent (transparent)

(46) Background image

①Background-image:url ( address )

② Value: url (address)

You can have quotation marks or no quotes in parentheses.

③ can add multiple URL attributes, separated by commas, so both images become background images. And the front, which will be located above, behind, will be located below (overwritten)

④background-color will be located below the picture (lowest level)

(47) Tile background image

①background-repeat:

② Value:

Repeat-x only the x-axis direction tile

Repeat-y only the y-axis direction tile

Space tile, leaving a little space between each picture (the maximum value that can be kept)

Round tiling, stretching (just enough to hold it in a scaled way)

No-repeat Uneven Shop (only once)

③ assume that the normal can hold 3.5 pictures, space to accommodate 3 (empty), Round 3 or 4 (OK is not empty, but specifically to reduce or enlarge, do not know how to determine)

④background-repeat:no-repeatrepeat;

The first parameter is the x-axis, the second parameter is the y-axis

⑤background-repeat:no-repeat,repeat;

Note that there are comma-separated, first for the first picture, and the second for the second picture (when there are multiple background images)

(48) Scrolling of background images

①background-attachment

② Value:

Scroll default, when text has scroll bars, the background picture remains the same (does not scroll)

Local when the text scrolls, the background picture scrolls along

Fixed is seldom used, the reference is the entire window.

(49) Position of background image

①background-position

② Value:

Two parameters:

background-position:10px20px x-axis (toward right) offset 10px,y axis (downward) offset 20px

background-position:20%40% x-axis offset 20%,y Axis 40% (the point of the x-axis 20%,y axis 50% of the picture, located in the entire container x-axis 20%,y axis 50% that point, that is, two points coincident, the position of the picture), when 50% 50%, the picture is centered

Background-position:centercenter; Center picture

Top corresponds to Y-axis 0%,buttom equivalent to y-axis 100%

One parameter:

Background-position:left x axis is centered on left and Y axis, equivalent to X axis 0%,y axis 50% (center)

The parameters described match, another parameter Auto Center

Four parameters:

background-position:left10px top 20px; The left side of the picture is on the left side of the container 10px, top 20px above the top of the picture.

Different from the reference point above

③ only displays a portion of the picture :

Suppose the icon starts at the x-axis to the right 100px relative to the upper-left corner of the picture, and the y-axis begins at 0px, so write:

background-position:-100px,0px;

As a result, the image only shows the icon part (that is, from the upper left corner of the image to the right 100px);

Y-Axis method

(50) Linear gradient

①linear-gradient () This is the background-image parameter.

② the value in parentheses:

angle:(gradient direction, from top down to Buttom by default) to right buttom is from top left to bottom. Can also be written as 0deg (0 degrees, from bottom to top), 45deg (clockwise to 45 degrees, note that is centered on the x-axis and the y-axis-should be);

Gradient color: The first value defaults to the position at 0%, the last value defaults to 100%, and the median defaults to the split position, such as red, blue, green. Can also be written as red, Blue 20%,green, then blue will be in 20% position, green in 100% position

③ Example:

Background-image:linear-gradient (red, blue)

Picture from top down, from red to blue

Background-image:linear-gradient (to right top, red, blue)

From bottom left to top right, from red to blue gradient

Start from scratch _javascript_ series (--css<3>) (text, Alignment, fillet, box model, background)