>  기사  >  웹 프론트엔드  >  2장 CSS를 적용하는 방법

2장 CSS를 적용하는 방법

黄舟
黄舟원래의
2016-12-19 16:01:541184검색

CSSS의 선언 방법

이 장에서는 CSSS의 응용 방법을 소개합니다. 물론, 처음에 소개하고 싶은 것은 스타일 시트(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 { 글꼴 패밀리: "표준 기울임꼴 스타일"; 선언된 속성이 다르기 때문에 서로 충돌하지 않습니다. 실수로 동일한 속성을 두 번 선언한 경우 나중에 선언한 설정만 적용됩니다. 그런데 귀하의 진술서에는 형식이 정확하다면 허용됩니다. 대문자, 공백 또는 줄 바꿈에 관계없이 표시되는 결과에 영향을 미치지 않습니다.

CSS 응모방법

다음으로 생성된 스타일시트를 웹페이지에 적용하는 기본 4가지 방법을 소개하겠습니다. 1. STYLE 속성 사용: STYLE 속성을 개별 구성요소 태그에 직접 추가합니다. 이 사용법의 장점은 각 태그에 스타일을 유연하게 적용할 수 있다는 점이지만, 전체 문서에 "통합"이 없다는 것이 단점입니다. . 2. STYLE 태그 사용: 태그에 스타일 규칙을 작성합니다. 예: 일반적으로 전체 구조는 웹페이지의 이 사용법의 장점은 선언된 구성 요소가 있는 한 전체 문서의 통일성에 있습니다. 단점은 개별 구성 요소의 유연성이 부족하다는 것입니다. 3. LINK 태그 사용: .css 스타일 파일에 스타일 규칙을 작성한 다음 태그를 사용하여 도입하세요. 스타일 규칙을 example.css 파일로 저장한다고 가정해 보겠습니다. 스타일의 모든 내용을 적용하려면 웹 페이지에 만 추가하면 됩니다. 파일에 스타일이 공식화되었습니다. 일반적으로 LINK 태그는 웹페이지의 섹션에 작성됩니다. 이 사용법의 장점은 동일한 스타일 규칙이 동일한 스타일 파일에 적용되는 여러 문서를 할당할 수 있다는 것입니다. 단점은 개별 파일이나 구성 요소의 유연성이 부족하다는 것입니다. 4. @import를 사용하여 다음을 소개합니다. LINK 사용법과 매우 유사하지만 에 배치해야 합니다. 예: 라인은 정말 필수에요! 기억해, 기억해! 물론 LINK를 사용하든 @import를 사용하든 다른 사람의 기존 스타일시트를 그대로 적용하는 것은 가능하다. 하지만 인터넷 에티켓에 따라 이런 행동이 잘 되지 않는다면 최소한 상대방에게 알리고 동의를 먼저 얻어야 합니다! 네 가지 적용 방법은 각각 장점과 단점이 있으며 서로 충돌하지 않고 포괄적으로 사용할 수 있습니다. 하지만 동일한 속성을 반복적으로 선언하는 경우에는 적용 우선순위 문제를 고려해야 합니다! 일반적으로 우선순위는 다음과 같은 원칙을 따릅니다. 웹 디자이너의 스타일 설정 > 사용자의 스타일 설정 > 브라우저의 스타일 설정 STYLE 속성의 스타일 설정 > STYLE 태그 스타일 설정 > 체인 링크된 스타일 설정 다음에 선언된 스타일 설정 > 소위 " 이전 스타일 설정 중 "링크된 스타일 설정"은 위에서 언급한 두 가지 적용 방법인 LINK 태그와 @import 소개를 참조합니다. 매듭은 스타일 설정에 있습니다. 위 내용은 CSS의 가장 기본적인 선언 및 적용 방법에 대한 소개입니다. 이러한 기본적인 이해와 방법을 이해하면 이미 스타일 시트 구축을 시작할 수 있습니다. 위에서 언급한 기본 선언 및 적용 방법 외에도 다른 선언 및 적용 방법이 있는데, 이에 대해서는 다음 장에서 소개하겠습니다.

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


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.