CSS 공통 태그

일반적인 CSS 태그

CSS 텍스트 속성 1개

색상 : #999999 /*텍스트 색상*/

글꼴 계열: 宋体,sans-serif; /*텍스트 글꼴*/

글꼴 크기 : 9pt /*텍스트 크기*/

글꼴 스타일:itelic; /*기울임꼴 텍스트*/

font-variant:small-caps; /*작은 글꼴*/

letter-spacing : 1pt; /*문자 사이의 간격*/

line-height : 200%; /*줄 높이 설정*/

font-weight:bold; /*굵은 텍스트*/

세로 정렬:하위 첨자*/

세로 정렬:super; /*위 첨자*/

텍스트 장식:라인 쓰루; /*취소선 추가*/

텍스트 장식: overline; /*윗줄 추가*/

텍스트 장식:밑줄 /*밑줄*/

텍스트 장식:없음 /*장식 라인 없음*/

text-transform : 대문자로 표시; /*첫 번째 단어를 대문자로 표시*/

text-transform : 대문자; /*영어 대문자*/

text-transform : 소문자; /*영어 소문자*/

text-align:right; /*텍스트를 오른쪽으로 정렬*/

text-align:left; /*텍스트 왼쪽 정렬*/

text-align:center; /*텍스트가 가운데 정렬됨*/

텍스트 정렬:정렬; /*텍스트 정렬*/

vertical-align:top; /*요소 행 내에서 가장 큰 요소의 상단을 수직으로 정렬/

vertical-align:bottom; /*요소 행 내에서 가장 큰 요소의 아래쪽을 수직으로 정렬*/

vertical-align:middle; /*세로 중앙 정렬*/

vertical-align:text-top; /*상위 요소의 상단을 수직으로 정렬*/

vertical-align:text-bottom; /*상위 요소의 하단을 수직으로 정렬*/

상단, 하단, 텍스트 상단 및 텍스트 하단의 차이점:

2. CSS 테두리 공백

padding-top:10px; /*상단 테두리를 비워 둡니다*/

padding-right:10px; /*오른쪽 테두리를 비워두세요*/

padding-bottom:10px; /*하단 테두리를 비워둡니다*/

padding-left:10px; /*왼쪽 테두리를 비워 둡니다

3. CSS 기호 속성

list-style-type:none; /*표시 없음*/

list-style-type:decimal; /*아라비아 숫자 표시*/

list-style-type:lower-roman; /*소문자 로마 숫자(예: i, ii, iii, iv, v 등)*/

list-style-type:upper-roman; /*대문자 로마 숫자(예: I, II, III, IV, V 등)*/

list-style-type:lower-alpha; /*영문 소문자 표시*/

list-style-type:upper-alpha; /*영문대문자 표시*/

list-style-type:disc; /*단색 원 표시*/

list-style-type:circle; /*빈 원 표시*/

list-style-type:square; /*단색 사각형 표시*/

list-style-image:url(/dot.gif) /*맞춤 이미지 태그*/

목록 스타일 위치: /*볼록한 행*/

목록 스타일 위치:내부; /*들여쓰기*/

4. CSS 배경 스타일

/*배경 색상*/

배경:투명; /*원근감 있는 배경*/

배경 이미지 : url(/image/bg.gif) /*배경 이미지*/

배경 첨부 : 고정; /*워터마크 고정 배경*/

background-repeat : 반복 /*반복 배열 - 웹페이지 기본값*/

background-repeat : no-repeat /*반복 배열 없음*/

배경 반복 : 반복-x; /*x축 반복*/

배경 반복 : 반복-y /*y축에서 반복*/

배경 위치 지정

background-position : x% y%; /*배경 이미지의 x축과 y축 위치*/

배경 위치 : top; /*위로 정렬*/

배경 위치 : buttom; /*아래쪽 정렬*/

배경 위치 : 왼쪽; /*왼쪽 정렬*/

배경 위치 : 오른쪽 /*오른쪽 정렬*/

배경 위치 : 중앙; /*가운데 정렬*/

5. CSS 연결 속성

a /*모든 하이퍼링크*/

a:link /*하이퍼링크 텍스트 형식*/

a:visited /*방문한 링크 텍스트 형식*/

a:active /*눌린 링크의 형식*/

a:hover /*링크하려면 마우스를 올리세요*/

마우스 커서 스타일:

금지된 커서:허용되지 않음;

링크 손가락 커서: 포인터

십자형 커서:십자형

도움말 커서(물음표가 표시됨) 커서:help

십자 화살표 커서:이동

텍스트 T자형 커서:텍스트

백그라운드 프로그램 실행 유형 커서:진행

퍼널 커서:기다림

화살표는 오른쪽 또는 오른쪽 커서를 가리킵니다:w-resize 또는 커서:e-resize

위 또는 아래를 가리키는 화살표 커서:n-resize 또는 커서:s-resize

/*이 4가지 값은 각각 남동, 북서, 북서 영문자의 첫 글자에 해당합니다*/

화살표는 오른쪽 상단 또는 하단 커서를 가리킵니다:ne-resize 또는 커서:se-resize

화살표는 왼쪽 위 또는 왼쪽 아래 커서를 가리킵니다:nw-resize 또는 커서:sw-resize

/*이 네 가지 값 중 첫 글자는 북쪽 또는 남쪽의 첫 글자입니다*/

사용자 정의 커서 p {cursor:url("cursor file name.ico"),text;}

/*사용자 정의 커서는 비호환 문제가 발생하기 쉬우므로 기본 커서 유형을 추가해야 합니다*/

6. CSS 프레임 목록

테두리 상단: 1px 단색 #6699cc /*상단 테두리*/

border-bottom : 1px 솔리드 #6699cc /*하단 테두리*/

테두리-왼쪽: 1px 실선 #6699cc /*왼쪽 테두리*/

테두리 오른쪽: 1px 실선 #6699cc /*오른쪽 테두리*/

위의 작성 방법은 권장사항이지만, 다음과 같이 기존의 방법을 사용할 수도 있습니다.

border-top-color : #369 /*테두리선의 상단 색상을 설정*/

border-top-width:1px /*상단 테두리의 상단 너비 설정*/

border-top-style: solid/*테두리 상단 스타일 설정*/

기타 테두리 스타일

단단한 /*단단한 프레임*/

점선 /*점선 상자*/

이중 /*이중 프레임*/

홈 /*3차원 내부 볼록 프레임*/

능선 /*입체 부조 프레임*/

삽입 /*오목 프레임*/

시작 /*볼록 프레임*/

7. CSS 테두리 스타일

여백-상단:10px; /*상단 테두리*/

margin-right:10px; /*오른쪽 여백 값*/

margin-bottom:10px; /*하위 테두리 값*/

margin-left:10px; /*왼쪽 여백 값*/

8. 일반적으로 사용되는 CSS 조합

myCSS1{디스플레이:블록; 여백: 0px; Wrap;">#ddd;패딩:50픽셀;글꼴 크기: 30픽셀;}