Example Analysis of Css style conflict
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!
