CSS를 호출하는 방법-프런트엔드 Q&A-php.cn

CSS를 호출하는 방법

WBOY

풀어 주다： 2023-05-27 11:39:07

원래의

796명이 탐색했습니다.

CSS(Cascading Style Sheets)는 웹 페이지 스타일을 정의하는 데 사용되는 언어로 웹 페이지의 레이아웃, 색상, 글꼴 등을 제어할 수 있습니다. 웹페이지 제작에서는 일반적으로 웹페이지의 스타일 효과를 얻기 위해 CSS 파일과 HTML 파일을 결합해야 합니다. 그럼 이제 CSS를 호출하는 방법에 대해 이야기해 보겠습니다.

내부 스타일 시트

내부 스타일 시트는 HTML 파일의 헤드에 CSS 스타일을 정의하여 쉽게 전환할 수 있도록 하고 해당 코드를 HTML 파일에 삽입하는 방식입니다. 이 방법은 현재 페이지에만 필요한 특정 스타일에 적합하며 다음과 같이 호출됩니다.

<head>
    <title>我的页面</title>
    <style>
        /* CSS样式代码 */
    </style>
</head>

로그인 후 복사

외부 스타일 시트

외부 스타일 시트는 다른 파일에 정의된 후 전달되는 CSS 스타일입니다. HTML 파일 링크는 파일의 메소드를 참조합니다. 이 방법은 여러 페이지에 동일한 스타일이 필요한 상황에 적합하며 다음과 같이 호출됩니다.

(1) CSS 파일에 스타일 코드 정의

/* style.css */
body {
    background: #f6f6f6;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 14px;
}

h1 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

로그인 후 복사

(2) HTML 파일에 CSS 파일 연결

<head>
    <title>我的页面</title>
    <link rel="stylesheet" href="style.css">
</head>

로그인 후 복사

인라인 스타일 시트

인라인 스타일 시트는 CSS 스타일을 HTML 태그에 직접 작성하는 방법입니다. 이 방법은 하나의 태그에 대해서만 스타일을 정의하면 되는 상황에 적합합니다. 호출 방법은 다음과 같습니다.

<h1 style="color:red;">这是一个标题</h1>

로그인 후 복사

스타일 시트 가져오기

스타일 시트 가져오기는 다른 파일에 CSS 스타일을 정의하고 그런 다음 이 파일을 다른 CSS 파일로 가져오는 방법에 전달합니다. 이 방법은 외부 스타일 시트 구조와 유사하지만 호출 방법이 약간 다릅니다.

(1) main.css 파일에 style.css 파일을 도입합니다.

/* main.css */
@import url('style.css');

/* 下面是对样式的调用 */
body {
    margin: 0;
}

.container {
    width: 960px;
    margin: 0 auto;
}

로그인 후 복사

(2) HTML 파일

<head>
    <title>我的页面</title>
    <link rel="stylesheet" href="main.css">
</head>

로그인 후 복사

Inherited Styles

Inherited styles은 상위 태그의 스타일을 하위 태그에 적용하는 방법입니다. 이 방법은 요소의 스타일이 동일한 상황에 적합하며, 상위 태그의 스타일로 코드를 단순화할 수 있습니다. 예:

div {
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #333;
}

h1 {
    font-size: 24px;
    font-weight: bold;
}

/* 这里的h1将继承div中的color和font-family */

로그인 후 복사

요약하자면 CSS를 호출하는 방법은 다양하며 실제 필요에 따라 다양한 호출 방법을 선택할 수 있습니다. 웹 페이지 제작 시 적절한 CSS 호출 방법을 사용하면 웹 페이지 스타일의 효과를 더 잘 얻을 수 있고 사용자 경험을 향상시킬 수 있습니다.

위 내용은 CSS를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!