CSS가 페이지에서 사용되는 세 가지 방법: 인라인 스타일, 내장 스타일 시트, 링크된 스타일 시트

2024-07-12

페이지에서 CSS 스타일을 사용하는 방법에는 인라인 스타일, 포함된 스타일 시트, 링크된 스타일 시트의 세 가지 방법이 있습니다.

1. 인라인 스타일

인라인 스타일은 HTML 태그 내에서 직접 정의되고 스타일 속성을 통해 구현되는 비교적 직접적인 스타일입니다. 이 방법은 배우기 쉽지만 그다지 유연하지는 않습니다.

【예】인라인 스타일을 적용하여 페이지를 제어합니다.


<!-- 在页面元素中定义CSS样式 -->
<p style="font-size: 36px; color:red">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 24px; font-weight: bold;">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 18px; font-style: italic">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 14px; text-decoration: line-through;">您好，欢迎访问 pan_junbiao的博客</p>

결과:

2. 내장된 스타일 시트

내장된 스타일 시트 사용 <style>...</style> 태그에는 페이지에 CSS 스타일이 포함됩니다. 인라인 스타일 시트의 형식은 인라인 스타일만큼 직접적이지는 않지만 페이지는 더 규칙적입니다.

【예】포함된 스타일 시트를 사용하여 페이지 스타일을 지정하세요.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>
    
    <!-- 内嵌式样式表 -->
    <style type="text/css">
        h1, h2, h3{
            font-family: Tahoma, Geneva, sans-serif; /*定义字体*/
            color: blue; /*文字颜色*/
        }
    </style>
</head>
<body>
    <h1>大风起兮云飞扬</h1>
    <h2>威加海内兮归故乡</h2>
    <h3>安得猛士兮守四方</h3>
</body>
</html>

결과:

3. 링크된 스타일시트

외부 CSS 스타일 시트에 연결하는 것은 스타일 시트를 참조하는 가장 일반적인 방법입니다.먼저 CSS 스타일을 별도의 파일로 정의한 다음 HTML 페이지에 전달합니다.<link> 이를 참조하는 태그는 CSS 스타일을 사용하는 가장 효율적인 방법입니다.

<link>태그의 구문 구조는 다음과 같습니다.

<link rel='stylesheet' href='path' type='text/css'>

rel: 외부 문서와 호출 문서 간의 관계입니다.

href: CSS 문서의 절대 또는 상대 경로입니다.

유형: 외부 파일의 MIME 유형

【예】페이지에서 CSS 스타일을 참조하세요.

(1) css 디렉터리를 생성한 후 해당 디렉터리에 css.css 스타일 파일을 생성합니다.


/*定义CSS样式 */
h1,h2,h3{								
    color:#6CFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
 
p{
    color:#F0CC;	/*定义颜色*/
    font-weight:200;
    font-size:24px;	 /*设置字体大小*/
}

(2) 페이지에 전달<link> 태그는 CSS 스타일 파일을 페이지에 소개합니다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>
 
    <!--页面引入CSS样式表-->
    <link rel="stylesheet" type="text/css" href="/css/css.css">		
</head>
<body>
    <h2>春夜喜雨</h2>
    <p>好雨知时节，当春乃发生。</p>
</body>
</html>

결과:

4. 스타일시트 호출의 우선순위

스타일시트 호출의 우선순위는 다음 원칙을 따릅니다.

(1) 인라인 스타일에 정의된 스타일이 가장 높은 우선순위를 갖습니다.

(2) 다른 스타일은 HTML 파일에 나타나거나 참조되는 순서대로 근접 원칙을 따릅니다. 텍스트에 가까울수록 우선순위가 높습니다.

(3) 선택자의 우선순위는 자손 선택자, 클래스 선택자, ID 선택자 순으로 우선순위가 낮습니다.

(4) 어떤 파일에도 정의되지 않은 스타일은 브라우저의 기본 스타일을 따릅니다.

기술나눔