이 글은 가장 포괄적인 CSS 스타일을 주로 공유하며, 이러한 스타일을 익히면 완벽한 CSS 페이지가 완성될 것입니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.
한 가지 글꼴 속성: (font)
size{font-size: PD
Style{font-style: oblique;}(Italic)italic;(Italic) Normal;(Normal)
Line-height{line-height : 보통;}(보통) 단위: PX, PD, EM
두께{글꼴 -중량: 굵게;}(굵게)가벼움;( 얇은 몸체) 보통;(보통)
variant{font-variant: small-caps;} (소문자 대문자) 일반;(일반)
대문자 및 소문자{text- 변환: 대문자;}(첫 글자 대문자) 대문자;(대문자) 소문자;(소문자) 없음;(없음)
수정 {텍스트 장식: 밑줄 ;}(밑줄) 윗줄;(윗줄) 줄바꿈;( 취소선) 깜박임; (깜박임)
일반적으로 사용되는 글꼴: (글꼴-가족)
"Courier New", Courier, monospace, "Times NewRoman", Times, serif , Arial, Helvetica, sans-serif, Verdana
배경 속성: ( 배경)
Color{배경 색상: #FFFFFF;}
Picture{배경 이미지: url();}
반복{배경 반복: no-repeat ;}
Scroll{배경-부착: 고정;}(고정) 스크롤; (스크롤)
위치 {배경 위치: 왼쪽;} (가로) 위쪽 (세로); 약어 방법 {배경:#000 url(.. ) 왼쪽 상단 고정 반복;}/*약어·코드를 읽는 중 자주 등장하므로 주의 깊게 공부해야 합니다*/
블록 속성: (블록) /*이 속성은 처음 알고 있으므로 더 연구해야 합니다*/
Letter-spacing: Normal;} 값/*이 속성은 더 연습해 보면 유용할 것 같습니다*/
Alignment{text-align: justify;}(양쪽 끝 정렬)left;(왼쪽 정렬) right;(오른쪽 정렬) 중앙;(가운데)
Indent{text-indent: 값 px;}
세로 정렬{vertical-align: 기준선;}(기준선) sub;(subscript) super;(subscript)top text- 상단; 중간; 텍스트 하단;
단어 간격: pre; (예약됨) (줄 바꿈 없음) (블록) ) list-item; (목록 항목) run-in; (부분 추가) Compact;(compact) marker;(mark) table-raw-group; ; table-raw; table-column-group; table-cell;table-caption;(테이블 제목) /*display 속성에 대한 이해가 매우 모호함*/
Box 속성: (Box)
width: ; 높이:; 여백:; 패딩:; 순서: 오른쪽 위, 왼쪽 아래
테두리 스타일: 점선(점선); double; (이중선) 홈; (홈이 있는 선);( 함몰) 바깥쪽;
테두리 너비:;
약어 방법 테두리: 약어*/
목록 속성: (목록 스타일)
유형 목록 스타일 유형: 디스크;(점)원;(원) 사각형;(사각형)십진수;(숫자) lower-roman;(십진수)upper- roman; lower-alpha;
위치 목록 스타일 위치: 외부(외부) 내부
위치 속성: (위치)
위치: ; 상대적; 정적;
overflow: 표시; 자동;
두 번째 CSS 텍스트 속성 color : #999999; /*텍스트 색상*/
font-family : 송나라, sans-serif /*글꼴 글꼴*/
글꼴 크기: 9pt; *텍스트 기울임꼴*/
font-variant:small-caps; /*작은 글꼴*/
문자 간격: 1pt; /*단어 사이의 공백*/
line-height: 200%; /*줄 높이 설정*/ Font-weight:bold; /*텍스트 굵게*/
vertical-align :sub; /*Subscript*/
text-design:line-through; /
text-장식: overline; /*윗줄 추가*/text-장식:밑줄*/
text-장식:none; /*링크 밑줄 제거*/ 첫 번째 단어를 대문자로 표시합니다*/
text-transform: 대문자; /*영어 대문자*/
text-transform : 소문자 /*영어 소문자*/
text-align:right; align:left; /*텍스트 왼쪽 정렬*/
text-align:center; /*텍스트가 가운데 정렬됨*/
text-align:justify; /*텍스트가 분산되어 정렬됨*/
vertical-align 속성
vertical-align:top; /*수직으로 위쪽으로 정렬*/
vertical-align :bottom; /*수직으로 아래쪽으로 정렬*/
vertical-align:middle; /*가운데에 수직으로 정렬*/
vertical-align:text -top; /*텍스트를 수직으로 위쪽으로 정렬*/
vertical-align:text-bottom ; /*텍스트를 수직으로 아래쪽으로 정렬*/
3. CSS 테두리 공백
padding-top:10px; /*상단 테두리를 비워 둡니다*/
padding-right:10px; /*오른쪽 테두리를 비워 둡니다*/
padding-bottom:10px; /*하단 테두리를 비워 둡니다*/
padding -left: 10px; /*왼쪽 테두리를 비워두세요
IV.CSS 기호 속성:
list-style-type:none; /*번호 없음*/ /*아라비아 숫자*/
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; /*들여쓰기*/
배경 이미지: url(/image/bg.gif) /*배경 이미지*/
배경 첨부: 고정됨; /*워터마크 고정됨*/
배경 반복: 반복; *반복 정렬 - 웹페이지 기본값*/
Background-repeat : no-repeat; /*반복 정렬 없음*/
Background-repeat :peat-x; /*X축 반복 정렬*/
Background-repeat : peat-y ; /*y축에서 배열을 반복합니다*/
6. 배경 위치를 지정합니다.
background-position: 90% 90% /*x 및 y축에서 배경 이미지의 위치 */
배경 위치: top; /*위쪽 정렬*/배경 위치: buttom; /*아래 정렬*/
배경 위치: 왼쪽; /*왼쪽 정렬*/
배경 위치: 오른쪽; 오른쪽 정렬*/
배경 위치: 중앙; /*가운데 정렬*/
7. CSS 연결 속성:
a /*모든 하이퍼링크*/
a:link /*하이퍼링크 텍스트 형식*/a:visited / *방문한 링크 텍스트 형식 */
a:active /*눌린 링크의 형식*/
a:hover /*마우스를 연결하여 연결*/
마우스 커서 스타일:
링크 핑거 CURSOR: 손
크로스 바디 커서:십자선
아래쪽 화살표 커서: s-resize
십자형 화살표 커서:move
오른쪽을 가리키는 화살표 커서:move
물음표 추가 커서:help
왼쪽을 가리키는 화살표 커서:w-resize
위를 가리키는 화살표 커서:n-resize
위쪽과 오른쪽을 가리키는 화살표 커서:ne-resize
위쪽과 왼쪽을 가리키는 화살표 커서:nw-resize
Text I 입력 커서:텍스트
오른쪽 대각선 아래 화살표 커서:se-resize
왼쪽 대각선 아래 화살표 커서:sw-resize
Funnel 커서:기다림
Cursor 패턴 (IE6) p {cursor: url("cursor file name.cur"),text;}
8. CSS 테두리 목록:
border-top : 1px solid #6699cc /*상단 테두리*/
border -하단 : 1px 실선 # 6699cc; /*하단 테두리*/border-left : 1px 실선 #6699cc; /*왼쪽 테두리*/
border-right : 1px 실선 #6699cc /*오른쪽 테두리*/
위는 권장하는 작성 방법을 따르지만, 다음과 같은 기존 방법을 사용할 수도 있습니다.
border-top-color : #369 /*상단 테두리의 상단 색상을 설정*/
border-top-width: 1px /*상단을 설정 상단 테두리 너비*/
border-top -style: solid/*상단 프레임의 상단 스타일 설정*/
9. 기타 프레임 스타일
solid /*실선 프레임*/
이중 /*이중 라인 프레임*/
홈 /*3차원 내부 볼록 프레임*/
능선 /*3차원 엠보싱 프레임*/
삽입 /*오목 프레임*/
아웃셋 /*볼록 프레임 */
8. CSS 양식 적용:
텍스트 상자
체크 상자
선택 버튼
다행 텍스트 상자
드롭다운 메뉴 옵션 1 옵션 2
9.CSS 테두리 스타일:
여백 -top:10px; /*상단 테두리*/
margin-bottom:10px; /*하단 여백 값*/
left 여백 value*/
10. CSS 속성: 글꼴 스타일(Font Style)
1 글꼴 스타일 {font:font-stylefont-variant 글꼴-가중 글꼴 크기 글꼴 계열}
2 글꼴 유형 {font-family:"Font 1","Font 2","Font 3",...}
3 글꼴 크기 {font-size:numeric|inherit| 중간| 크게| x-큰| xx-작은} italic|normal|oblique}
5 글꼴 두께 {font-weight:100-900|bold|bolder|lighter|normal;}
6 글꼴 색상 {color:value;}
7 그림자 색상 {text-shadow:16-bit color 값}
8 글꼴 줄 높이 {line-height:numeric|inherit|normal;}
9 단어 간격 {letter-spacing:numeric|inherit|normal}
10 단어 간격 {word-spacing:numeric|inherit|normal}
11 글꼴 변환 {font-variant:inherit|normal|small-cps}
12 영어 변환 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 글꼴 변환 {font-size-adjust:inherit|none }
14개 글꼴
{font-stretch:condensed|expanded|extra-densed|extra-expanded|inherit|narrower|normal|semi-pressed|semi-expanded|ultra-pressed|ultra-expanded|wider}
2 텍스트 장식 {text-꾸밈:inherit|none|underline|overline|line-through|blink}
3 단락 첫 번째 공백 {text -indent:value|inherit}
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}
2 배경 이미지 {배경-이미지 :url(URL)|none}
3 배경 반복 {Background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 배경 고정 {Background-attachment:fixed|scroll }
5 배경 위치 지정 {배경-위치: 값|상단|하단|왼쪽|오른쪽|중앙}
6 배경 스타일 {배경: 배경색|배경 이미지|배경 반복|배경 첨부|배경 위치}
2 Padding {padding:padding-toppadding-right padding-bottom padding-left}
3 테두리 너비
{border-width:border -top-widthborder-right-width border-bottom-width border-left-width}
너비 값: 얇은|중간|두꺼운|숫자 값
4 테두리 색상{border-color:숫자 값 값 값} 값: 색상을 나타냅니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 각각의 값
5 테두리 스타일
{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 테두리 {border :border- widthborder-style color}
상단 테두리{border-top:border-top-width border-style color}
오른쪽 테두리{border-right:border-right-width border-stylecolor}
하단 테두리{border-bottom :border- 하단 너비 테두리 스타일 색상}
왼쪽 테두리 {테두리 왼쪽:테두리 왼쪽 너비 테두리 스타일 색상}
7 너비 {너비:길이|백분율|자동}
8 높이 {높이:값|자동}
9 부동 {float:left|right|none}
10 {clear:none|left|right|both} 지우기
2 공백 제어 {white-space:normal|pre|nowarp}
3 기호 목록
{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper -alpha| none}
4 그래픽 목록 {list-style-image:URL}
5 위치 목록 {list-style-position:inside|outside}
6 디렉터리 목록 {list-style: 디렉터리 스타일 유형|디렉터리 스타일 위치| 7 마우스 모양
{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
관련 추천 :
CSS 스타일 중첩 방법을 사용한 Dreamweaver 웹페이지 제작Angular4에서 CSS 스타일을 표시하기 위한 샘플 코드표 CSS 스타일을 설정할 때 주의해야 할 사항
위 내용은 CSS 스타일의 가장 포괄적인 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
