cari
Rumahhujung hadapan webtutorial cssCSS文件中如何引入另一个CSS文件?(代码示例)

我们可以使用@import规则来实现CSS文件中如何引入另一个CSS文件,@import规则可以在主HTML文件或主CSS文件中导入多个CSS文件,本篇文章就来给大家具体介绍一下,希望对大家有所帮助。

CSS文件中如何引入另一个CSS文件?(代码示例)

@import规则

首先我们来了解一下@import规则。

@import规则用于将一个样式表导入到另一个样式表中。此规则还支持媒体查询,以便用户可以导入与媒体相关的样式表。在任何@charset声明之后,必须在文档的顶部声明@import规则。【视频教程推荐:CSS教程

@import的特点:

 ●   @import规则用于将样式表导入HTML页面或其他样式表。

 ●   @import规则也用于添加媒体查询,因此import是依赖于媒体的。

 ●   @import规则总是在文档的顶部声明。

基本句式:

@import url | string list-of-mediaqueries;

url | string:表示要导入的资源的位置,可以是相对的或绝对的。

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>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)的情况下 

CSS文件中如何引入另一个CSS文件?(代码示例)

 style2.css文件:

 body { 
    background:gainsboro; 
        opacity: 0.5; 
} 
h1{
color: #008000;
}

输出:在style1.css文件中使用@import规则导入 style2.css文件

CSS文件中如何引入另一个CSS文件?(代码示例)

说明:使用@import规则导入另一个CSS样式表有两种方法:@import url(style2.css);@import "style2.css";

注:使用@import规则导入另一个CSS样式表时,需要注意样式表的路径。

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目!!!

Atas ialah kandungan terperinci CSS文件中如何引入另一个CSS文件?(代码示例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Draggin ' dan Droppin ' dalam ReactDraggin ' dan Droppin ' dalam ReactApr 17, 2025 am 11:52 AM

Ekosistem React menawarkan kita banyak perpustakaan yang semuanya memberi tumpuan kepada interaksi seret dan penurunan. Kami mempunyai React-Dnd, React-Beautiful-Dnd,

Perisian CepatPerisian CepatApr 17, 2025 am 11:49 AM

Terdapat beberapa perkara yang saling berkaitan dengan perisian cepat sejak kebelakangan ini.

Kecerunan bersarang dengan klip latar belakangKecerunan bersarang dengan klip latar belakangApr 17, 2025 am 11:47 AM

Saya tidak boleh mengatakan saya menggunakan klip latar belakang semua yang kerap. Saya ' Tetapi saya diingatkan dalam jawatan oleh Stefan Judis,

Menggunakan RequestAnimationFrame dengan cangkuk ReactMenggunakan RequestAnimationFrame dengan cangkuk ReactApr 17, 2025 am 11:46 AM

Animasi dengan RequestAnimationFrame semestinya mudah, tetapi jika anda belum membaca dokumentasi React dengan teliti maka anda mungkin akan mengalami beberapa perkara

Perlu tatal ke bahagian atas halaman?Perlu tatal ke bahagian atas halaman?Apr 17, 2025 am 11:45 AM

Mungkin cara paling mudah untuk menawarkan kepada pengguna adalah pautan yang mensasarkan ID pada elemen. Begitu seperti ...

API terbaik (graphql) adalah salah satu yang anda tulisAPI terbaik (graphql) adalah salah satu yang anda tulisApr 17, 2025 am 11:36 AM

Dengar, saya bukan pakar GraphQL tetapi saya suka bekerja dengannya. Cara ia mendedahkan data kepada saya sebagai pemaju front-end cukup sejuk. Ia seperti menu

Berita Platform Mingguan: Bookmarket Jarak Teks, Menunggu Tahap Teratas, Penunjuk Memuatkan AMP BaruBerita Platform Mingguan: Bookmarket Jarak Teks, Menunggu Tahap Teratas, Penunjuk Memuatkan AMP BaruApr 17, 2025 am 11:26 AM

Pada minggu ini, roundup, sebuah bookmarklet yang berguna untuk memeriksa tipografi, menggunakan menunggu untuk mengamuk dengan cara modul JavaScript mengimport satu sama lain, ditambah Facebook ' s

Pelbagai kaedah untuk mengembangkan kotak semasa memelihara jejari sempadanPelbagai kaedah untuk mengembangkan kotak semasa memelihara jejari sempadanApr 17, 2025 am 11:19 AM

Saya baru -baru ini melihat perubahan yang menarik pada Codepen: apabila melayang pena di laman web, ada persegi panjang dengan sudut bulat yang berkembang di belakang.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual