Home >Web Front-end >CSS Tutorial >css basic knowledge framework diagram

css basic knowledge framework diagram

高洛峰
高洛峰Original
2016-11-23 15:11:441800browse

css basic knowledge framework: (1: Basic knowledge epitome. 2. Basic knowledge framework diagram)

1. Basic concepts of css style sheets

2. Basic types of style sheets-----1. Embedded styles 2. Inline Connected style 3. Chain in the external style table 4. Import external

3. style table configuration method

4. Font attributes ---- 1.font-family

2.font-size (four size methods methods : Absolute size (xx-small... medium... xx-large 7 types), relative (larger, smaller, em), px, %)

3.font-weight (6 ways, normal (400), bold (700), bolder, lighter, 100. . . 900, inherit) 4.font-style (3 normal, italic, oblique) 5.font-variant (normal, small-caps, inherit)

6.font

5. Text attributes----1.text-align (5 attributes justify, inherit) 2.letter-spacing 3.color (3 color characteristics)

6. Background color and image settings

                                                                                         herit)

3.background-attachment (3 types of fixed, scroll , inherit)

                                                                                       background-position (3 ways)                                                  background-size                                                        box, border-box, content-box )

7.Background-clip (cut Padding-BOX, Border-BOX, Center-BOX, Text)

7. Border

1. Border-Width (5 kinds of Border, Border-Left-Width (Left, Right, Right , bottom))

                                                                                                                                  border-style (border-(top|left|right|bottom)-style There are 9 identical styles in each of the four types ///none/dotted/dashed/solid/double/groove/ Ridge/Inset/Outset)

3. Border-COLOR

4. Border-Imge (5, Border-IMAGE-SOURCE | Slice | Width | Outset | Repeace |)

8. -left,,)padding)

9. Web hyperlink settings 网 1. Web link attributes (4 link methods)

2. Add the rolling bar attribute Overflow (overflow-x, overflow-y) each.没有滚动条)2.auto(?超容时显示滚动条)3.hidden(隐藏滚动条)4.scroll(总是显示滚动条)

                   3.设置光标属性(cursor:hand|crosshair|text| waithourglass|help|move|e-resize|ne-resize |nw-resize|s-resize|url ('#'))

10.css area and positioning

1. Understanding of position (relative positioning and absolute Positioning)

2.z-index stacking order

3.float floating attribute

除 4.Clear Clear attributes

5.Clip is CSS's scissors hand

6.Overflow beyond the range (5 Visible (overflowing) Hidden, Auto overflow, otherwise, inherit)

7.visibility (4 types visible, hidden, collapse, inherit)

css basic knowledge framework diagram

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn