CSS의 세 가지 스타일 메소드(id, class, style) 분석 예-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS의 세 가지 스타일 메소드(id, class, style) 분석 예

黄舟

Jul 20, 2017 am 09:17 AM

class style

세 가지 방법을 사용하여 개체(예: div, 범위, 테이블)에 스타일을 적용할 수 있습니다.

1: #을 사용하여 스타일을 정의하고 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>Id</title> 
<style type="text/css"><!-- 
#STYLE_1 { font-size: 20px; } 
--></style> 
</head> 
<body> 
<div id="STYLE_1">用Id来给对象应用样式</div> 
</body> 
</html>

로그인 후 복사

2: .을 사용하여 스타일을 정의하고, 클래스를 사용하여 개체에 스타일을 적용합니다.
예:

<!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>Id</title> 
<style type="text/css"><!-- 
.STYLE_1 { font-size: 20px; } 
--></style> 
</head> 
<body> 
<div class="STYLE_1">用class来给对象应用样式</div> 
</body> 
</html>

로그인 후 복사

3: 스타일을 정의하지 말고 스타일을 직접 사용하여 개체에 스타일을 적용하세요.
예:

<!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>Id</title> 
</head> 
<body> 
<div style="font-size:20px">用style来给对象应用样式</div> 
</body> 
</html>

로그인 후 복사

이 세 가지 방법을 사용하는 효과는 동일하지만, 우리가 주목해야 할 것은 이 세 가지 방법 사이의 우선순위 문제입니다.
위의 세 가지 방법을 동시에 사용하여 개체의 스타일을 정의하면 어떻게 되나요?
예를 들어 먼저 #STYLE { 글꼴 크기:12px; }을 정의한 다음 .STYLE { 글꼴 크기:14px; 코드는 다음과 같습니다.

<!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>Id</title> 
<style type="text/css"><!-- 
#STYLE { font-size: 12px; } 
.STYLE { font-size: 14px; } 
--></style> 
</head> 
<body> 
<div id="STYLE" class="STYLE" style="font-size:16px">用三种方式同时来给对象应用样式</div> 
</body> 
</html>

로그인 후 복사

이 경우 브라우저는 스타일>id>class라는 세 가지 메소드의 우선순위에 따라 객체에 스타일을 적용합니다. 위의 예에서는 div의 텍스트가 16px 크기로 표시됩니다.

위 내용은 CSS의 세 가지 스타일 메소드(id, class, style) 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7476

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Python에서 클래스와 메서드를 사용하는 방법 Apr 21, 2023 pm 02:28 PM

클래스와 메소드의 개념과 인스턴스 클래스(Class): 동일한 속성과 메소드를 가진 객체의 컬렉션을 설명하는 데 사용됩니다. 컬렉션의 모든 개체에 공통적인 속성과 메서드를 정의합니다. 객체는 클래스의 인스턴스입니다. 메소드: 클래스에 정의된 함수입니다. 클래스 구성 메서드 __init__(): 클래스에는 클래스가 인스턴스화될 때 자동으로 호출되는 init()라는 특수 메서드(구성 메서드)가 있습니다. 인스턴스 변수: 클래스 선언에서 속성은 변수로 표시됩니다. 이러한 변수를 인스턴스 변수라고 합니다. 인스턴스화: 클래스의 특정 개체인 클래스의 인스턴스를 만듭니다. 상속: 즉, 파생 클래스(derivedclass)가 기본 클래스(baseclass)를 상속합니다.

element.style을 수정하는 방법 Nov 24, 2023 am 11:15 AM

요소를 수정하는 방법: 1. 요소의 배경색을 수정합니다. 2. 요소의 글꼴 크기를 수정합니다. 4. 요소의 글꼴 스타일을 수정합니다. . 요소의 수평 정렬을 수정합니다. 자세한 소개: 1. 요소의 배경색을 수정합니다. 구문은 "document.getElementById("myElement").style.BackgroundColor = "red";"입니다. 2. 요소의 글꼴 크기 등을 수정합니다.

파이썬에서 클래스는 무엇을 의미합니까? May 21, 2019 pm 05:10 PM

클래스는 클래스를 정의하는 데 사용되는 키워드입니다. 클래스 뒤에 공백을 추가하고 클래스 이름을 추가합니다. 규칙: 첫 글자가 여러 개인 경우 카멜 표기법을 사용합니다. [class Dog()]와 같은 이름 지정.

