본문 바로가기

공부/웹 프로그래밍

css 속성

반응형


css-cheat-sheet-v1.pdf


css-cheat-sheet-v2.pdf


[font-style]
1. font-style: normal;
2. font-style: italic;
3. font-style: oblique;


[font-weight]
1. "font-weight: normal;"
2. "font-weight: bold;"
3. "font-weight: bolder;"
4. "font-weight: lighter;"
5. "font-weight: 100"
6. "font-weight: 200"


[font-size]
1. "font-size: 12pt;"
2 "font-size: 16px;"
3 "font-size: 0.86cm;"
4 "font-size: 8.6mm;"
5 "font-size: 0.34in;"
6 "font-size: 200%;"


[font-variant]
1. "font-variant: normal;" : Cascading Style Sheets
2. "font-variant: small-caps;" : Cascading Style Sheets


[text-align]
1. "text-align: left;"
2. "text-align: justify;"


[text-indent]
1. "text-indent: 5px;"
2. "text-indent: 3em;"
3 "text-indent: 5cm;"


[text-decoration]
1. "text-decoration: none;"
2. "text-decoration: underline;"
3. "text-decoration: overline;"
4. "text-decoration: line-through;"
5. "text-decoration: line-through overline underline;"
6. "text-decoration: blink;"


[text-transform]
1. "text-transform: none;"
2. "text-transform: uppercase;"
3. "text-transform: lowercase;"
4. "text-transform: capitalize;"


[letter-spacing]
1 "letter-spacing: 1em;"


[word-spacing]
1 "word-spacing: 1em;"


[color]
1. "color: navy;"
2. "color: #369369;"
3. "color: rgb(80.80.80%"
4. "color: rgb(111,111,999"


[background-color]
1. "background-color: gray;"
2. "background-color: #EEEEEE;"
3. "background-color: rgb(80.80.80%"


[background-image]
1. "background-image: url(list1.gif)"


[background-repeat]
1 "background-repeat: repeat;"
2. "background-repeat: repeat-x;"
3. "background-repeat: repeat-y;"
4. "background-repeat: no-repeat;"


[background-position]
1. "background-position: 10% 10%;"
2. "background-position: 1cm 1cm;"
3. "background-position: top;"
4. "background-position: center;"
5. "background-position: right bottom;"


[background-attachment]
1. "background-attachment: scroll;"
2. "background-attachment: fixed;"


[background]
1. "background: url(list1.gif) yellow no-repeat top left"


[padding]
1. "padding: 0 0 0 0; background-color: #EEEEEE;"
2. "padding: 50px; background-color: rgb(80.80.80%"


[margin]
1. "margin: 0; background-color: #EEEEEE;"
2. "margin: 50px 50px 50px 50px; background-color: rgb(80.80.80%"
3. "margin: 0 0 0 -30px; background-color: rgb(80.80.80%"


[border-style]
1. border-style: none;"
2. "border-style: solid;"
3. "border-style: dotted;"
4. "border-style: dashed;"
5. "border-style: double;"
6. "border-style: groove;"
7. "border-style: ridge;"
8. "border-style: inset;"
9. "border-style: outset;"
10. "border-style: solid dashed dotted outset;"


[border-width]
1. "border-width: 1px 1px 1px 1px;"
2. "border-width: 0 0 0 0; border-style: solid;"
3. "border-width: 1px 1px 1px 1px; border-style: solid;"
4. "border-width: 3px; border-style: solid;"
5. "border-width: 3mm; border-style: solid;"
6. "border-width: 1px 1cm 1mm 1in; border-style: solid;"
7. "border-width: thin; border-style: solid;"
8. "border-width: medium; border-style: solid;"
9. "border-width: thick; border-style: solid;"


[border]
1. "border: 1px;"
2. "border: #999999;"
3. "border: solid;"
4. "border: solid #999999;"
5. "border: 1px solid #999999"


[float]
1. "float: left;"


[visibility]
1. "visibility: visible;"
2. "visibility: hidden;"
3. "visibility: collapse;"


[list-style-type]
1. "list-style-type: default;"
2. "list-style-type: disc;"
3. "list-style-type: circle;"
4. "list-style-type: square;"
5. "list-style-type: decimal;"
6. "list-style-type: decimal-leading-zero;"
7. "list-style-type: lower-roman;"
8. "list-style-type: upper-roman;"
9. "list-style-type: lower-greek;"
10."list-style-type: lower-alpha;"
11."list-style-type: upper-latin;"
12."list-style-type: none;"


[list-style-image]
1. "list-style-image: url(list1.gif)"
2. "list-style-image: url(list2.gif)"


[list-style-position]
1. "list-style-position: inside"
2. "list-style-position: outside"


[list-style]
1. "list-style: url(list1.gif) inside;"
2. "list-style: square outside;"
3. "list-style: url(list1.gif"
4. "list-style: square;"
5. "list-style: inside;"


[cursor]
1. cursor: auto;
2. cursor: crosshair;
3. cursor: default;
4. cursor: pointer;
5. cursor: move;
6. cursor: e-resize;
7. cursor: ne-resize;
8. cursor: nw-resize;
9. cursor: n-resize;
10. cursor: se-resize;
11. cursor: sw-resize;
12. cursor: s-resize;
13. cursor: w-resize;
14. cursor: text;
15. cursor: wait;
16. cursor: help;
17. cursor: url(list1.gif


반응형