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

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

黄舟

풀어 주다： 2017-07-20 09:17:45

원래의

2242명이 탐색했습니다.

세 가지 방법을 사용하여 개체(예: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!