Example Analysis of css Selector and text style

This article introduces the relevant knowledge of "css selector and text style instance analysis". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Css fundamentals-the css selector is related to css text styles:

Use link to link in external styles, and styles are loaded when the page is loaded.

@ import url ("* .css"); using import, the style will not be loaded until the page is loaded

The order of linking pseudo-classes

: link- >: visited->: hover- >: active

Or

Visited->: link->: hover- >: active

Priority of selector:

Id selector > class selector > tag selector

If the same class style is set, the class style has nothing to do with the order of the classes in the element, depending on which style is used closest to the element that needs to reference the style, so the text color in div is "orange".

Selector weight:

Tag selector: 1

Class and pseudo-class selector: 10

Id selector: 100

Wildcard selector: 0

Inline style: 1000

! important: highest priority

When the weight is different, the style is judged according to the weight; when the weight is the same, the style is judged according to the nearest principle.

Common selector:

Input:focus

The initials of the p:first-letter p element

The first line of the p:first-line p element

The difference between serif fonts and sans-serif fonts:

Sans-serif is decorated.

Sans-serif has no modification

Font-style:normal/italic/oblique

Normal italic tilt

Font abbreviated order: font-style font-variant font-weight font-size font-family

Img level is center:

Img is not a block-level element and cannot use img {text-align:center;}

You can wrap div around img, using div {text-align:center;}

Margin:0 auto can also be implemented.

Vertical-align can set numeric values

Single-line text is centered horizontally and vertically:

Height is the same as Line-height, text-align:center

Multiline text is centered horizontally and vertically:

Multiline text Settings margin:0 auto

Container settings outside the text: display:table-cell;vertical-align:middle

Outer container setting of the outer container of text: display:table

Vertical-align * {padding:0px;margin: 0px;} .warp1 {height:80px; width: 100%; background-color: # 14191e; line-height:80px; text-align:center;} .warp1 H2 {color:#fff; font-size:24px;} .warp2 {height:400px Width: 100%; border:1px # 14191e solid; display:table;} .content {display:table-cell; vertical-align:middle;} .content p {width:500px; font-family: "Microsoft Yahi"; line-height:1.5em; font-size:14px; margin:0 auto } CSS vertical-align property

The vertical-align attribute sets the vertical alignment of the element

This attribute defines the vertical alignment of the baseline of an inline element relative to the baseline of the row in which the element is located. Allows you to specify negative length values and percentage values. This causes the element to fall rather than rise. In a table cell, this property sets the alignment of the contents of the cell in the cell box.