일반적인 CSS 속성

일반적으로 사용되는 CSS 속성

☛ CSS 속성에 대해 더 자세한 내용과 편의를 위해 매뉴얼을 읽어 보시기 바랍니다. 여기서는 몇 가지 공통 속성을 분류하고 몇 가지 공통 속성 값을 간단히 소개합니다. - 나 같은 사람들은 그것을 소개로 사용합니다.

1. 글꼴 스타일

글꼴의 약어로, 다음과 같이 작성합니다:font:font-style||font-variant ||font-weight||font-size| | / line-height||font-family, 반드시 순서대로 작성하세요

♣글꼴 이탤릭체(font-style): 일반 || 일반적으로 사용되는 이탤릭체 이탤릭체 || 이탤릭체 변수가 없는 특수 글꼴

♣작은 대문자 t(font-varian): 일반 || 작은 대문자 글꼴 small-caps

♣ 글꼴 두께(font-weight): 일반 || 본문 굵게 || 바디 라이터 || 숫자로 직접 표현(값 100-900)

♣글꼴 크기(font-size): 사용할 수 있는 몇 가지 루트 단위는 다음과 같습니다(px, em, rem)

♣글꼴의 줄 높이: 길이 px를 사용할 수 있습니다. || 백분율(글꼴의 높이 크기 기준) || 줄 높이를 숫자 값으로 지정합니다(제품 계수)

♣글꼴군(font-family): 특정 글꼴 또는 글꼴 순서를 사용하도록 텍스트를 지정합니다. 값은 작은따옴표로 묶입니다.

demo: body{font-family: helvetica,verdana,sans-serif;}

/*참고*/: 우선순위에 따라 정렬됩니다. 쉼표로 구분하세요. 위의 글꼴 정의에서 볼 수 있듯이 컴퓨터에 Helvetica 글꼴이 없지만 Verdana가 있다고 가정하면 텍스트가 Verdana로 표시됩니다.

❤@font-face 내장 글꼴(과외 확장)

@font-face는 서버측에서 글꼴 파일을 로드하여 브라우저에서 글꼴을 표시할 수 있도록 합니다. 사용자 컴퓨터에 없는 글꼴 파일 설치된 글꼴입니다.

구문:

@font-face {

font-family: 사용자 정의 글꼴 이름;

src: url(서버의 글꼴 파일) 상대 또는 절대 경로) 형식(글꼴 유형);

}

예:

@font-face {/*이 작성 방법은 모든 브라우저와 호환됩니다*/

font-family : bgg;

src: url('fonts/fontawesome-webfont.eot'), /* IE9+ */

url('fonts/fontawesome- webfont .eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('fonts/fontawesome-webfont.woff') format('woff'), / * chrome, firefox */

url('fonts/fontawesome-webfont.ttf') format('truetype'), /* chrome, firefox, Opera, Safari, Android, iOS 4.2+*/

url('fonts/fontawesome-webfont.svg') format('svg') /* iOS 4.1+ */

}

p{ 글꼴 계열: bgg }

★자주 사용되지 않는 기타 글꼴 스타일:

♣caption: 제목이 있는 시스템 컨트롤(예: 버튼, 메뉴 등)에 텍스트 글꼴을 사용합니다(CSS2 )

♣icon : 아이콘 라벨 폰트 사용(CSS2)

♣menu : 메뉴 폰트 사용(CSS2)

♣message-box : 사용 메시지 대화상자 글꼴 텍스트 글꼴(CSS2)

♣small-caption: 작은 컨트롤 글꼴 사용(CSS2)

♣status-bar: 창 상태 글꼴 사용 bar (CSS2)

2. 텍스트 스타일

Check 텍스트 색상 색상

● 색상명 16가지 기본 색상은 아쿠아, 블랙, 블루, 푸크시아, 그레이, 그린, 라임, 마룬, 네이비, 올리브, 퍼플, 레드, 실버, 청록색화이트, 옐로우.

●16진수(16진수) 색상 제어(6자리), 형식은 #336699입니다. 특정 16진수 값에 대한 단축 계산 방법을 지원합니다. 예를 들어 #336699는 #369라고 할 수 있습니다.

●RGB 값 RGB 값의 범위는 0~255이며 R은 빨간색, G는 녹색, B는 파란색을 나타냅니다. 데모: { color: rgb(51,204,0) }

CheckText-indent, 값은 em의 값이며, 1em은 한 단어의 너비와 같습니다.

Text 가로 alignment text-align: 왼쪽(왼쪽 정렬) || 가운데(가운데 정렬) || 오른쪽(오른쪽 정렬) || 양쪽 끝 맞춤 정렬된 텍스트의 경우) || super(수직으로 정렬된 텍스트의 경우 위 첨자) || 다른 설명서가 있습니다.

Check 글자 간격, 값은 일반이고 px 단위입니다.

텍스트 줄 바꿈 word-wrap: 일반(콘텐츠가 열리거나 오버플로되도록 허용) || break-word(콘텐츠가 경계 내에서 줄바꿈됩니다. 필요한 경우 단어 내에서 줄 바꿈이 허용됩니다.)

CheckUnderline 제어 text-decoration: 없음(아니요 밑줄, 기본값), 밑줄(밑줄), 깜박임, 윗줄(윗줄), 줄바꿈(취소)

︎ 텍스트의 경우 text-transform: 첫 글자를 대문자로 변환 || 소문자로 변환

3. 목록 스타일 목록 스타일

▶list-style-image:url(/dot .gif); 목록 항목에 대한 안내 기호 이미지

▶list-style-position: 목록 기호 위치

♥outside (기본값, 목록 및 기호가 가깝습니다)

♥ 내부(들여쓰기된 목록, 기호와 분리됨)

▶list-style-type: 기호 유형(여기에 일반적으로 사용되는 몇 가지 기호가 있습니다. 일본어 플랫, 휴일, 가타카시 등이 필요한 경우) 매뉴얼을 확인하세요)

♥없음(없음) ♥아라비아 숫자(십진수) ♥채워진 원(디스크) ♥빈 원(원) ♥채워진 사각형(사각형)

♥ 영문 소문자(lower-alpha) ♥ 영문 대문자(upper-alpha) ♥ 로마숫자 소문자(lower-roman) ♥ 로마숫자 대문자(upper-roman)

4. 배경 스타일 배경

배경 스타일의 약자는 {Background-color||Background-Image||Background-repeat||Background-attachment||Background-position;}

배경: 배경색, 배경 이미지, 배경 타일링 방법, 배경 위치 순서 예: #F00 url(header_bg.gif) 반복 없음 고정 왼쪽 상단;

♣배경 색상

│원근감 있는 배경 배경:투명;

│배경 이미지 background-image:url(그림 파일 경로);

│배경 타일링 방법 background-repeat:반복(모두 타일링됨, 기본값) || 반복 없음(타일링되지 않음) || 반복-x(가로 타일) || 반복-y(세로 타일)

라운드(배경 이미지가 크기에 맞게 자동으로 조정됨) 전체 컨테이너) || space (배경 이미지는 동일한 간격으로 타일링되어 전체 컨테이너 또는 특정 방향을 채웁니다.)

♣배경 이미지 스크롤 배경 첨부: 스크롤 기본값입니다. 페이지의 나머지 부분이 스크롤되면 배경 이미지도 이동됩니다.

페이지의 나머지 부분을 스크롤할 때 배경 이미지가 움직이지 않는 문제를 수정했습니다. ||inherit는 배경 첨부 속성의 설정이 상위 요소에서 상속되어야 함을 지정합니다.

♣백그라운드 위치 지정 background-position: 왼쪽 및 오른쪽 정렬(left||center||) 위쪽 및 아래쪽 정렬(top||bottom);

정렬을 다음과 같이 작성할 수도 있습니다. 숫자 값(또는 백분율 %): 왼쪽 값(%) 상위 값(%)

♣ 배경 크기 background-size

background-size: auto 자동으로 기본값은 이미지 크기입니다.

배경 크기: px 또는 백분율. 하나의 값만 설정된 경우 두 번째 값은 "auto"로 설정됩니다.

배경 크기: 커버; 배경 이미지가 컨테이너를 완전히 덮을 수 있도록 비율을 조정합니다.

배경 크기: 포함; 너비와 높이가 콘텐츠 영역에 완전히 맞도록 이미지를 최대 크기로 확장합니다. 단, 컨테이너를 초과하지 않습니다

background-size: 100px 100%; 너비와 높이 비율 변경

♣ 배경 background-origin 의 시작 위치

쓰기 {Background-origin:padding-box 배경은 테두리 뒤에서 시작(기본값)||border-box 배경 이미지는 테두리에서 시작||content-box 배경은 콘텐츠에서 시작}

5 . 테두리 스타일 테두리

테두리 선의 약어: {border:border-width border-style border-color;}

데모: 네 변 모두에 동일한 테두리: {border:1px solid #00F};

원하는 경우 한쪽 면만 있는 경우 다음 방향을 선택할 수 있습니다. {border-[left||right||top||bottom]:border-width border-style border- color;}

♜테두리 스타일 border-style: 없음(테두리선 없음, 기본값) || 숨김(숨겨진 테두리선) || 점선, 일반적으로 사용됨)

실선(실선, 일반적으로 사용됨) || 이중 실선(이중 실선) || 홈(밝은 실선) || 왼쪽 상단이 깊고 오른쪽 하단이 밝은 실선) || 시작(왼쪽 상단이 더 밝고 오른쪽 하단이 더 어두운 실선)

♜경계선의 너비 border-width, 값은 px 단위의 값입니다.

♜테두리선의 색상 border-color, 값은 색상의 영어 단어 또는 16진수 색상을

♜inherit: 지정합니다. 테두리 속성의 설정은 상위 요소에서 상속되어야 합니다.

일반적인 CSS 속성과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!