반응에서 스타일을 동적으로 수정하는 방법 Dec 28, 2022 am 10:44 AM

스타일을 동적으로 수정하는 반응 방법: 1. 스타일을 수정해야 하는 요소에 "<div className='scroll-titleclear-fix' ref={ this.manage }>"와 같은 구문을 사용하여 ref를 추가합니다. .동적 제어를 통해 상태 변경은 요소의 스타일을 수정합니다. 3. DOM에서 JS 코드를 사용하여 다양한 DOM의 표시 및 숨기기 전환이 실현됩니다.

jQuery를 사용하여 요소의 클래스 이름 바꾸기 Feb 24, 2024 pm 11:03 PM

jQuery는 웹 개발에 널리 사용되는 클래식 JavaScript 라이브러리로, 이벤트 처리, DOM 요소 조작, 웹 페이지에서 애니메이션 수행과 같은 작업을 단순화합니다. jQuery를 사용할 때 요소의 클래스 이름을 바꿔야 하는 상황이 자주 발생합니다. 이 기사에서는 몇 가지 실용적인 방법과 구체적인 코드 예제를 소개합니다. 1. RemoveClass() 및 addClass() 메소드 사용 jQuery는 삭제를 위한 RemoveClass() 메소드를 제공합니다.

Vue3 스타일의 새로운 기능은 무엇이며 어떻게 사용하나요? May 14, 2023 pm 10:52 PM

스타일 Vue3.2 버전의 새로운 기능으로 로컬 스타일, CSS 변수, 템플릿에 노출되는 스타일 등 단일 파일 구성 요소의 스타일이 많이 업그레이드되었습니다. (동영상 공유 학습: vue 동영상 튜토리얼) 1. 로컬 스타일 라벨에 범위 속성이 있는 경우 해당 CSS는 현재 구성 요소의 요소에만 적용됩니다. hi.example{color:red;} 2. 깊이 선택기는 다음과 같습니다. 범위가 지정된 스타일의 선택기가 보다 "깊은" 선택을 하려는 경우, 즉 하위 구성 요소에 영향을 미치려면 :deep() 의사 클래스를 사용할 수 있습니다: .a:deep(.b){/*.. .*/ }v-html을 통해 생성된 DOM 콘텐츠는

PHP 클래스 사용법에 대한 자세한 설명: 코드를 더 명확하고 읽기 쉽게 만듭니다. Mar 10, 2024 pm 12:03 PM

PHP 코드를 작성할 때 클래스를 사용하는 것은 매우 일반적인 관행입니다. 클래스를 사용하면 관련 함수와 데이터를 단일 단위로 캡슐화하여 코드를 더 명확하고, 읽기 쉽고, 유지 관리하기 쉽게 만들 수 있습니다. 이 기사에서는 PHPClass의 사용법을 자세히 소개하고 구체적인 코드 예제를 제공하여 독자가 실제 프로젝트에 클래스를 적용하여 코드를 최적화하는 방법을 더 잘 이해할 수 있도록 돕습니다. 1. 클래스 생성 및 사용 PHP에서는 클래스 키워드를 사용하여 클래스를 정의하고 클래스의 속성과 메서드를 정의할 수 있습니다.

Vue 오류: v-bind를 사용하여 클래스와 스타일을 올바르게 바인딩할 수 없습니다. 어떻게 해결합니까? Aug 26, 2023 pm 10:58 PM

Vue 오류: v-bind를 사용하여 클래스와 스타일을 올바르게 바인딩할 수 없습니다. 어떻게 해결합니까? Vue 개발에서는 클래스와 스타일을 동적으로 바인딩하기 위해 v-bind 지시문을 사용하는 경우가 많지만, 클래스와 스타일을 바인딩하기 위해 v-bind를 올바르게 사용하지 못하는 등의 문제가 발생할 수도 있습니다. 이번 글에서는 이 문제의 원인을 설명하고 해결 방법을 알려드리겠습니다. 먼저 v-bind 지시어를 이해해 봅시다. v-bind는 V를 바인딩하는 데 사용됩니다.

See all articles

CSS의 세 가지 스타일 메소드(id, class, style) 분석 예

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제