CSS

css file

Get Started. It's Free
or sign up with your email address
Rocket clouds
CSS by Mind Map: CSS

1. background

1.1. background-color

1.1.1. color

1.1.2. rgb()

1.1.3. # code-color

1.1.4. rgba()

1.2. background-image

1.2.1. url()

1.3. background-repeat

1.3.1. repeat X

1.3.2. repeat Y

1.3.3. repeat (X, Y)

1.3.4. no-repeat

1.4. background-position

1.4.1. top

1.4.2. right

1.4.3. bottom

1.4.4. left

1.4.5. %

1.4.6. px

1.4.7. center

1.5. background-size

1.5.1. cover

1.5.2. contain

1.5.3. length: %, px,...

1.6. background-attackment

1.6.1. :fixed

1.6.2. :scroll

1.7. background

2. css selector

2.1. class

2.2. id

2.3. attribute

2.4. element

3. insert css in html

3.1. inline

3.2. internal

3.3. external

4. style text

4.1. font-size

4.2. font-weight

4.3. text-decoration

4.4. text-tranform

4.5. text-alight

4.6. text-indent

4.7. text-justify

4.8. text-shadow

4.8.1. X

4.8.2. Y

4.8.3. X Y #color

5. 5 use to hidden element

5.1. visibility

5.1.1. hidden

5.1.2. visible

5.2. opacity

5.2.1. 0

5.2.2. 1

5.3. display

5.3.1. none

5.3.2. block,...

5.4. position

5.4.1. position: absolute; top: -9999px; left: -9999px;

5.5. clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

6. border

7. padding

8. margin

9. shadow

9.1. box-shadow

9.2. text-shadow

10. box-sizing

10.1. border-box

10.2. content-box

11. flex

11.1. display: flex;

11.1.1. flex-direction

11.1.1.1. row

11.1.1.2. column

11.1.1.3. row-reverse

11.1.1.4. column-reverse

11.1.2. justify-content

11.1.2.1. flex-start

11.1.2.2. flex-end

11.1.2.3. center

11.1.2.4. space-between

11.1.2.5. space-around

11.1.2.6. space-evenly

11.1.3. alight-items

11.1.3.1. the same justify-content

11.1.4. alight-content

11.1.4.1. the same

11.1.4.2. stretch (default)

11.2. (for child flex)

11.2.1. flex-grow

11.2.2. flex-basis

11.2.3. flex-shrink

12. float

12.1. left

12.2. right

12.3. clear: float*;

12.3.1. both

12.3.2. left

12.3.3. right

13. position

13.1. relative

13.2. absolute

13.3. fixed

13.4. static

13.5. sticky

14. Grid

14.1. display: grid

14.1.1. grid

14.1.2. inline grid

14.2. grid-template-column

14.2.1. track-size

14.2.1.1. fr unit

14.2.2. line-name

14.2.3. auto

14.2.4. repeat (3, 20px[col-start]) (if you want repeat value three time)

14.3. grid-template-row

14.3.1. the same column

14.4. grid-template-areas

14.4.1. ex: grid-areas: "header header header header" "sidebar . main main" " footer X 4" ;

14.5. grid-column-gap: <line-size>; grid-row-gap: <line-size>; // grid-gap: column row;

14.6. justify-items (doc)

14.6.1. start

14.6.2. end

14.6.3. center

14.6.4. stretch

14.7. alight-items (ngang)

14.7.1. the same justify-items

14.8. place-items : <alight-items> <justify-items>

14.9. justify-content

14.9.1. the same flex <justify-content>

14.10. alight-content

14.10.1. the same flex

14.11. place-content: <align-content> / <justify-content>

14.12. grid-auto-columns grid-auto-rows

14.12.1. value <track-size> <track-size>

14.12.2. use make item