Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "css Selector and css text style instance Analysis", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "css Selector and css text style instance Analysis" article.

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 Yahei

Line-height:1.5em

Font-size:14px

Margin:0 auto

}

CSS vertical-align attribute

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.

Text case:

Text-transform:capitalize/uppercase/lowercase/none

Text decoration line:

Text-decoration: underline/overline/line-through

Apply demo to the text style:

Vertical-align

* {padding:0px;margin: 0px;}

.wrap {

Height:200px

Line-height:200px

Width:100%

Text-align:center

Background-color: # abcdef

Font-family: song style

}

Span.words {

Font-size: 28px

Color: gray

Text-decoration: underline

Letter-spacing: 5px

Margin-left: 10px

Vertical-align: 12px

}

Span.name {

Color:red

Font-size: 60px

Letter-spacing: 10px

Text-transform:uppercase

}

Span.mark {

Font-style: italic

Color: gray

Font-weight: bold

Font-size: 60px

}

Cyy, you're gonna get better and better!

Text style demo2:

Vertical-align

* {padding:0px;margin: 0px;}

.wrap {

Height: 100px

Line-height: 34px

Width: 100%

Padding-left:10px

}

Hr {

Margin:10px 0

}

H4 {

Color:green

Margin: 10px 0

}

A {

Text-decoration: none

Color:#009

}

Span {

Color:orange

}

The Film Review of the Marriage of A Chinese Odyssey

Hot / latest / good friends

Roxithromycin ★ 2019-07-26

Does anyone recite my lines in a competition with me?

Reading: 1615 useful

Seventeen cats and fish ★★★★ 2019-04-26

A movie that can be seen again at any time and on any occasion.

Reading: 515 is useful

Warm family man ★★★★ 2019-04-22

There must be some movies that can never be surpassed.

Reading: 490 useful

The above is about "css selector and css text style instance analysis" of this article, I believe we all have a certain understanding, I hope the editor to share the content to help you, if you want to know more related knowledge content, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.