Bisakah saya menautkan file css di badan?

CSS, yang merupakan singkatan dari cascading style sheets, adalah bahasa gaya yang digunakan untuk menampilkan konten di situs web

Table of Contents Show

Kueri media CSS vs. kueri media HTML
Menggunakan kueri media dalam tag HTML <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/> <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/> </head> <body> <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p> </body> </html> _1 untuk memuat style sheet
Lebih dari 200 ribu pengembang menggunakan LogRocket untuk menciptakan pengalaman digital yang lebih baik
Mengevaluasi kueri media bersarang
impor PostCSS
Apakah frontend Anda memonopoli CPU pengguna Anda?
Bagaimana cara menambahkan file CSS ke tag tubuh?
Bagaimana cara menautkan ke file CSS?
Haruskah saya mengimpor CSS di head atau body?

Lembar gaya dapat dimasukkan ke dalam halaman web melalui berbagai cara;

Namun, dalam beberapa kasus, Anda mungkin ingin menggunakan style sheet tertentu hanya jika kondisi yang ditentukan adalah

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>

4. Misalnya, Anda mungkin ingin menerapkan style sheet ramah seluler saat melihat situs di perangkat seluler dan menerapkan versi desktop saat melihat situs di layar desktop

Dalam tutorial ini, kita akan membahas dua cara efektif, menggunakan kueri media dan PostCSS, untuk memuat dan menerapkan style sheet secara selektif serta meninjau beberapa peringatan seputar setiap proses

Kueri media CSS vs. kueri media HTML

Kueri media adalah teknik CSS yang digunakan untuk membuat situs web terlihat bagus di layar apa pun. Ini menggunakan aturan

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>

6 untuk menyertakan blok properti CSS yang dapat diterapkan hanya jika kondisinya adalah

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>

Misalnya, dengan menggunakan aturan

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>

_6 di CSS, Anda dapat menulis kueri media untuk mengatur gaya teks secara berbeda di layar lebih lebar dari 500px dan layar lebih rendah dari 500px

/* text is blue on screens smaller than 500px */
@media (max-width: 500px) {
    p {
       color: blue;
    }
}

/* text is red on screens larger than 500px */
@media (min-width: 500px) {
    p {
       color: red;
    }
}

Kueri media umumnya ditulis dalam lembar gaya, tetapi Anda juga dapat menulis kueri media langsung di dalam markup HTML Anda

Menggunakan kueri media dalam tag HTML <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/> <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/> </head> <body> <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p> </body> </html> _1 untuk memuat style sheet

Tag

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>

1 dalam HTML menetapkan tautan antara dokumen HTML dan sumber daya eksternal, seperti lembar gaya eksternal

Meskipun elemen ini dapat muncul beberapa kali dalam dokumen, elemen ini hanya masuk ke bagian

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>

1 adalah tag kosong, sehingga dapat menampung banyak atribut yang menjelaskan ke browser bagaimana item yang ditautkan berhubungan dengan dokumen yang berisi

Saat bekerja dengan situs web yang kompleks, Anda dapat membuat file CSS yang berbeda, semuanya disesuaikan dengan ukuran atau orientasi layar yang berbeda. Kemudian, dengan menggunakan atribut

p {
  color: blue;
}

_3 pada tag

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>

1, Anda dapat menyiapkan kueri media untuk memuat lembar gaya yang sesuai

Pertimbangkan HTML berikut, misalnya

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>

Inilah gaya untuk

p {
  color: blue;
}

p {
  color: blue;
}

Dan inilah gaya untuk

p {
  color: blue;
}

p {
  color: red;
}

Pada viewports dengan lebar kurang dari 700px, stylesheet

p {
  color: blue;
}

5 akan diterapkan ke dokumen, membuat teks menjadi biru. Saat lebar layar melebihi 699px,

p {
  color: blue;
}

6 akan diterapkan ke dokumen, dan teks akan menjadi merah

