CSS의 세 가지 스타일 메소드(id, class, style) 분석 예
- 黄舟원래의
- 2017-07-20 09:17:452154검색
세 가지 방법을 사용하여 개체(예: 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으로 문의하세요.