집 >웹 프론트엔드 >CSS 튜토리얼 >CSS에서 클래스와 ID의 차이점과 사용법 분석

CSS에서 클래스와 ID의 차이점과 사용법 분석

不言원래의: 2018-06-15 09:23:011897검색

이 글은 주로 CSS에서 클래스와 ID의 차이점과 사용법을 소개합니다. 이제는 모든 사람과 공유합니다. 필요한 친구들이 참고할 수 있습니다.

p CSS를 사용하여 Xhtml 웹 페이지를 만들 때 , CSS 스타일 속성을 호출하기 위해 Class와 id를 자주 사용하는데, 언제 class를 사용해야 하고, 언제 id를 사용해야 할까요? CLASS와 ID의 기본 속성과 사용법을 자세히 알아볼까요

우리가 주로 사용할 때 p CSS를 사용하여 Xhtml 웹 페이지를 생성할 때 종종 클래스와 ID를 사용하여 CSS 스타일 속성을 선택하고 호출합니다. CSS를 처음 배우는 초보자에게는 class와 id가 모호할 수도 있고, 언제 class를 사용해야 하는지, 언제 id를 사용해야 하는지, 사용법과 제한 사항이 무엇인지 알 수 없습니다. 다음으로 CLASS와 ID의 기본 속성과 사용법에 대해 자세히 알아보겠습니다.

클래스는 프로그램에서 "클래스"라고 불리며, CSS의 서면 언어에서는 "클래스"라고도 합니다. CSS 스타일에서는 .css5{attribute: attribute value;}와 같이 소문자 "dot" 및 "."으로 이름이 지정되고 html 페이지에서는 class="css5"가 호출을 선택하는 데 사용됩니다. CSS는 CSS 선택자라고도 합니다. 예: .css5{attribute: attribute value;} 선택기는 html에서 "634316e925df670a1efce184bcd76f27I am a class example94b3e26ee717c64999d7867364b1b4a3"로 호출됩니다. CSS를 인용하는 방법을 모르는 경우 , CSS 참조에 대해 알아볼 수 있습니다.

그리고 클래스(class)는 동일한 HTML 페이지에서 동일한 클래스를 수없이 호출할 수 있습니다. 이 예에서는 해당 웹 페이지에서 "css5"를 수없이 호출할 수 있습니다. 이는 일반적으로 CSS에서 미리 구성된 속성을 호출하는 데 클래스가 사용된다는 것을 보여줍니다. 예를 들어 여기에 ".class01{attribute: attribute value;}"와 같이 미리 구성된 속성이 있으면 함수를 호출하는 것처럼 사용할 수 있습니다. "class" 속성이 필요 없이 웹 페이지에서 반복적으로 구성되며 클래스 선택만 작성하면 되며 동일한 페이지 내 어디에서나 동일한 CLASS 클래스로 선택을 호출할 수 있습니다.

ID는 태그의 ID를 나타내며 id는 JS 스크립트에서 사용됩니다. JS가 태그의 속성을 수정하려는 경우 JS는 id 이름을 태그의 고유 식별자로 사용합니다. 즉, ID는 다른 요소 스크립트 등에서 참조할 수 있는 페이지 요소의 식별자일 뿐입니다. 페이지에 두 개의 ID가 있는 경우 JS 효과 기능에 논리 오류가 발생하며 태그 속성을 변경하는 데 사용할 ID를 알 수 없습니다. CSS의 ID는 JS에 반드시 설정되지는 않지만 동일한 ID는 페이지에 한 번만 나타날 수 있으며 고유합니다. p+CSS 매니아가 한 페이지에서 동일한 ID를 여러 번 호출할 수 있지만 여전히 페이지 혼동 오류가 없다는 것을 배울 수도 있지만 W3C 및 다양한 표준을 위해 우리는 또한 페이지에서 ID의 고유성을 따라야 합니다. 페이지. 브라우저 호환성 문제를 방지하려면

p CSS 페이지에서 ID를 어떻게 사용하나요?
일반적으로 CSS 스타일을 정의할 때 ID 이름은 "#"으로 시작하는 이름을 지정합니다. 예: #css5{속성: 속성 값;} 이는 클래스 이름이 a로 시작한다는 점을 제외하면 클래스 정의와 약간 비슷합니다. 소문자 마침표 "."이며 ID는 "#"으로 시작하여 정의됩니다. 아이디는 어떻게 사용하나요? CSS에서 ID의 사용법은 클래스의 사용법과 동일합니다. 단지 클래스를 ID로 바꾸면 됩니다. 예: CSS 스타일로 ID 정의 --- #css5{height:25px;width: 200px;}, 호출 ID --- 7125bcc5ac010f7937a4a183e9feac26나는 ID 예시94b3e26ee717c64999d7867364b1b4a3입니다.

다음으로 전체 CLASS 및 ID 예제를 살펴보겠습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>p CSS中CLASS与ID实例 - -p+CSS-www.pcss5.com</title> 
<style> 
.css5{ width:100px; height:100px; border:1px solid #000; float:left; } 
.css5_class{ background:#FFF;} /* 背景白色 */ 
#css5_id{ background:#FF0000;} /* 背景红色 */ 
</style> 
</head> 
<body> 
<p class="css5 css5_class">我在浏览器下浏览，内容背景将是白色</p> 
<p class="css5" id="css5_id">我在浏览器下浏览，内容背景将是红色</p> 
</body> 
</html>

다음으로 위의 예제를 분석해 보겠습니다. class="css5 css5_class" 왜 이런가요? 이는 선택한 클래스 클래스 css5 및 css5_class를 호출하는 것과 같습니다. class="css5" id="css5_id" 여기서는 class class :css5 및 id :css5_id를 호출하도록 선택합니다.

이 페이지에서는 CSS 인스턴스, CLASS 클래스, ID에 대해 각각 설명하고 있으므로 이를 깊이 있게 이해하고 구분할 수 있으며 유연하게 대처할 수 있을 것입니다. 특별 참고 사항: ID 및 클래스 이름을 지정할 때 대소문자에 특히 주의하세요. CSS 클래스 이름을 지정할 때 중국어를 사용하지 않는 것이 가장 좋습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS에서 클래스와 ID의 차이점과 사용법 분석

관련 기사