*글자를 모두 대,소문자 바꾸기
#mainNav ul {
text-transform: uppercase(모두대문자), lowercase(모두소문자), capitalize(첫글자대문자);
}
<div id="mainNav">
<ul>Features</ul>
</div>
*소형대문자*
#mainNav li {
font-variant: small-caps;
}
<div id="mainNav">
<li>Features</li>
</div>
*텍스트 위아래 줄넣기
#line {
text-decoration:underline overline; (아래,위)
}
<div id="line">텍스트 위아래 줄넣기</div>
*첫줄 들여쓰기
text-indent: 25px;
text-indent: 5em;
* 박스 (버전에 맞는 구현방법)
* 고로 -_-; 박스는 안쓰는게 좋겠소이다;;; 나중에 시대가 지나믄 필요할지도 모름~!
[ html . sidebar { margin-left: -3px} ] (얜 뭘까 _-_;;)
*Float 해제_서로 다른 높이를 가진 부유 항목들을 어떤 식으로 한데 쏠리지 않도록 해 준다.
.copyright { clear: both; } or .copyright { clear: right; }
***** ***** ***** ***** ***** 이미지 관련 소스 시작~!! ***** ***** ***** ***** *****
* 배경
body {
background-color: white;
background-image: url(images/page_bg.jpg);
background-repeat: repeat-x;
background-position: left top;
text-align: center;
}
* 배경_sidebar
<style type="text/css'>
.sidebar {
width: 220px;
float: right;
margin: 10px;
background: #CBF622 url(images/bg_bottom.gif) center bottom no-repeat;
padding-bottom: 75px; (아래 배경의 크기에 따라 조절해야한다)
}
.sidebar h3 {
font-size: 1.4em;
margin: 0;
text-align: center;
text-transform: uppercase;
background: url(images/top_bg.gif) center top no-repeat;
color: #FFF;
padding: 5px;
}
.sidebar ul {
color: #666;
font-size: 1.2em;
margin: 0;
padding: 10px 5px 0 5px;
border-left: 1px solid #E73A10;
border-right: 1px solid #E73A10;
}
.sidebar li {
background: url(images/flower_bullet.gif) no-repeat 0px 2px;
list-style: none;
padding-left: 18px;
margin-bottom: 6px;
}
/*CSS Hacks for Internet Explorer */
/* fix the over extended h2 borders */
* html h2 {
zoom: 1;
}
* html .sidebar {
/* double margin bug fix */
display: inline;
}
</style>
<div class="sidebar">
<h3> Ideas for Better Indoor Agriculture </h3>
<ul>
<li>Don't leave the hose running.</li>
<li>In a small apartment</li>
</ul>
</div>
*링크_밑줄없애기
a:link { text-decoration:none; }
*링크_마우스On했을때 밑줄넣기
a:link, a:visited { text-decoration:none; background-color:#ff0000; }
a:hover { background-color:transparent; text-decoration:underline; }
*링크_밑줄넣기
a { text-decoration:none; border-bottom:dashed 2px #ff9900; }
a { text-decoration:none; background:url(img/line.gif) repeat-x left bottom; padding-bottom:5px; }