CSS 구문의 세 가지 구성 요소는 무엇입니까?

CSS 구문은 선택기, 속성, 값의 세 부분으로 구성됩니다. 선택기는 페이지의 어느 부분에 스타일이 적용될지 알려줄 수 있습니다. 속성은 CSS에서 제공하는 설정된 스타일 옵션입니다. 속성 값은 속성 효과의 매개변수를 표시하는 데 사용됩니다. 구문은 "selector {attribute: attribute"입니다. 값}".

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 구문은 선택기, 속성, 값의 세 부분으로 구성됩니다.

• 선택기는 페이지에서 스타일이 적용될 개체를 브라우저에 알려줍니다. 이러한 개체는 특정 태그, 모든 웹 페이지 개체, 지정된 클래스 또는 ID 값 등일 수 있습니다. 브라우저는 이 스타일을 구문 분석할 때 선택기를 기반으로 개체의 표시 효과를 렌더링합니다.

• 속성은 CSS에서 제공하는 설정된 스타일 옵션입니다. 속성 이름은 하나 이상의 단어로 구성되며 여러 단어는 하이픈으로 연결됩니다. 이는 스타일을 적용할 속성의 효과를 직관적으로 표현할 수 있습니다.

• Value(값)은 속성의 값을 의미하며, 속성의 효과를 표시하는 데 사용되는 매개변수입니다. 수치와 단위, 키워드 등이 포함됩니다.

선택기는 일반적으로 정의하려는 HTML 요소 또는 태그이고, 속성은 변경하려는 속성이며, 각 속성에는 값이 있습니다. 속성과 값은 콜론으로 구분되고 중괄호로 둘러싸여 완전한 스타일 선언을 구성합니다.

selector {property: value}
选择器{属性:属性值}

예:

body {color: blue}

위 코드 줄의 기능은 본문 요소 내의 텍스트 색상을 정의하는 것입니다. 파란색이다. 위의 예에서 본문은 선택자이고 중괄호로 묶인 부분은 선언입니다. 선언은 속성과 값의 두 부분으로 구성됩니다. 색상은 속성이고 파란색은 값입니다.

다중 선언:

팁: 둘 이상의 선언을 정의하려면 각 선언을 세미콜론으로 구분해야 합니다. 아래 예에서는 빨간색 텍스트로 가운데 정렬된 단락을 정의하는 방법을 보여줍니다. 마지막 규칙은 세미콜론을 추가할 필요가 없다는 것입니다. 왜냐하면 세미콜론은 영어에서 닫는 기호가 아니라 분리 기호이기 때문입니다. 그러나 대부분의 숙련된 디자이너는 각 선언 끝에 세미콜론을 추가합니다. 이는 기존 규칙에서 선언을 추가하거나 뺄 때 오류 가능성을 최소화하는 이점이 있습니다.

p {text-align:center; color:red;}

다음과 같이 스타일 정의의 가독성을 높이기 위해 한 줄에 하나의 속성만 기술해야 합니다.

p {
text-align: center;
color: black;
font-family: arial;
}

공백 및 대소문자 구분

대부분의 스타일시트에는 둘 이상의 규칙이 포함되어 있으며 대부분의 규칙에는 다음이 포함됩니다. 하나 이상의 진술. 다중 선언과 공백 사용으로 인해 스타일 시트를 더 쉽게 편집할 수 있습니다.

body {

color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}

공백 포함 여부는 CSS가 브라우저에서 작동하는 방식에 영향을 주지 않습니다. 또한 CSS는 XHTML과 달리 대소문자를 구분하지 않습니다. . 한 가지 예외가 있습니다. HTML 문서 작업 시 클래스 및 ID 이름은 대소문자를 구분합니다.

고급 CSS 구문: 선택기 그룹화

그룹화된 선택기가 동일한 선언을 공유하도록 선택기를 그룹화할 수 있습니다.

그룹화해야 하는 선택기를 구분하려면 쉼표를 사용하세요. 아래 예에서는 모든 제목 요소를 그룹화했습니다. 모든 제목 요소는 녹색입니다.

h1,h2,h2,h3,h5,h6 {
color: green;
}

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS 구문의 세 가지 구성 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!