[메모] 블로그에서 쓰는 사용자 정의 스타일 사용법(style.css)

내가 블로그에서 사용하려고 블로그용 style.css에 추가 정의한 몇가지 스타일
처음에는 개인 용도로 쓰려고 Syntax에 해당하는 클래스명만 기재했지만 검색에 의한 방문객이 많아지면서 좀더 처음보시는 분들을 위하여 스타일시트(CSS)의 정의예를 추가했습니다.

소스코드블럭

CSS정의예

*.src {border: 1px solid gray; padding: 1em; background-color: /*원하는 색*/#c0e0f0;}

DOM예

<div class="src"> 소스코드 블럭</div>

번호를 쓰는 소스코드블럭

CSS정의

*.writeln {border:1px solid silver;border-left:0;border-right:0;background-color:ButtonFace;color:black;font-family: Courier New, Courier, mono, serif;margin:6px 10px;}
*.writeln ol{list-style: decimal;margin: 0px 0px 1px 45px !important;padding: 0px;}
  *.writeln ol li{background-color:#ffc;border-left: 1px solid gray;color:#333;line-height: 1.2em;list-style: decimal-leading-zero; list-style-position: outside !important;margin: 0 !important;padding: 0 3px 0 10px !important;}

DOM예

1. <div class="writeln">
2. <ol>
3. <li>소스코드 블럭예1</li>
4. <li>소스코드 블럭예2</li>
5. </ol>
6. </div>

표제어

CSS정의

*.subject {background: url(http://cfs.tistory.com/custom/blog/56/566280/skin/images/menubar_bg.gif) repeat-x left top;padding: 5px 0 5px 12px; height: 27px;color:gold;border:1px solid black;}

 DOM예

<div class="subject"> 표제어</div>

목차용 표제어

DOM예

<h2 class="toc"> 목차를 만들 표제어</h2>

글상자

DOM예

<div class="refBox"> 여기에 내용</div>

관련된 내 블로그:
[우리집 도서관] - Eric A. Meyer, CSS 완전 가이드
[연구와 개발] - 웹프로그램 연구(II) Input.Text 와 Select 요소
[연구와 개발] - 웹프로그램 연구(VII) Input.text요소의 힌트용 스크립트
[일상을 논함] - 도큐멘테이션의 양과 질에 관하여
[일상을 논함] - 블로그 인쇄용 스타일시트(CSS)에 관하여