> 웹 프론트엔드 > HTML 튜토리얼 > CSS 속성 요약

CSS 속성 요약

巴扎黑
풀어 주다: 2017-07-23 16:38:57
원래의
1222명이 탐색했습니다.

일반적인 CSS 속성:

글꼴 속성: (글꼴)
size 글꼴 크기: x-large; (특대) xx-작음 (매우 작음) 일반적으로 중국어에서는 사용되지 않으며 숫자 값만 사용합니다. 단위: PX, PD
스타일 글꼴 스타일: oblique;(기울임꼴) italic;(기울임꼴) 보통;(보통)
line-height: 보통;(보통) 단위: PX, PD, EM
두께 글꼴 -중량: 굵게; 일반; 글꼴 변형: 대문자 일반; 일반 텍스트 변환: 대문자;(대문자) 소문자;(소문자) 없음;(없음)
텍스트 장식 수정: underline;(underline) overline;(upperline) line-through;(line 삭제) 깜박임(플래시)
일반적으로 사용되는 글꼴: (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
Background 속성
: (배경)
colorpicture 배경 이미지: url();
repeat 배경 반복 : 반복 없음;
스크롤링 배경 첨부: 고정;(고정) 스크롤;(스크롤)
위치 배경 위치: 왼쪽(가로) 위(세로);
약어 방법 배경: #000 url (..) 반복 고정 왼쪽 상단;
block attribute
: (Block)
letter-spacing: Normal; valuetext-align: justify;(양 끝 정렬) left;(왼쪽 정렬) ) 오른쪽;(오른쪽 정렬) 가운데;(가운데)
들여쓰기 텍스트 들여쓰기: 값 px;
수직 정렬 수직 정렬: 기준선(아래 첨자) super; 텍스트 상단; 중간; 하단; 텍스트 하단 ;
단어 간격: 일반; 값
white-space: pre;(예약됨) nowrap;(줄 바꿈 없음)
display block) inline;(임베디드) list -item; (추가 부분) Compact; (마커) table-raw-group; ; 테이블-바닥글-그룹; 테이블-열; 테이블-캡션;(테이블 제목)
상자 속성
너비:; 높이:; 부동:; 여백:; 순서: 위쪽, 오른쪽, 아래쪽, 왼쪽
테두리 속성: (점선) ; (점선) 실선; (홈) 능선; (움푹 들어간 곳) 시작;
border-color:#
약어 방식 테두리: 너비 스타일 색상 ;
List attribute: (목록 스타일)
type 목록 스타일 유형: 디스크;(점) 원;(원) 정사각형;(사각형) 소수 ;(숫자) lower-roman;( lower-alpha; upper-alpha;
position list-style-position: external; (outer) inside;
image list-style-image: url(..);
위치 지정: (위치)
위치: 절대; 상대;
가시성: 상속; 숨김;
오버플로: 표시; (12px,auto,12px,auto) (자르기)
css 속성 코드 목록

한 가지 CSS 텍스트 속성:
color : #999999 /*텍스트 색상*/
font- family : 宋体,sans-serif; /*텍스트 글꼴*/
font-size : 9pt; /*텍스트 크기*/
font-style:itelic; small-caps; /*작은 글꼴*/
letter-spacing : 1pt; /*문자 사이의 공백*/ line-height : 200%; /*줄 높이 설정*/
font-weight:bold; /*텍스트 굵게*/
vertical-align:subscript*/
수직 정렬 :super; /*위 첨자*/
text-꾸밈:line-through; /*취소선 추가*/
text-장식: overline; /*윗줄 추가*/
text-장식:밑줄; /*밑줄*/
text-design:none; /*링크 밑줄 제거*/
text-transform : 대문자로 표시; /*첫 번째 단어를 대문자로 표시*/
text-transform / *텍스트 왼쪽 정렬* /
text-align:center; /*텍스트 가운데 정렬*/
text-align:justify; /*텍스트 정렬*/
vertical-align attribute
vertical- align:top; 수직 위쪽 정렬*/
vertical-align:bottom; /*수직 아래쪽 정렬*/
vertical-align:middle; /*가운데에 수직 정렬*/
vertical-align ; 위쪽 테두리 비워두기*/
padding-right:10px; /*오른쪽 테두리 비워두기*/
padding-bottom:10px; /*아래쪽 테두리 비워두기*/
padding-left:10px ; /*왼쪽 테두리는 비워두세요
3. CSS 기호 속성:
list-style-type:none; /*Unnumbered*/
list-style-type:decimal;
list-style-type:lower-roman; /*소문자 로마 숫자*/
list-style-type:upper-roman; /*대문자 로마 숫자*/
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); /*그림 기호*/
list-style-position: /*볼록한 행*/
list-style-position:inside; /*들여쓰기*/
4. CSS 배경 스타일:
/*배경 색상*/
배경:투명; /*원근감 있는 배경*/
배경-이미지 : url(/image/bg.gif) /*배경 이미지*/
배경 첨부: 고정; /*워터마크 고정 배경*/
background-repeat : 반복; /*반복 배열 - 웹 페이지 기본값*/
Background-repeat : no-repeat; -repeat :peat-x; /*x축으로 배열 반복*/
background-repeat :peat-y /*y축으로 배열 반복*/
배경 위치 지정
background-position : 90% 90%; /*배경 이미지의 x, y축 위치*/
background-position : top; /*위로 정렬*/
background-position : buttom ; /*아래쪽 정렬 */
배경 위치 : 왼쪽; /*왼쪽 정렬*/
배경 위치 : 오른쪽 정렬*/
배경 위치 : 중앙 정렬; */ 5. CSS 연결 속성:
a /*모든 하이퍼링크*/
a:link /*하이퍼링크 텍스트 형식*/
a:visited /*본 링크 텍스트 형식*/
a:active /*누른 링크의 형식*/
a:hover /*링크하려면 마우스를 사용하세요*/
마우스 커서 스타일:
링크 핑거 CURSOR: 손
십자 커서: 십자선
아래쪽 커서를 가리키는 화살표 :s-resize
십자형 화살표 커서:이동
오른쪽을 가리키는 화살표 커서:이동
물음표 추가 커서:도움말
왼쪽을 가리키는 화살표 커서:w-resize
위쪽 커서를 가리키는 화살표: n-resize
위쪽을 가리키는 화살표와 오른쪽 커서:ne-resize
위쪽과 왼쪽 커서를 가리키는 화살표:nw-resize
Text I형 커서:text
아래로 기울어진 화살표 오른쪽 커서:se -resize
화살표 대각선 아래 왼쪽 커서:sw-resize
깔때기 커서:wait
커서 패턴(IE6) p {cursor:url("cursor file name.cur"),text; }
6개, CSS 테두리 목록:
border-top : 1px solid #6699cc; /*상단 테두리*/
border-bottom : 1px solid #6699cc /*하단 테두리*/
border -left : 1px solid #6699cc; /*왼쪽 테두리선*/
border-right : 1px solid #6699cc; /*오른쪽 테두리선*/
위는 권장 작성 방법이지만 다음을 사용할 수도 있습니다.
border-top-color : #369 /*상단 테두리의 상단 색상을 설정*/
border-top-width: 1px /*상단 테두리의 상단 너비를 설정* /
border-top-style: solid/*상단 프레임의 상단 스타일 설정*/
다른 프레임 스타일
solid /*단색 프레임*/
dotted /*점선 프레임*/
이중 /*이중 프레임*/
홈 /*3차원 내부 볼록 프레임*/
능선 /*3차원 양각 프레임*/
삽입 /*오목 프레임*/
outset /*볼록 프레임*/
7. CSS 양식 사용법:
텍스트 상자
버튼
체크 상자
선택 버튼
여러 줄 텍스트 상자
드롭다운 메뉴 옵션 1 옵션 2
8. CSS 테두리 스타일:
margin-top:10px; /*상단 여백*/
margin-right:10px /*오른쪽 여백 값*/
margin-bottom: 10px; /*하위 여백 값*/
margin- left:10px; /*왼쪽 테두리 값*/

