CSS에서 클래스와 ID의 차이점과 사용법 분석-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

不言

Jun 15, 2018 am 09:23 AM

css

이 글은 주로 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에서 "

I am a class example

"로 호출됩니다. 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 ---

나는 ID 예시

입니다.

다음으로 전체 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 중국어 홈페이지를 주목해주세요!

관련 기사

@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?Apr 18, 2025 am 11:34 AM

나는 다른 날이 질문을 받았다. 나의 첫 번째 생각은 : 이상한 질문입니다! 특이성은 선택기에 관한 것이며 At-Rules는 선택기가 아니므로 ... 무의미합니까?

@Media 및 @Support 쿼리를 중첩 할 수 있습니까?Apr 18, 2025 am 11:32 AM

그렇습니다. 당신은 할 수 있습니다. 그리고 그것은 실제로 어떤 순서로 중요하지 않습니다. CSS 전 처리기가 필요하지 않습니다. 일반 CSS에서 작동합니다.

빠른 Gulp 캐시 파열Apr 18, 2025 am 11:23 AM

CSS 및 JavaScript (및 이미지 및 글꼴 등)와 같은 자산에 멀리 떨어진 캐시 헤더를 설정해야합니다. 브라우저를 알려줍니다

CSS의 품질과 복잡성을 모니터링하는 스택을 찾아Apr 18, 2025 am 11:22 AM

많은 개발자들은 CSS 코드베이스를 유지하는 방법에 대해 글을 썼지 만 코드베이스의 품질을 어떻게 측정하는지에 대해 많은 글을 쓰지 않습니다. 물론, 우리는 가지고 있습니다

Datalist는 가치를 시행하지 않고 값을 제안하는 것입니다Apr 18, 2025 am 11:08 AM

짧고 임의의 텍스트를 수락 해야하는 양식이 있습니까? 이름이나 다른 것 같습니다. 정확히 무엇을위한 것입니다. 많은 것이 있습니다

취리히에서 열린 전면 회의Apr 18, 2025 am 11:03 AM

나는 프론트 컨퍼런스를 위해 스위스 취리히로 향하게되어 매우 기쁩니다 (그 이름과 URL을 사랑합니다!). 나는 전에 스위스에 가본 적이 없기 때문에 나는 흥분했다

CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축Apr 18, 2025 am 10:58 AM

소프트웨어 개발에서 제가 가장 좋아하는 개발 중 하나는 서버리스의 출현이었습니다. 세부 사항에 푹 빠지는 경향이있는 개발자로서

NUXT 응용 프로그램에서 동적 경로 생성Apr 18, 2025 am 10:53 AM

이 게시물에서는 들어오는 데이터를 위해 동적 경로를 만드는 방법을 보여주기 위해 NetLify에 구축하고 배포 한 전자 상거래 상점 데모를 사용합니다. 상당히입니다

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.