Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk menulis css luaran

Bagaimana untuk menulis css luaran

PHPz
Lepaskan: 2023-04-23 17:32:00
asal
3867 orang telah melayarinya

Dengan pembangunan berterusan reka bentuk web dan teknologi pembangunan, CSS (Cascading Style Sheets) telah menjadi bahasa reka bentuk web yang penting. Melalui CSS, kami boleh mengawal gaya halaman web dengan mudah untuk mencapai reka bentuk web yang lebih baik. Dalam pembangunan sebenar, kami biasanya meletakkan fail CSS secara luaran. Jadi, mari kita bincangkan cara menulis CSS luaran.

1. Cipta fail CSS

Pertama, kita perlu mencipta folder CSS dalam direktori akar tapak web dan mencipta fail CSS di dalamnya. Adalah disyorkan untuk menggunakan nama yang bermakna untuk nama fail untuk memudahkan pengurusan sendiri dan orang lain.

2. Sambungkan fail CSS

Dalam fail HTML, kita perlu merujuk gaya CSS dengan menyambungkan fail CSS. Kita boleh menggunakan pautan luaran (pautan) atau gaya sebaris (gaya).

  1. Kaedah pautan luaran
<link rel="stylesheet" href="样式文件路径">
Salin selepas log masuk

Antaranya, atribut rel merujuk kepada hubungan antara helaian gaya dan dokumen, biasanya "lembaran gaya" digunakan untuk mewakili helaian gaya; atribut href merujuk kepada alamat helaian gaya. Laluan fail gaya adalah relatif kepada fail HTML dan boleh menjadi laluan mutlak atau laluan relatif.

Contohnya:

<link rel="stylesheet" href="css/style.css">
Salin selepas log masuk
  1. Mod gaya sebaris
<style type="text/css">
    样式内容
</style>
Salin selepas log masuk

Antaranya, atribut jenis merujuk kepada jenis fail gaya , biasanya " text/css"; kandungan gaya ialah sekeping kod CSS.

Contohnya:

<style type="text/css">
    body {
        background-color: gray;
    }
</style>
Salin selepas log masuk

3. Menulis gaya CSS

Cara menulis gaya CSS dalam fail CSS dan cara menggunakan tag gaya untuk menulis gaya CSS dalam fail HTML serupa. Kita boleh menggunakan pemilih CSS untuk memilih bahagian yang perlu diubah suai, dan kemudian menggunakan sifat CSS dan nilai atribut untuk menetapkan gaya.

Contohnya:

body {
    background-color: gray;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}
Salin selepas log masuk

Dalam kod di atas, kami memilih elemen kandungan keseluruhan halaman dan menetapkan warna latar belakang, saiz fon dan gaya fonnya.

4. Kelebihan

Menggunakan fail CSS luaran boleh membawa faedah berikut:

  1. Struktur dan gaya yang berasingan. Meletakkan peraturan gaya dalam fail berasingan membolehkan pengaturcara menumpukan pada penstrukturan kod dan gaya pemformatan.
  2. Pembentangan yang berbeza. Laman web/halaman yang berbeza boleh berkongsi jenis fail gaya untuk mengekalkan rupa dan rasa bersatu di tapak web.
  3. Kurangkan pertindihan kerja. Jika berbilang halaman mempunyai gaya yang sama, kami hanya perlu mentakrifkannya sekali dalam satu fail CSS.
  4. Tingkatkan kebolehgunaan semula fail. Fail CSS boleh dikongsi antara berbilang halaman Web, meningkatkan kebolehgunaan semula fail CSS.

5. Ringkasan

Di atas ialah kaedah penulisan dan kelebihan CSS luaran. Sudah tentu, dalam pembangunan sebenar, kita perlu memberi perhatian kepada ejaan laluan fail dan nama fail untuk mengelakkan ralat seperti 404. Di samping itu, kita juga mesti menyesuaikan diri dengan ciri-ciri susun atur penyesuaian untuk menulis gaya CSS. Melalui amalan dan pembelajaran berterusan, kami boleh meningkatkan kualiti kod secara berterusan, mengoptimumkan pengalaman pengguna dan mencapai reka bentuk web yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menulis css luaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan