Basic CSS syntax General Web2008/11/30 23:45
작성일: 2006년 12월 20일
네이버 블로그에 있던 개인 자료를 옮겨온 것입니다.
http://www.html.net에 있는 CSS강좌 내용을 설명 다 빼고 코드만 정리한 것 입니다.
Basic CSS syntax
|
<body bgcolor=”#FF0000”> body { background-color: #FF0000 } |
(출처 : http://www.html.net)
Mothod1 : In-line(the attribute style)
|
<html> <head> <title>Example</title> </head> <body style=”background-color:#FF0000”> <p>This is a red page</p> </body> </html> |
Method2:Internal(the tag style)
|
<html> <head> <title>Example<title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>This is a red page</p> </body> </html> |
Method 3:External(link to a style sheet)
|
<link rel=”stylesheet” type=”text/css” href=”style/style.css” /> |
Colors and backgrounds
Color
|
h1{ color: #ff0000 } |
background-color
|
body { background-color: ##ffcc66 } h1{ color: #990000; background-color:#fc9804; } |
Background images
|
body{ background-color: #FFCC66; background-image: url(“butterfly.gif”); } h1 { color: #990000; background-color: #FC9804; } |
Repeat background image[background-repeat]
|
Background-repeat: repeat-x Background-repeat: repeat-y Background-repeat Background-repeat: no-repeat |
|
body{ background-color: #FFCC66; background-image: url(“butterfly.gif”); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; } |
Lock background image(background-attachment)
background-attachment: scroll;
background-attachment: fixed;
|
body { background-color: #FFCC66; background-image: url(“butterfly.gif”); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; } |
Place background image(background-position)
background-position: 2cm 2cm
background-position: 50% 25%
background-position: top right
|
body { background-color: #FFCC66; background-image: url(“butterfly.gif”); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; } |
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
Fonts
Font-family
|
h1{ font-family: arial, verdana, sans-serif } h1 { font-family: “Times New Roman”, serif } |
Font style
|
h1{ font-family: arial, verdana, sans-serif } h1 { font-family: “Times New Roman”, serif; font-style: italic; } |
Font variant
|
h1{ font-variant: small-caps } h1 { font-variant: normal; } |
Font weight
|
p { font-family: arial, verdana, sans-serif; } td{ font-family: arial, verdana, sans-serif; font-weight: bold; } |
Font size
|
h1 { font-size: 30px } h2 { font-size:12pte } h3 { font-size: 120% } h4 { font-size: 1em } |
|
p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } p{ font: italic bold 30px arial sans-serif; } |
Text
Text-indention[text-indent]
|
p{ text-indent: 30px; } |
Text-alignment[text-align]
|
th{ text-align: right; } td{ text-align: center } p{ text-align: justify; } |
Text decoration[text-decoration]
|
h1 { text-decoration: underline; text-decoration: overline; text-decoration: line-through; } |
Letter-space[letter-spacing]
|
h1{ letter-spacing: 6px; } p{ letter-spacing: 3px; } |
text-transformation
|
h1{ text-transform: uppercase; } li{ text-decoration: capitalize; } |
Links
pseudo-class
a{
color: blue;
}
|
a:link { color: blue; } a:visited{ color: red; } |
pseudo-class: link
|
a:link{ color: #6699cc; } |
pseudo-class: visited
|
a:visited{ color: #660099; } |
pseudo-class: active
|
a:active{ background-color: #FFFF00; } |
pesudo-class: hover
|
a: hover { color: orange; font-style: italic; } |
Identification and grouping of elements (class and id)
|
<p>Groups for white wine:</p> <ul> <li><a href=”ri.htm” class=”whitewine”>Riesling</a></li> <li><a href=”ch.htm” class=”whitewine”>Riesling</a></li> <li><a href=”pb.htm” class=”whitewine”>Riesling</a></li> </ui> <p>Groups for red wine:</p> <ul> <li><a href=”ri.htm” class=”whitewine”>Riesling</a></li> <li><a href=”ch.htm” class=”whitewine”>Riesling</a></li> <li><a href=”pb.htm” class=”whitewine”>Riesling</a></li> </ui> |
|
a { color: blue; } a.whitewine{ color: #FFBB00; } a.redwine{ color: #800000; } |
Group of elements(span and div)
|
span.benefit{ color: red; } |
|
<p>Early to bed and early to rise makes a man <span class=”benefit”>healthy</span> <span class=”benefit”>wealthy</span> <span class=”benefit”>wise</span> </p> |
Grouping with <div>
|
<div id=”democrats”></div> <div id=”republicans”></div> |
|
#democrats{ background: blue; } #republicans{ background: red; } |
The box model
|
<h1>Article: 1</h1> <p>All human beings are bone free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a sprit of brother in a spirit of brotherhood </p> |
Margin and Padding
|
body{ margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-right: 70px; } |
|
body{ margin: 100px 40px 10px 70px } |
|
body{ margin: 100px 40px 10px 70px } p{ margin: 5px 50px 5px 50px } |
Set padding in an element
|
h1{ background: yellow; padding: 20px 20px 20px 80px } h2{ background: orange; padding-left: 120px; } |
Borders
The Width of borders[border-width] à border-width
The color of borders[border-color] à “rgb(123123)” or “#123456” or “yellow”
Types of borders[border-style]
Height and width
Setting the width[width]
div.box{
width: 200px;
border: 1px solid black;
background: orange;
}
Setting the height[height]
div.box{
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
Floating elements(floats)
|
#picture{ float: left; width: 100px; } |
|
<div id=”picture”> <img src=”bill.jpg” alt=”Bill Gates”> </div> <p>causes naturals et antecedentes, idciro etiam nostrarum voluntatum…</p> |
The property clear
|
#picture{ float: left; width: 100px; } .floatstop{ clear: both; } |
Positioning of elements
|
h1{ position: absolute; top: 100px; left: 200px; } |
Relative positioning
|
#dog1{ position: relative; left: 350px; bottom: 150px; } #dog2{ position: relative; left: 350px; bottom: 150px; } #dog3{ position: relative; left: 350px; bottom: 150px; } |
Layer on layer with z-index(Layers)
|
#ten_of_diamonds { position: absolute; left: 100px; bottom: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px; bottom: 115px; z-index: 2; } #queen_of_diamonds { position: absolute; left: 130px; bottom: 130px; z-index: 3; } #king_of_diamonds { position: absolute; left: 145px; bottom: 145px; z-index: 4; } #ace_of_diamonds { position: absolute; left: 160px; bottom: 160px; z-index: 5; |
'General Web' 카테고리의 다른 글
| XML 이란? (1) | 2008/12/22 |
|---|---|
| 사용자 인터페이스 디자인에 활용되는 10가지 유용한 기술 (0) | 2008/12/17 |
| Basic CSS syntax (0) | 2008/11/30 |
| CSS1 - 1. 기본개념 (0) | 2008/11/30 |
| W3C 표준 DOM (0) | 2008/11/30 |
| [HTML] Box Model (0) | 2008/08/06 |
