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

집

웹 프론트엔드

CSS 튜토리얼

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

黄舟

Jul 20, 2017 am 09:17 AM

classstyle

세 가지 방법을 사용하여 개체(예: 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으로 문의하세요.

관련 기사