일반적인 CSS 속성 4 요약

******* 일반적인 CSS 속성 *********

[글꼴]

글꼴 개체의 텍스트 속성을 설정하거나 검색합니다. 이 속성은 복합 속성입니다.

첫 번째 선언 방법을 사용하는 매개변수는 위와 같은 순서로 배열되어야 하며, 글꼴 크기와 글꼴 패밀리는 무시할 수 없습니다. 매개변수당 하나의 값만 허용됩니다. 생략하면 해당 매개변수에 해당하는 독립 속성의 기본값이 사용됩니다.

: 텍스트 글꼴 스타일을 지정

: 텍스트가 소문자인지 여부를 지정

: 텍스트 글꼴의 두께를 지정

: 텍스트 글꼴 크기 지정

: 텍스트 글꼴의 줄 높이 지정

: 특정 글꼴 또는 글꼴 순서를 사용할 텍스트 지정

캡션: 제목이 지정된 시스템 컨트롤 글꼴(예: 버튼, 메뉴 등)의 텍스트 사용(CSS2)

아이콘: 아이콘 레이블의 글꼴 사용(CSS2)

메뉴: 사용 메뉴 글꼴(CSS2)

메시지 상자: 정보 대화 상자의 텍스트 글꼴 사용(CSS2)

작은 캡션: 작은 컨트롤 글꼴 사용(CSS2)

status-bar: 창 상태 표시줄의 글꼴 사용(CSS2)

------------------- ----------- -------------

font-family: 개체의 텍스트에 대한 일련의 글꼴 이름을 설정하거나 검색합니다.

기본값: 사용자 에이전트에 의해 결정됨

시퀀스에는 포함된 글꼴이 포함될 수 있습니다.

일반 글꼴 참조는 따옴표 없이 인용할 수 있습니다. 글꼴 이름에 공백, 숫자 또는 기호(예: 연결선)가 포함된 경우 오류가 발생하지 않도록 따옴표가 필요합니다.

사용자 에이전트는 특정 글꼴이 일치할 때까지 정의된 글꼴 ​​순서를 순회합니다.

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

위의 글꼴 정의와 같이 사용자의 컴퓨터에 helvetica 글꼴이 없다고 가정합니다. 기계이지만 verdana가 있으면 텍스트가 verdana로 표시됩니다.

: 글꼴 이름입니다. 우선순위 순입니다. 쉼표로 구분하세요. 글꼴 이름에 공백이나 중국어 문자가 포함된 경우 따옴표로 묶어야 합니다.

: 글꼴 시퀀스 이름입니다.

------------------------- --- ---------------------------------- --- -------

font-size: 개체의 글꼴 크기를 설정하거나 검색합니다.

: 개체 글꼴에 따라 조정합니다. 선택적 매개변수 값: xx-소형 | x-소형 | 소형 | 소형: 3/4(h5), 중형: 6/5(h3) ), x-large: 3/2(h2), xx-large: 2 /1(h1),

: 상위 개체의 글꼴 크기를 기준으로 조정됩니다. 비례 em 단위를 사용하여 계산됩니다. 선택적 매개변수 값: 더 작게 | 더 크게

: 길이 값을 사용하여 텍스트 크기를 지정합니다. 음수 값은 허용되지 않습니다.

: 텍스트 크기를 백분율로 지정합니다. 백분율 값은 상위 개체의 글꼴 크기를 기반으로 합니다. 음수 값은 허용되지 않습니다.

------------------------- --- ---------------------------------- --- ------------

font-stretch: 개체의 텍스트를 가로로 늘릴지 여부를 설정하거나 검색합니다.

브라우저에 표시되는 글꼴의 일반 너비를 기준으로 텍스트가 늘어납니다.

초축약: 4베이스가 일반 텍스트 너비보다 좁습니다.

추가 축약: 일반 텍스트 너비보다 3개의 염기가 더 좁습니다.

축소: 일반 텍스트 너비보다 2개의 베이스가 더 좁습니다.

반축약형: 일반 텍스트 너비보다 1베이스가 더 좁습니다.

일반: 일반 텍스트 너비

반확장: 일반 텍스트 너비보다 1 베이스 더 넓습니다.

확장됨: 일반 텍스트 너비보다 2베이스 더 넓습니다.

추가 확장: 일반 텍스트 너비보다 3 베이스 더 넓습니다.

초확장: 일반 텍스트 너비보다 4베이스 더 넓습니다.

------------------------- --- ---

font-style: 개체의 텍스트 글꼴 스타일을 설정하거나 검색합니다.

normal: 텍스트 글꼴 스타일을 일반 글꼴로 지정합니다.

italic: 텍스트 글꼴 스타일을 italic으로 지정합니다. 기울임꼴로 디자인되지 않은 특수 글꼴의 경우 기울임꼴 모양을 사용하려는 경우 기울임꼴이 적용됩니다.