CSS 속성: 글꼴 스타일(글꼴 스타일)
일련번호 중국어 설명 표시 구문
1 글꼴 스타일 {font:font-style 글꼴-변형 글꼴 -weight 글꼴 크기 글꼴-가족}
2 글꼴 유형 {font-family:"Font 1","Font 2","Font 3", ...}
3 글꼴 크기: 값|상속| 더 큼| x-대형| 작음| 900|bold|bolder|lighter|normal;}
6 글꼴 색상 {color:value;}
7 그림자 색상 {text-shadow: 16비트 색상 값}
8 글꼴 줄 높이 {line-height: 숫자 값|inherit|normal;}
9 문자 간격 {letter-spacing: 숫자 값|상속 |normal}
10 단어 간격 {word-spacing:numeric|inherit|normal}
11 글꼴 변환 {font-variant:inherit|normal|small-cps}
12 영어 변환 {text-transform: 상속|없음 |자본화|대문자|소문자}
13 글꼴 변형 {font-size-adjust:inherit|none}
14 글꼴 {font-stretch:densed|expanded|extra-pressed|extra-expanded|inherit |좁음|보통|반축소|반확장|초축소|초확장|넓음}
텍스트 스타일(텍스트 스타일)
일련번호 중국어 설명 표시 구문
1 줄 간격 height: 숫자 값 | 상속|일반;}
2 텍스트 장식 {text-장식:inherit|none|underline|overline|line-through|blink}
3 단락 시작 부분의 공백 {text-indent: 숫자 값|상속}
4 가로 정렬 {text-align:left|right|center|justify}
5 세로 정렬 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline |middle|sub|super}
6 쓰기 모드 {writing-mode:lr-tb|tb-rl}
배경 스타일
일련번호 중국어 설명 표시 구문
1 배경색 {
2 배경 이미지 {Background-image: url( URL)|none}
3 배경 반복 {Background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 배경 고정 {배경 -attachment:fixed|scroll}
5 배경 위치 지정 {배경-위치: 값|상단|하단|왼쪽|오른쪽|중앙}
6 배경 스타일 {배경: 배경색|배경 이미지|배경 반복|배경 첨부 |배경 위치}
프레임 스타일(박스 스타일)
일련번호 중국어 설명 표시 구문
1 margin {margin:margin-top margin-right margin-bottom margin-left}
2 padding {padding :padding-top padding-right padding -bottom padding-left}
3 테두리 너비 {border-width:border-top-width border-right-width border-bottom-width border-left-width} 
Width 값: 얇음|중간|두꺼움| 값
4 테두리 색상 {border-color: 값 값 값 값} 값: 위쪽, 오른쪽, 아래쪽, 왼쪽 색상 값을 각각 나타냅니다.
5 테두리 스타일 {border- style:none|hidden|inherit|dashed|solid |double|inset|outset|ridge|groove}
6 border {border:border-width border-style color}
상단 테두리 {border-top:border- 상단 너비 테두리 스타일 색상}
오른쪽 테두리 {border-right:border-right-width 테두리 스타일 색상}
하단 테두리 {border-bottom:border-bottom-width 테두리 스타일 색상}
왼쪽 테두리 {border-left:border-left -width 테두리 스타일 색상}
7 너비 {너비: 길이 | 백분율 | 자동}
8 높이 {높이: 값 | 자동}
9 부동 소수점 float:left|right|none}
10 Clear {clear:none|left|right|both}
카테고리 목록
일련번호 중국어 설명 표시 구문
1 제어 표시 {display:none|block |inline|list-item}
2 제어 공백 {white-space:normal|pre|nowarp}
3 기호 목록 {list-style-type:disc|circle|square|decimal|lower-roman|upper -roman|하위 알파|상위 알파|없음 }
4 그래픽 목록 {list-style-image:URL}
5 위치 목록 {list-style-position:inside|outside}
6 디렉터리 목록 {list-style: 디렉터리 스타일 유형|디렉터리 스타일 위치|url }
7 마우스 모양 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

위 내용은 CSS 속성 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