2장 CSS를 적용하는 방법

ＣＳＳＳ의 선언 방법

이 장에서는 CSＳS의 응용 방법을 소개합니다. 물론, 처음에 소개하고 싶은 것은 스타일 시트(Style Sheets)를 만드는 방법과 웹 페이지에서의 선언 방법 및 적용 방법에 대한 내용입니다. 마지막으로 CSS의 몇 가지 특징에 대해서도 간략하게 설명하겠습니다. 대략적으로 CSS를 선언하는 방법에는 세 가지가 있습니다. 1. 기본 선언: CSS를 선언하는 가장 일반적인 방법입니다. 요소{PROperty:값} 중국어로 표현하면 요소(라벨){속성(속성)명: 설정값}입니다. 예: H3 {COLOR: BLUE}는 문장의 집합입니다. 2. 집합적 선언: 하나 또는 여러 구성 요소(레이블)의 스타일 규칙(속성)(각 규칙 그룹 사이에 세미콜론으로 구분)의 그룹 또는 배열을 동시에 선언합니다(각 구성 요소(레이블) 사이를 쉼표로 구분). 컴포넌트(레이블){속성(속성) 이름 1: 설정 값 1; 속성(속성) 이름 2: 설정 값 2;... } 또는 컴포넌트 A(레이블 A), 컴포넌트 B(레이블 B), 컴포넌트 C(레이블) C), ...{속성(속성) 이름 1: 설정 값 1; 속성(속성) 이름 2: 설정 값 2;...} 예: TD {COLOR: BLUE;font-size: 9pt;} 또는 TD,P,DIV {COLOR: BLUE;font-size: 9pt } 3. 하위 항목 선언: 여러 스타일 규칙을 그룹화하여 별도로 선언합니다. 컴포넌트 A(라벨 A) {속성(속성) 이름 1: 설정 값 1; 속성(속성) 이름 2: 설정 값 2 }컴포넌트 A(라벨 A) {속성(속성) 이름 3: 설정 값 3 ; 속성) 이름 4: 설정 값 4; } 예: TD { COLOR: BLUE; 글꼴 크기: 9pt}TD { 글꼴 패밀리: "표준 기울임꼴 스타일"; 선언된 속성이 다르기 때문에 서로 충돌하지 않습니다. 실수로 동일한 속성을 두 번 선언한 경우 나중에 선언한 설정만 적용됩니다. 그런데 귀하의 진술서에는 형식이 정확하다면 허용됩니다. 대문자, 공백 또는 줄 바꿈에 관계없이 표시되는 결과에 영향을 미치지 않습니다.

ＣＳＳ 응모방법

다음으로 생성된 스타일시트를 웹페이지에 적용하는 기본 4가지 방법을 소개하겠습니다. 1. STYLE 속성 사용: STYLE 속성을 개별 구성요소 태그에 직접 추가합니다. <Component(label) STYLE="Property(property)1: 설정값 1; Property(Property)2: 설정값 2; ...} 예: <TD STYLE="COLOR:BLUE; 9pt;font-family:"毷体"; line-height:150%>이 사용법의 장점은 각 태그에 스타일을 유연하게 적용할 수 있다는 점이지만, 전체 문서에 "통합"이 없다는 것이 단점입니다. . 2. STYLE 태그 사용: <STYLE>...</STYLE> 태그에 스타일 규칙을 작성합니다. <STYLE TYPE="text/CSS"><!--스타일 규칙 테이블--> </STYLE>예: <STYLE TYPE="text/css"><!--BODY { color: BLUE; background: #FFFFCC; 글꼴 크기: 9pt}TD, P {COLOR: GREEN; 글꼴 크기: 9pt}--></STYLE>일반적으로 전체 <STYLE>... </STYLE> 구조는 웹페이지의 </HEAD> 이 사용법의 장점은 선언된 구성 요소가 있는 한 전체 문서의 통일성에 있습니다. 단점은 개별 구성 요소의 유연성이 부족하다는 것입니다. 3. LINK 태그 사용: .css 스타일 파일에 스타일 규칙을 작성한 다음 <LINK> 태그를 사용하여 도입하세요. 스타일 규칙을 example.css 파일로 저장한다고 가정해 보겠습니다. 스타일의 모든 내용을 적용하려면 웹 페이지에 <LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">만 추가하면 됩니다. 파일에 스타일이 공식화되었습니다. 일반적으로 LINK 태그는 웹페이지의 </HEAD> 섹션에 작성됩니다. 이 사용법의 장점은 동일한 스타일 규칙이 동일한 스타일 파일에 적용되는 여러 문서를 할당할 수 있다는 것입니다. 단점은 개별 파일이나 구성 요소의 유연성이 부족하다는 것입니다. 4. @import를 사용하여 다음을 소개합니다. LINK 사용법과 매우 유사하지만 <STYLE>...</STYLE>에 배치해야 합니다. <STYLE TYPE="text/css"><!-- @import url(가져온 스타일 시트의 주소, 경로 및 파일 이름);--></STYLE> 예: <STYLE TYPE ="text/css"><!-- @import url(http://yourweb/ example.css);--></STYLE> 라인은 정말 필수에요! 기억해, 기억해! 물론 LINK를 사용하든 @import를 사용하든 다른 사람의 기존 스타일시트를 그대로 적용하는 것은 가능하다. 하지만 인터넷 에티켓에 따라 이런 행동이 잘 되지 않는다면 최소한 상대방에게 알리고 동의를 먼저 얻어야 합니다! 네 가지 적용 방법은 각각 장점과 단점이 있으며 서로 충돌하지 않고 포괄적으로 사용할 수 있습니다. 하지만 동일한 속성을 반복적으로 선언하는 경우에는 적용 우선순위 문제를 고려해야 합니다! 일반적으로 우선순위는 다음과 같은 원칙을 따릅니다. 웹 디자이너의 스타일 설정 > 사용자의 스타일 설정 > 브라우저의 스타일 설정 STYLE 속성의 스타일 설정 > STYLE 태그 스타일 설정 > 체인 링크된 스타일 설정 다음에 선언된 스타일 설정 > 소위 " 이전 스타일 설정 중 "링크된 스타일 설정"은 위에서 언급한 두 가지 적용 방법인 LINK 태그와 @import 소개를 참조합니다. 매듭은 스타일 설정에 있습니다. 위 내용은 CSS의 가장 기본적인 선언 및 적용 방법에 대한 소개입니다. 이러한 기본적인 이해와 방법을 이해하면 이미 스타일 시트 구축을 시작할 수 있습니다. 위에서 언급한 기본 선언 및 적용 방법 외에도 다른 선언 및 적용 방법이 있는데, 이에 대해서는 다음 장에서 소개하겠습니다.

위 내용은 2장의 CSS 응용방법 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!