다른 CSS 호출-프런트엔드 Q&A-php.cn

다른 CSS 호출

WBOY

풀어 주다： 2023-05-21 12:01:07

원래의

449명이 탐색했습니다.

HTML은 웹 개발의 중요한 부분으로서 페이지의 콘텐츠 전달자일 뿐만 아니라 구조와 스타일을 정의하는 역할도 합니다. CSS는 페이지의 모양과 스타일을 조작하는 언어로서 웹페이지의 콘텐츠를 더욱 다채롭고 아름답게 만들 수 있습니다.

실제 개발에서는 페이지나 부분마다 다른 스타일을 사용해야 하는 경우가 많습니다. 이때 다른 CSS 파일을 호출해야 합니다. 이 기사에서는 다양한 CSS 파일을 호출하는 방법과 이를 페이지에서 사용하여 스타일을 다양화하는 방법을 소개합니다.

1. 다양한 CSS 파일을 호출하는 방법

링크 태그를 통해 호출

링크 태그를 통해 HTML 헤더에 있는 외부 CSS 파일을 호출할 수 있습니다. 링크 태그에는 href, rel 및 type의 세 가지 속성이 포함되어야 합니다.

구체적인 형식은 다음과 같습니다.

그 중 href는 호출되는 경로를 지정하는 데 사용됩니다. CSS 파일과 rel은 문서와 링크된 문서 간의 관계를 정의하는 데 사용되며 일반적으로 스타일시트로 설정됩니다. type은 링크된 문서의 MIME 유형을 지정하며 일반적으로 text/css로 설정됩니다.

예를 들어 다음 코드를 사용하여 HTML 헤더에서 두 개의 서로 다른 CSS 파일을 호출할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <link href="style1.css" rel="stylesheet" type="text/css" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <title>调用不同CSS文件示例</title>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

로그인 후 복사

이때 style1.css 파일과 style2.css 파일에서 서로 다른 스타일을 정의하고 호출할 수 있습니다. 스타일을 다양화할 수 있는 다양한 페이지.

@import를 통해 호출

링크 태그를 사용하는 것 외에도 @import 메서드를 사용하여 CSS 파일을 호출할 수도 있습니다. CSS 파일에서 @import 문을 사용하여 다른 CSS 파일을 호출할 수 있으며, 호출된 파일의 스타일은 기본 파일의 스타일과 병합됩니다.

구체적인 구문은 다음과 같습니다:

@import url("file path");

예를 들어 메인 스타일 시트 style.css에서 다음 코드를 사용하여 하위 스타일 시트 style2를 로드할 수 있습니다. css:

@import url("style2.css");

로그인 후 복사

이렇게 HTML 페이지에서 style.css를 호출하면 style2.css의 스타일이 자동으로 병합되어 스타일의 다양화를 이룰 수 있습니다.

2. 다양한 CSS 스타일 적용

여러 CSS 파일을 호출한 후 특정 방식으로 다양한 스타일을 사용할 수 있습니다. 아래에서는 일반적으로 사용되는 두 가지 방법을 소개합니다.

id 선택기 사용

HTML 페이지에서 요소에 대한 id 속성을 설정하여 요소에 대한 특별한 CSS 스타일을 설정할 수 있습니다.

예를 들어 style1.css 파일에서 다음 CSS 스타일을 정의할 수 있습니다.

#box {
  width: 200px;
  height: 200px;
  background-color: red;
}

로그인 후 복사

style2.css 파일에서 다음 CSS 스타일을 정의할 수 있습니다.

#box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

로그인 후 복사

그런 다음 HTML 페이지에서 다음을 수행할 수 있습니다. use 다음 코드는 이 두 가지 스타일을 호출합니다.

<!DOCTYPE html>
<html>
<head>
  <link href="style1.css" rel="stylesheet" type="text/css" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <title>调用不同CSS文件示例</title>
</head>
<body>
  <div id="box">样式设置示例</div>
</body>
</html>

로그인 후 복사

이때 페이지를 열면 상자 요소의 배경색이 파란색이 아닌 빨간색임을 알 수 있습니다. HTML에서는 id 선택자가 label 선택자보다 우선순위가 높기 때문에 box 요소는 style1.css에 정의된 스타일을 사용하기 때문입니다.

클래스 선택기 사용

id 선택기와 유사하게 클래스 선택기를 사용하여 요소의 스타일을 설정할 수도 있습니다. 클래스 선택기를 사용하는 경우 CSS 파일에서 스타일을 정의할 때 선택기 앞에 "." 기호를 추가해야 합니다.

예를 들어 style1.css 파일에서 다음 CSS 스타일을 정의할 수 있습니다.

.red-box {
  width: 200px;
  height: 200px;
  background-color: red;
}

로그인 후 복사

style2.css 파일에서 다음 CSS 스타일을 정의할 수 있습니다.

.blue-box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

로그인 후 복사

그런 다음 HTML 페이지에서 다음을 수행할 수 있습니다. use 다음 코드는 이 두 가지 스타일을 호출합니다.

<!DOCTYPE html>
<html>
<head>
  <link href="style1.css" rel="stylesheet" type="text/css" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <title>调用不同CSS文件示例</title>
</head>
<body>
  <div class="red-box">样式设置示例</div>
  <div class="blue-box">样式设置示例</div>
</body>
</html>

로그인 후 복사

이때 페이지를 열면 첫 번째 상자 요소의 배경색이 빨간색이고 두 번째 상자 요소의 배경색이 파란색임을 알 수 있습니다. 이는 HTML에서 클래스 선택기가 id 선택기보다 우선순위가 낮지만 레이블 선택기보다 우선순위가 높기 때문에 첫 번째 상자 요소는 style1.css에 정의된 스타일을 사용하고 두 번째 상자 요소는 style2에 정의된 스타일을 사용하기 때문입니다. .css.

3. 요약

웹 개발 시 스타일 설정을 통해 페이지를 더욱 아름답고 알아보기 쉽게 만들 수 있습니다. 다양한 CSS 파일을 호출하면 다양한 페이지에서 다양한 스타일을 사용하여 다양한 효과를 얻을 수 있습니다. 여러 CSS 파일을 호출한 후 ID 선택기 또는 클래스 선택기를 사용하여 다양한 스타일을 사용하여 다양한 요소의 스타일 요구 사항을 충족할 수 있습니다. 따라서 CSS 파일의 합리적인 호출과 사용은 웹 개발에 있어서 중요한 지식 포인트 중 하나입니다.

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