일반적으로 사용되는 CSS 속성에 대한 자세한 설명

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

☛ CSS 속성에 대한 자세한 내용과 편의를 위해 매뉴얼을 확인하는 것이 좋습니다. 여기서는 몇 가지 공통 속성을 분류하겠습니다. 몇 가지만 선택해 보세요. 공통 속성 값은 저처럼 이제 막 프론트엔드를 배우는 초보자만을 위한 것입니다.

1. 글꼴 스타일

글꼴의 약어로 font:font-style||font-variant ||font-weight||font - 크기 | 특수 글꼴 경사

♣작은 대문자 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 }

★ 덜 일반적으로 사용되는 기타 글꼴 스타일:

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

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

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

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

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

♣status-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); -style 기호, 이미지를 목록 항목의 가이드 기호로 선택 ▶list-style-position : 목록 기호 위치

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

♥내부(목록은 들여쓰기되어 기호와 분리됨)

▶list-style-type: 기호 유형(여기에 일반적으로 사용되는 몇 가지 기호가 있습니다. 일본어 플랫이 필요한 경우 다음을 수행할 수 있습니다. 가짜 영화에 대한 설명서를 확인하세요)

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

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

4. 배경 스타일 배경

배경 스타일의 약어로 {배경-색상||배경-이미지||배경-반복||배경 부착||배경 위치;}

배경으로 표기합니다. : 배경색, 배경 이미지, 배경 타일링 방법, 배경 위치 순서가 맞아야 합니다. 배경 예: #F00 url(header_bg.gif) 반복 없음 고정 왼쪽 상단;

♣배경 색상

│ 원근감 있는 배경 배경:transparent;

│배경 이미지 backgroung-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;}

데모: 4면 테두리는 동일합니다: {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 중국어 웹사이트의 기타 관련 기사를 참조하세요!