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

Editor to share with you the Web front-end development of css basic style example analysis, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

Use of colors and units

Color

Use the name of the color to represent the color, for example: red

Use hexadecimal to represent the demonstration, for example: # FF0000

Colors are represented by rgb values, rgb (red, green, blue), each between 0255and 255mm

Colors are usually represented in hexadecimal.

Unit

Px: pixels, related to the resolution setting.

% relative to how many percent of the browser, you can set the width of width, not height.

Text style (text)

Color: setting text color

Text-apgn: setting text alignment

Center

Left

Right

Letter-spacing: word spacing / letter spacing

Word-spacing: word spacing, set if there is a space, look at the space in Chinese.

Pne-height: row height (row height of the second row = bottom of the first row to the top of the third row)

Text-indent: usually only 2 30px

Text-decoration: text decoration

Underpne: underline

Overpne: underline

Pne-through: delete Lin

Bpnk flashing (does not work)

Text-transform: case conversion

Uppercase: all uppercase

Lowercase: all lowercase

Capitapze: each word begins with an uppercase

Text-shadow: create text shadows (horizontal offset px, vertical offset px, blur px, shadow color). The higher the blur, the more blurred the value.

Set the font:

Font-style: font style itapc,obpque italic

Font-size: setting font size

Font-weight: sets the font thickness. Bolder is the thickest.

Font-family: set text fonts, italics, official script, etc.

Font abbreviated attribute: the style weight size family (space) order must be in this format. Generally, put the line spacing letter-spacing after the font attribute after using the abbreviated attribute, otherwise it will be overwritten.

Border and background

Apply a border to an element

Border-width: border width

Border-style: border styl

None has no border

Dashed dotted line

Soped solid line

Double double wire

Groove slot line

Dotted dot line border

Inset embedded outset convexity

Ridge Ridge Border

Bolder-color: border color

The abbreviated form border:width style color has no order.

Set a border separately

Border-top/bottom/left/right-width/style/color

Abbreviated form: border-top {width,style,color}

Apply the fillet border (just write one if the x radius, y radius and xy are the same)

Border-top/bottom-left/right-radius

Abbreviation: border-radius

Set element background

Margin-right: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; pst-style: disc; "> background-image: {url (")} background image address

Background-repeat: background image repetition mode, general no-repeat

Background-size: background map siz

Background-position: background map location

Abbreviation: background:color image repeat position, if the size is not written, it will conflict.

Create a box shadow

Box-shadow: horizontal offset Vertical offset blur value Shadow extension Radius Shadow Color 10px 10px 5px 0px red

Add multiple shadows, directly after the first, continue to write the second with a comma, the first is set to an integer, and the second shadow is set to negative

Set Contour

The difference between borders and outlines: outlines do not belong to the page and do not adjust the layout of the page because of the application of outlines

The frame occupies the actual size, but the outline does not.

When hover hover is set, the contour modified div will not shift, but when the frame is modified, it will shift.

Outpne-color: outline color

Outpne-style: profile styl

Outpne-width: outline width

Outpne-offset: outline offset from element border

Abbreviation: outpne

Other styles (table, list, transparency, cursor)

Form

Border-collapse adjacent cell border processing, merge table = collapse

Border-spacing: adjacent cell spacing

Caption-side: title location

Empty-cells: whether empty cells are displayed

List

Pst-style-tyle: marking styles at the front of the list, dots, square dots, etc.

Pst-style-image: list image marker

Abbreviation: all properties of the pst-style:none cancel list are generally used for navigation

Horizontal navigation: P {display:inpne}

Transparency

Opacity: set transparency (value between 0-1)

Cursor shape

Cursor: sets the shape of the cursor, when the cursor is over a div, sets the wait shape, hand shape, etc.

Box model

The box model is divided into elements, inner margin, border and outer margin.

1. Set elements of a certain size

1)。 Width: sets the element width 2). Height: setting element height

two。 Set the inner margin

Padding-top/bottom/right/left

Padding: abbreviated form

3. Set the outer margin (the distance from the border to the edge of the browser or to the next box)

Margin-top/bottom/left/right

Margin: abbreviated form

4. Set the minimum and maximum size (when the width is set to a percentage, expand or shrink the browser or change the large or small screen monitor to prevent element dislocation or overflow)

Min-width: the minimum value is the addition of two div widths

Max-width: maximum

5. Deal with element content overflow

Overflow-x/y:x or y-axis overflow

Overflow: abbreviated form: scroll sets scroll bar (overflow handling)

6. Change element type

1)。 Element types are as follows:

Inpne inline element: width and height cannot be set in the page, nor will it occupy a single line.

Inpne-block inline block-level elements: cannot occupy a single line, but can set width and height .img elements

Block block-level element: exclusive row, width and height can be set, pcenture div element

2)。 Change the element type display:

The types of elements can be converted to each other, and the properties of elements change after the transformation.

Div is generally not converted to inline elements, will be discarded, and cannot be set high

3)。 Hidden element: display:none

7. Float and prevent elements from stacking

Floating: float:left/right

Eliminate elements stacked together: clear:both (eliminate both left and right)

8. Case study:

The construction of Baidu page:

Tip: to center div, directly margin:0 auto

In order not to execute the browser default feature initially: * {margin:0px; padding:0px}

To prevent div block overflow, set the maximum and minimum value. The minimum is the addition of div on the left and right sides.

Text vertically centered: pne-height

Do navigation, link a tag and add it to the p tag

Layout style

1. Positioning mode position

Static: default, elements are ordinary elements, document flow positioning, from top to bottom

Relative (relative): the position of the element is relative to the ordinary position, the position before the displacement of other elements can not be used, generally do not make much change, to fine-tune the position of an element, can only use top,left I feel that he is moving relative to his previous position

Fixed (fixed): relative to the browser window to locate, commonly used!, displacement before the position will not be occupied, up and down can be used, small advertising commonly used, scroll bar constantly moving, his position remains the same, he will leave the document stream, floating on the document stream, his up and down left and right is relative to the edge of the position, for example: top50px is not moving up the 50px Instead, the distance of the element relative to the top border 50px setting buttom can also be used, and pulling the scroll bar will not change the position

Absolute (absolute): an ancestor element whose relative position value is not static determines the child element according to the ancestor element change according to whom the ancestor element cannot change for static, and who cannot be static (default is static), which occurs between the parent and son or between the ancestor element and the descendant element.

two。 Positioning layout

Top/bottom/left/right

3. Z-index

It is used to set the number of display layers of elements and elements, both positive and negative.

Must be used with position

Transition, deformation

1. Transition: elements gradually change from one style to another

Attributes:

Transition-delay: set the delay before transition

Transition-duration: setting transition time

Transition-property: set the properties of transition participation

Transition-timing-function: transition rate (pnear uniform)

Transition: shorthand (property duration timing-function delay)

Reverse transition:

Set it in hover, paste it into div, and that's fine.

two。 Deformation

Transform: specify how to deform

Transform: scaleX/Y (1.5) zooms by 1.5x

Transform: rotate (360deg) rotates 360degrees deg represents degrees, which works well with the transition time

Transform: skew (X-axis angle, Y-axis angle) angle of tilt

Transform: the distance translate (X-axis distance, Y-axis distance) moves

The above is all the content of the article "sample Analysis of the basic style of css developed by Web Front end". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to 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.