@import 규칙을 사용하여 다른 CSS 파일을 CSS 파일에 도입하는 방법을 구현할 수 있습니다. @import 규칙은 여러 CSS 파일을 기본 HTML 파일 또는 기본 CSS 파일로 가져올 수 있습니다. 모든 사람에게 도움이 되기를 바랍니다.
@import 규칙
먼저 @import 규칙을 이해해 봅시다.
@import 규칙은 한 스타일 시트를 다른 스타일 시트로 가져오는 데 사용됩니다. 이 규칙은 사용자가 미디어 관련 스타일 시트를 가져올 수 있도록 미디어 쿼리도 지원합니다. @import 규칙은 @charset 선언 이후 문서 상단에서 선언되어야 합니다. [동영상 튜토리얼 추천: CSS 튜토리얼]
@import 기능:
● @import 규칙은 스타일 시트를 HTML 페이지나 다른 스타일 시트로 가져오는 데 사용됩니다.
● @import 규칙은 미디어 쿼리를 추가하는 데도 사용되므로 가져오기는 미디어에 따라 다릅니다.
● @import 규칙은 항상 문서 상단에 선언됩니다.
기본 문장 패턴:
@import url | string list-of-mediaqueries;
url | 문자열: 가져올 리소스의 위치를 나타내며 상대적이거나 절대적일 수 있습니다.
list-of-mediaqueries: URL 링크에 정의된 CSS 규칙의 적용을 결정합니다.
코드 예제
아래에서는 예제를 사용하여 다른 CSS 파일을 CSS 파일에 도입하는 방법을 보여줍니다.
HTML 부분: index.html이라는 파일 만들기
<!DOCTYPE html> <html> <meta charset="UTF-8"> <link rel="stylesheet" href="style1.css" /><!--在HTML文件中导入style1.css文件--> <head> <body> <div class="box"> <h1 id="PHP中文网">PHP中文网</h1> <p>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p> </div> </body> </html>
CSS 부분:
style1.css 파일:
/*导入另一个CSS文件 */
@import "style2.css"; /* 或者@import url(style2.css);*/
.box{
width: 400px;
margin: 100px auto;
}
h1 {
color:red;
text-align: center;
}
p {
color:black;
padding: 10px;
background-image: linear-gradient(to right, #fbd6d3, #ff1200);
position:static;
}출력: @import 규칙을 사용하지 않고 다른 CSS 파일(style2) 가져오기 .css )
style2.css 파일:
body {
background:gainsboro;
opacity: 0.5;
}
h1{
color: #008000;
}출력: style1.css 파일의 @import 규칙을 사용하여 style2.css 파일을 가져옵니다.
지침: @import 사용 규칙을 사용하여 다른 CSS 스타일 시트를 가져오는 두 가지 방법: @import url(style2.css); 및 @import "style2.css";
참고: @import 규칙을 사용하여 다른 CSS 스타일 시트를 가져오는 경우 이렇게 하려면 스타일 시트의 경로에 주의를 기울여야 합니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! !
위 내용은 다른 CSS 파일을 CSS 파일에 도입하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。
css与xml的区别是什么Apr 24, 2022 am 11:21 AM区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。
css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。
css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。
css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。
rtl在css是什么意思Apr 24, 2022 am 11:07 AM在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。
怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
뜨거운 주제
1371
523819