Pendekatan ini memberi Anda lebih banyak fleksibilitas dalam mengatur stylesheet Anda. Jadi, alih-alih meletakkan semua gaya dan kueri media Anda di dalam satu file CSS, Anda dapat memecahnya menjadi beberapa file berbeda dan memuatnya langsung dari HTML menggunakan kueri media

Lebih dari 200 ribu pengembang menggunakan LogRocket untuk menciptakan pengalaman digital yang lebih baik

Pelajari lebih lanjut →

Dengan kueri media HTML, kedua file CSS diunduh terlepas dari apakah kueri media dipenuhi atau tidak. Browser harus mengunduh semuanya agar dapat mengevaluasi kembali ketika orientasi berubah. Namun, penguraian CSS yang tidak diinginkan oleh browser tertunda

Namun, dengan kueri media CSS, semua blok gaya diuraikan dan diproses sepenuhnya, baik kueri tersebut dipenuhi atau tidak

Mengevaluasi kueri media bersarang

Saat memuat file CSS melalui HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>

1, style sheet mungkin berisi kueri medianya sendiri

Untuk mendemonstrasikan ini, kami akan menumpuk kueri media lain di dalam

p {
  color: blue;
}

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

Di sini, kami mengatakan bahwa teks akan berubah menjadi hijau saat lebar layar kurang dari 200 piksel. Saat browser kami mengubah ukuran menjadi lebar 200px atau kurang, teks berubah menjadi hijau

Namun, lebarkan layar ke lebar lebih tinggi dari 200px, dan teks akan kembali menjadi biru. Ini menunjukkan bahwa browser juga akan memproses kueri media bersarang apa pun

impor PostCSS

PostCSS menyediakan ekosistem plugin yang luas untuk membantu penulis CSS meningkatkan pengalaman menulis CSS mereka. Ini termasuk plugin yang dapat menggabungkan style sheet dari file CSS yang berbeda ke dalam satu file CSS

Salah satu cara untuk menyiapkan PostCSS di proyek web Anda adalah dengan PostCSS CLI, dan itulah yang akan kami gunakan di sini. Perhatikan, bagaimanapun, bahwa Node dan npm keduanya diperlukan untuk menjalankan PostCSS, jadi pastikan Anda menginstalnya terlebih dahulu

Untuk memulai, mari buat folder

p {
  color: red;
}

1 kosong, lalu

p {
  color: red;
}

2 ke dalam folder dan inisialisasi proyek simpul baru dengan menjalankan

p {
  color: red;
}

3 dari baris perintah. Ini menghasilkan sebuah paket. json di folder

p {
  color: red;
}

_1 kami dengan nilai default

Sekarang, untuk menginstal PostCSS, PostCSS CLI, dan plugin impor PostCSS sekaligus dan menyimpannya sebagai dependensi, gunakan perintah ini

npm i -D postcss postcss-cli postcss-import

PostCSS menggunakan plugin impor PostCSS untuk menggabungkan style sheet yang berbeda dari sumber yang berbeda ke dalam satu file CSS

Misalnya, di dalam folder

p {
  color: red;
}

_5, kita dapat memutuskan untuk mengelompokkan style sheet kita ke dalam folder yang berbeda berdasarkan fungsinya

Lembar gaya yang mengatur ulang dokumen masuk ke folder dasar, lembar gaya yang mendesain komponen UI umum (misalnya,

p {
  color: red;
}

_6 untuk tombol,

p {
  color: red;
}

7 untuk kartu, dan

p {
  color: red;
}

8 untuk formulir) masuk ke folder komponen, dan seterusnya

Pada dasarnya, Anda dapat mengatur stylesheet sesuka Anda

Kemudian, dengan beberapa pengaturan konfigurasi dan perintah CLI, kita dapat memasukkan semua file CSS yang kita perlukan ke dalam satu file CSS tunggal untuk produksi

Untuk referensi, inilah struktur proyek kami saat ini

postcss-demo
├── src
│   ├── base
│         ├── base.css
│         ├── reset.css
│   ├── components
│         ├── button.css
│         ├── card.css
│         ├── form.css
│   ├── utilities
│         ├── container.css
│         ├── margin.css
│         ├── padding.css
│   └── style.css
├── node_modules
├── package.json
└── package-lock.json

Sekarang setelah kami menginstal semua dependensi kami, kami harus menyiapkan file konfigurasi PostCSS
Untuk melakukan ini, buat file

p {
  color: red;
}

_9 langsung di

p {
  color: red;
}

1 (folder root)

Di dalam file ini, kami akan mendaftarkan plugin sehingga kami dapat menggunakannya

module.exports = {
    plugins: [
        require('postcss-import'),
    ]
}

Selanjutnya, di dalam file

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

_1 , kita akan menginstruksikan PostCSS tentang stylesheet apa yang akan diimpor menggunakan direktif

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

@import 'base/base.css';
@import 'base/reset.css';

@import 'components/button.css';
@import 'components/card.css';
@import 'components/form.css';

@import 'utilities/container.css';
@import 'utilities/padding.css';
@import 'utilities/margin.css';

Di sini, kami menentukan jalur relatif ke semua style sheet yang ingin kami impor

Dengan semua arahan dan jalur, mari impor style sheet yang berbeda ini ke

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

3. Untuk melakukannya, buka file

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

_4 dan sertakan skrip berikut di bawah

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

{
  //
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postcss:watch": "postcss src/style.css --dir public"
  },
  //
}

Di sini, kami menentukan apa yang harus dilakukan saat skrip

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

6 berjalan. Selain menjalankan

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

_7, kami memintanya untuk masuk ke folder

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

8 kami, temukan file

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

3, dan kemudian kami menentukan direktori mana yang akan menampilkan lembar gaya gabungan ke

Terakhir, jalankan skrip berikut

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>

Setelah eksekusi berhasil, skrip menghasilkan folder publik dengan file

npm i -D postcss postcss-cli postcss-import

0. File ini berisi semua style sheet yang sebelumnya diimpor ke

npm i -D postcss postcss-cli postcss-import

Oleh karena itu, setiap stylesheet yang diimpor ke

npm i -D postcss postcss-cli postcss-import

2 menghasilkan

npm i -D postcss postcss-cli postcss-import

Kesimpulan

Dalam tutorial ini, kita membahas secara detail dua cara untuk memuat CSS ke dalam halaman web dengan mencakup kueri media dan impor Posting CSS

Kueri media dapat ditulis di dalam CSS dan HTML. Di dalam HTML, tag

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>

1 harus dilengkapi dengan atribut

p {
  color: blue;
}

3 yang berisi kueri media dan tautan URL ke file CSS eksternal, yang berlaku saat kondisi kueri adalah

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>

PostCSS, bagaimanapun, menggunakan plugin impor khusus untuk menggabungkan file CSS yang berbeda menjadi satu file CSS tunggal

Jika Anda memiliki pertanyaan terkait topik ini, beri tahu saya di komentar

Semoga minggumu menyenangkan

Apakah frontend Anda memonopoli CPU pengguna Anda?

Seiring dengan semakin kompleksnya frontend web, fitur yang boros sumber daya semakin menuntut dari browser. Jika Anda tertarik untuk memantau dan melacak penggunaan CPU sisi klien, penggunaan memori, dan lainnya untuk semua pengguna Anda dalam produksi, coba LogRocket.

https. //logrocket. com/signup/

LogRocket seperti DVR untuk aplikasi web dan seluler, merekam semua yang terjadi di aplikasi atau situs web Anda. Alih-alih menebak mengapa masalah terjadi, Anda dapat menggabungkan dan melaporkan metrik kinerja frontend utama, memutar ulang sesi pengguna beserta status aplikasi, mencatat permintaan jaringan, dan menampilkan semua kesalahan secara otomatis

Bagaimana cara menambahkan file CSS ke tag tubuh?

CSS dapat ditambahkan ke dokumen HTML dengan 3 cara. .

Sebaris - dengan menggunakan atribut gaya di dalam elemen HTML

Internal - by using a