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

This article mainly introduces the Css style conflict example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

CSS style conflicts:

1.ID selector > class selector > tag selector

two。 Row-level style sheets > embedded style sheets > external style sheets

ID selector for external style sheets > tag selector for embedded stylesheets

Principle: principle of proximity

Various attributes of CSS (mastery)

Introduction of mesoscale units in CSS

Units of CSS:

a. Absolute units 1in=2.54cm=25.4mm=72pt=6pc, pt is a point or pound, pc is a pica

b. Relative units: px, em (printing units equivalent to 12 dots),% (relative to surrounding text)

* Font settings

P {

Font-size:50px; / * font size * /

Font-style:italic; / * italic * /

Font-weight:bold; / * bold * /

Font-family: young circle; / * font type * /

Font-variant:small-caps; / * lowercase to uppercase * /

}

* text settin

P {

Letter-spacing:0.5cm; / * letter spacing * /

Word-spacing:1cm; / * word spacing * /

Text-align:center; / * in the middle of the contained container * /

Text-decoration:overline; / * Font modifier underline underline line-through underline overline overline * /

Text-transform:lowercase; / * word font case * /

Color:red

}

* background settings

Body {

Background-color:#ff99ff; / * background color * /

Background-image:url (images/2.gif); / * background image * /

Background-repeat: no-repeat; / * no-repeat do not tile, repeat-x, horizontal tile, repeat-y vertical tile * /

Background-position:center right; / * background location * /

Background-attachment: scroll; / * background movement, fixed moves along with the scroll bar, scroll does not move * /

}

* list Settings

Ul li {

List-style:none; / * pre-list style * /

List-style-image:url (images/2.gif); / * picture in front of the list item * /

Margin-left:80px

}

* Box Model (border margin padding)

Padding: the distance from content to edge

Border: is the thickness of the edge

Margin: is the distance from the control to the control

* location setting (position,float,clear,z-index)

# d {

Position: absolute; / *

1. Absolute positioning: defines horizontal and vertical coordinates. Out of its own sequential flow.

two。 Relative positioning: relative to your original position in the sequential flow

, /

Left:100px; / * Abscissa * /

Top:100px; / * ordinate * /

Border:1px solid red

Width:100px

Height:100px

Background-color:#ff66ff

}

# d1 {

Position: relative; / * relative position * /

Left:100px

Top:100px

Border:1px solid green

Width:100px

Height:100px

Background-color:#339900

}

Span {

Position: relative

Left:20px

Top:20px

}

Z-index: the value is arbitrary, and the larger the value, the closer to us.

Float: floating

Overflow: what to do if it is out of range

Mouse style setting (cursor)

Thank you for reading this article carefully. I hope the article "sample Analysis of Css style conflicts" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.