홈페이지 제작시 사용되는 스타일시트(CSS) 정리

[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. I"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);