오블리크: 텍스트 글꼴 스타일을 기울임꼴 글꼴로 지정합니다. 글꼴에서 이탤릭체를 선택하는 대신 인위적으로 텍스트를 기울입니다

------------ --- --------------------- --- -----------------

font-variant: 객체의 텍스트가 작은 대문자인지 여부를 설정하거나 검색합니다.

normal: 일반 글꼴

small-caps: 작은 대문자 글꼴

------ --- ---------------------------------- --

font-weight: 개체의 텍스트 글꼴 두께를 설정하거나 검색합니다.

의 효과는 클라이언트 시스템에 설치된 글꼴의 특정 글꼴 변수 매핑에 따라 결정됩니다. 시스템은 가장 가까운

을 선택합니다.

경기. 즉, 사용자는 서로 다른 값 사이의 차이를 볼 수 없습니다.

일반: 일반 글꼴입니다. 숫자 400에 해당

굵게: 굵게. 숫자 700에 해당합니다.

bolder: 더욱 굵게 표시됩니다. 또한 Strong 및 B 개체의 역할과 동일합니다.

lighter: Thin

: 숫자를 사용하여 텍스트 글꼴 두께를 나타냅니다. 값 범위: 100 | 200 | 600 | 800 | 900

--- ------------------------------------------------ -- -------------------

***** * ************************************************** ************************************************** * ***********

display:inline 블록으로 인라인으로 표시되는 요소를 인라인으로 표시합니다

display:inline의 기능은 객체가 인라인 요소로 표시되도록 설정하는 것입니다. inline은 인라인 객체의 기본값입니다.

DIV1

DIV2

여기서 DIV1과 DIV2는 각각 한 줄을 차지하지만 속성을 추가하면 변경됩니다.

DIV1

DIV2

이제 DIV1과 DIV2가 같은 줄에 표시됩니다. line

display:block은 요소를 블록 수준 요소로 표시하는 것입니다.

display:inline-block은 객체를 블록 수준 요소로 렌더링합니다. 인라인 개체이지만 개체의 내용은 블록 개체 렌더링과 같습니다. 인접한 인라인 개체는 공백을 허용하여 같은 줄에 렌더링됩니다.

------------------------- --- ---------------------------------- --- ---------------------

******** ***** ********************************************* ****** ******************************************** ******* ****

【테두리】 복합 속성입니다. 개체 테두리의 속성을 설정합니다.

이 복합 속성을 사용하여 단일 매개변수를 정의하는 경우 다른 매개변수의 기본값이 해당 단일 속성 설정을 무조건 재정의합니다.

border-color: 객체의 테두리 색상을 설정하거나 검색합니다.

파라미터 값 4개를 모두 제공하면 상, 우, 하, 좌 순으로 4면에 적용됩니다.

한 쪽만 제공하면 네 면 모두 사용됩니다.

두 개가 제공되는 경우 첫 번째는 상하용이고 두 번째는 왼쪽 및 오른쪽용입니다.

3개가 제공되면 첫 번째는 위쪽용, 두 번째는 왼쪽 및 오른쪽용, 세 번째는 아래쪽용입니다.

border-width가 0이거나 border-style이 없음으로 설정된 경우 이 속성은 무시됩니다.

------------------------- --- -------------------

테두리-이미지 복합 속성입니다. 이미지로 채울 객체의 테두리 스타일을 설정하거나 검색합니다.

테두리 스타일을 정의하려면 테두리 스타일 대신 이미지를 사용하세요. border-image가 없음이거나 이미지가 보이지 않는 경우 border-style에서 정의한 테두리 스타일 효과가 표시됩니다.

[ border-image-source ]: 객체의 테두리가 이미지 정의 스타일 또는 이미지 소스 경로를 사용하는지 여부를 설정하거나 검색합니다.

[ border-image-slice ]: 객체의 테두리 배경 이미지 분할 방법을 설정하거나 검색합니다.

[ border-image-width ]: 개체의 테두리 두께를 설정하거나 검색합니다.

[ border-image-outset ]: 개체의 테두리 배경 이미지 확장자를 설정하거나 검색합니다.

[ border-image-repeat ]: 객체 테두리 이미지의 타일링 방법을 설정하거나 검색합니다.

------------------------- --- ---------------

border-radius 객체 설정 또는 검색 둥근 모서리 프레임을 사용합니다. "/"로 구분된 2개의 매개변수를 제공합니다. 각 매개변수에는 1~4개의 매개변수 값을 설정할 수 있습니다. 첫 번째 매개변수는 수평 반경을 나타내고 두 번째 매개변수는 수직 반경을 나타냅니다. 기본값은 첫 번째 매개변수와 동일

