HTML5 및 CSS3 프로그래밍을위한 여러 요소에 대한 스타일 정의 방법 - 더미

비디오: [CSS 기초이론] - CSS 포지셔닝 – 이것만 기억하면 오케이 (position: relative, absolute) 2024

때때로 HTML5 및 CSS3 기반 웹 페이지의 여러 요소가 비슷한 스타일을 공유하도록 할 수 있습니다. 이것을 실제로 보시려면이 예제를보십시오.

맨 위의 세 표제는 모두 매우 비슷한 스타일을 가지고 있습니다. 세 가지 스타일을 만드는 것은 지루할 것이므로 CSS에는

multiStyle이라는 지름길이 있습니다. html h1, h2, h3 {text-align: center; font-family: "Bradley Hand ITC", 필기체; background-color: yellow;} h3 {font-family: monospace;}

H1 제목

H3 Heading
하나의 스타일 요소 (h1, h2, h3을 시작하는 요소)는 세 가지 제목 유형 모두에 대한 모든 정보를 제공합니다. 쉼표로 구분 된 스타일 선택기에 두 개 이상의 요소를 포함하면 스타일이 목록의 모든 요소에 적용됩니다. 이 예제에서는 노란색 배경이있는 가운데 맞춤 체체 글꼴이 머리글 수준 1, 2 및 3에 모두 동일한 스타일로 적용됩니다.

수정을 원한다면 그렇게 할 수 있습니다. 스타일 규칙은 순서대로 적용되므로 일반 규칙으로 시작한 다음 원하는 경우 나중에 스타일의 특정 요소를 수정할 수 있습니다.

셀렉터 규칙에 여러 요소가있는 경우 쉼표를 사용하는지 여부에 따라 큰 차이가 있습니다. 요소를 공백 (쉼표 제외)으로 구분하면 CSS는 다른 요소 내에 중첩 된 요소를 찾습니다. 쉼표를 포함하면 CSS는 나열된 모든 요소에 규칙을 적용합니다.

구두점을 사용하여 셀렉터에 대해 더욱 자세히 구별 할 수 있습니다. 예를 들어 + 선택자는 형제 관계를 설명합니다. 예를 들어, 다음 규칙을 살펴보십시오.

h1 + p

이것은 레벨 1 헤드 라인 바로 다음에 오는 단락 만 대상으로합니다. 다른 모든 단락은 무시됩니다. 다른 셀렉터도 있지만 여기에 언급 된 셀렉터는 대부분의 응용 프로그램에 충분합니다.

왜 개발자가 다양한 종류의 선택기가 필요한지 궁금 할 수 있습니다. 대부분의 요소에 태그 이름을 사용할 수 있으며 특별한주의가 필요한 요소에 클래스 나 ID를 적용하기 만하면됩니다. 그렇습니다.하지만 CSS의 목표 중 하나는 HTML 코드를 가능한 한 깨끗하게 유지하는 것입니다. 스타일 자체를 결정할 때 페이지 자체의 구조를 사용하려고합니다.