CSS 규칙 세트는 무엇을 위해 사용됩니까?

CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)를 나타냅니다. HTML 요소의 스타일을 지정하는 데 사용됩니다. HTML은 웹 페이지에 콘텐츠를 생성하거나 추가하는 데 사용됩니다. 그 후 개발자는 CSS를 사용하여 HTML 콘텐츠를 특정 스타일로 렌더링하여 보기 좋게 만듭니다.

CSS 규칙 세트는 주로 두 부분으로 구성됩니다. 하나는 CSS 선택자이고 다른 하나는 선언 블록입니다.

CSS 선택기는 HTML 요소를 선택하는 데 사용되며 선언 블록에는 HTML 요소에 적용할 키-값 형식의 CSS 속성이 포함되어 있습니다.

문법

사용자는 CSS 규칙 세트를 사용하여 다음 구문에 따라 HTML 요소의 스타일을 지정할 수 있습니다.

으아악

위 구문에서 '선택자'는 HTML 요소를 선택하는 데 사용되는 HTML 요소의 클래스 이름, ID 등이 될 수 있습니다. 선언 블록에는 HTML 요소에 적용할 여러 CSS 속성과 해당 값이 포함되어 있습니다.

예제 1(CSS 클래스 이름 선택기)

아래 예에서는 CSS 규칙 세트를 정의할 때 클래스 이름을 CSS 선택기로 사용하고 있습니다. 아래 코드에는 클래스 이름이 다른 세 개의 div 요소가 있습니다. 우리는 클래스 이름으로 각 div 요소를 선택하고 사용자가 출력에서 ​​확인할 수 있는 다른 CSS 스타일을 적용했습니다.

으아악

예제 2(CSS ID 선택기)

아래 예에서는 CSS 규칙 세트를 정의할 때 HTML 요소의 ID를 CSS 선택기로 사용하고 있습니다. HTML에서는 두 요소에 동일한 ID가 포함될 수 없습니다.

여기에는 ID가 "content1" 및 "content2"인 두 개의 다른 div 요소가 포함된 ID가 "card"인 div 요소가 있습니다. 사용자가 출력에서 ​​확인할 수 있는 ID로 모든 HTML 요소에 액세스하여 스타일을 지정합니다.

으아악

예 3(CSS 다중 선택기)

아래 예에서는 여러 CSS 선택기를 사용하여 동일한 CSS 스타일을 여러 HTML 요소에 동시에 적용합니다.

클래스 이름과 ID가 서로 다른 3개의

요소가 있습니다. CSS에서는 ".text1, .text2, #para1" CSS 선택기를 사용하여 선언 블록에 추가된 동일한 스타일을 모든 HTML 요소에 적용합니다.

또한 클래스 이름 및 ID CSS 선택기를 사용하여 세 가지 HTML 요소를 모두 개별적으로 선택하여 다양한 요소에 다양한 스타일을 적용했습니다.

으아악

예 4(CSS 중첩 요소 선택기)

아래 예에서는 CSS의 중첩 선택기를 소개합니다. HTML에서 div 요소에는 클래스 이름이 "link"인 여러 요소가 포함되어 있습니다.

CSS에서는 클래스 이름이 "link"인 모든 HTML 요소와 div 요소의 하위 항목을 선택하는 "div .link" CSS 선택기를 사용했습니다. "div.link"를 CSS 선택기로 사용하면 클래스 이름이 "link"인 모든 div 요소에 스타일이 적용됩니다. 따라서 "div.link"와 "div .link"는 모두 서로 다른 CSS 선택기입니다.

출력에서 사용자는 CSS 스타일이 div 요소의 하위 요소인 모든 HTML 요소에 적용되지만 div 요소 외부 요소에는 적용되지 않음을 확인할 수 있습니다.

으아악

예 5(CSS 의사 선택기)

이 예에서는 CSS 의사 선택기의 사용을 보여줍니다. CSS 의사 선택기에는 다양한 종류가 있으며 여기서는 그 중 일부를 사용합니다.

여기에는 "element" 클래스 이름을 가진 4개의 하위 요소가 포함된 "container" div 요소가 있습니다. 사용자가 div 요소 위로 마우스를 가져갈 때 "container" div 요소의 배경색을 변경하기 위해 ":hover" 의사 선택기를 사용합니다.

그런 다음 ':first-child', ':last-child' 및 ':nth-child()' CSS 선택기와 '.element' 선택기를 사용하여 첫 번째 하위 요소, 마지막 하위 요소, 그리고 n번째 아이입니다.

출력에서 사용자는 첫 번째 자식, 마지막 자식, 두 번째 자식에 서로 다른 CSS 스타일이 적용되는 것을 확인할 수 있습니다.

으아악

사용자는 이 튜토리얼에서 다양한 CSS 규칙 세트를 사용하는 방법을 배웠습니다. 클래스 이름과 ID를 선택자로 사용합니다. 또한 여러 CSS 선택기와 중첩된 CSS 선택기를 사용하는 방법도 배웠습니다. 이전 예에서는 CSS 규칙 세트에서 의사 선택기를 사용하는 방법을 배웠습니다.

위 내용은 CSS 규칙 세트는 무엇을 위해 사용됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!