수평 반경: 4개의 매개변수 값을 모두 제공하는 경우 왼쪽 위, 오른쪽 위, 오른쪽 아래 순서(하위 순서) -오른쪽) 및 왼쪽 아래(왼쪽 아래)는 네 모서리에 작용합니다.

한 개만 제공하면 네 모서리 모두 사용됩니다.

두 개가 제공되는 경우 첫 번째는 왼쪽 상단 및 오른쪽 하단에 사용되며 두 번째는 오른쪽 상단 및 왼쪽 하단에 사용됩니다.

3개가 제공되면 첫 번째는 왼쪽 위, 두 번째는 오른쪽 위, 왼쪽 아래, 세 번째는 오른쪽 아래입니다.

세로반경도 위의 4가지 점을 따릅니다.

: 길이 값을 사용하여 객체의 필렛 반경 길이를 설정합니다. 음수 값은 허용되지 않습니다

: 개체의 모서리 반경 길이를 백분율로 설정합니다. 음수는 허용되지 않습니다

------------------------------- --- ----------

border-width는 객체의 테두리 너비를 설정하거나 검색합니다.

파라미터 값 4개를 모두 제공하면 상, 우, 하, 좌 순으로 4면에 적용됩니다.

한 쪽만 제공하면 네 면 모두 사용됩니다.

두 개가 제공되는 경우 첫 번째는 상하용이고 두 번째는 왼쪽 및 오른쪽용입니다.

3개가 제공되면 첫 번째는 위쪽용, 두 번째는 왼쪽 및 오른쪽용, 세 번째는 아래쪽용입니다.

border-style이 없음으로 설정된 경우 이 속성은 아무런 효과가 없습니다.

: 길이 값을 사용하여 테두리의 두께를 정의합니다. 음수 값은 허용되지 않습니다.

medium: 테두리의 기본 두께를 정의합니다.

thin: 기본 두께보다 얇은 테두리를 정의합니다.

두꺼움: 기본 두께보다 두꺼운 테두리를 정의합니다.

------------------------- --- ---

border-left-style 객체의 왼쪽 테두리 스타일을 설정하거나 검색합니다.

border-width가 0이면 이 속성은 아무런 효과가 없습니다.

없음: 개요가 없습니다. border-color 및 border-width는 무시됩니다.

숨김: 테두리를 숨깁니다. IE7 이하는 아직

dotted: 점선 윤곽선을 지원하지 않습니다. IE6에서

점선 효과로 표시됨: 점선 윤곽선.

실선: 실선 외곽선

이중: 이중선 외곽선. 두 개의 단일 선과 그 간격의 합은 지정된 테두리 너비 값

groove: 3D 홈 윤곽선과 같습니다.

리지: 3D 볼록 홈 프로파일.

삽입: 3D 오목 가장자리 윤곽.

시작: 3D 볼록한 가장자리 윤곽선.

------------------------- --- -----

테두리 상단 복합 속성입니다. 개체의 위쪽 테두리 속성을 설정합니다.

이 복합 속성을 사용하여 단일 매개변수를 정의하는 경우 다른 매개변수의 기본값이 해당 단일 속성 설정을 무조건 재정의합니다.

[ border-top-width ]: 개체의 위쪽 테두리 너비를 설정하거나 검색합니다.

[ border-top-style ]: 개체의 위쪽 테두리 스타일을 설정하거나 검색합니다.

[ border-top-color ]: 개체의 위쪽 테두리 색상을 설정하거나 검색합니다.

------------------------- --- -------------

box-shadow 객체 그림자를 설정하거나 검색합니다. .

각 매개변수 값 세트를 쉼표로 구분하여 여러 효과 세트를 설정할 수 있습니다.

없음: 그림자 없음

①: 첫 번째 길이 값은 객체의 그림자 가로 오프셋 값을 설정하는 데 사용됩니다. 음수 값일 수 있음

②: 두 번째 길이 값은 객체 그림자의 수직 오프셋 값을 설정하는 데 사용됩니다. 음수일 수 있음

3: 세 번째 길이 값이 제공되면 객체의 그림자 흐림 값을 설정하는 데 사용됩니다. 음수 값은 허용되지 않습니다

4: 네 번째 길이 값이 제공되면 객체의 그림자 확장 값을 설정하는 데 사용됩니다. 음수일 수 있음

: 객체의 그림자 색상을 설정합니다.

삽입: 개체의 그림자 유형을 내부 그림자로 설정합니다. 값이 비어 있으면 객체의 그림자 유형은 외부 그림자

------------ - ------------------------------------------------- - ------

투명성

은 다음과 같이 작성됩니다.

{
filter: alpha(opacity=10);  //针对ie
 
}

이는 기본적으로 모든 브라우저에서 작동합니다. 투명성 확보

위 내용은 CSS의 네 번째 공통 속성을 요약한 것입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!