Bagaimana untuk memaut css ke html-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk memaut css ke html

王林

Lepaskan： 2023-05-29 15:41:08

asal

5765 orang telah melayarinya

Dalam reka bentuk halaman web moden, CSS (Cascading Style Sheets) digunakan secara meluas untuk mencantikkan dan mereka bentuk gaya dan susun atur halaman web. Biasanya, CSS dipautkan ke dalam dokumen HTML untuk mengawal rupa dan rasa dokumen. Jadi, bagaimana anda memautkan CSS ke HTML? Artikel ini akan memperkenalkan secara ringkas kandungan berikut:

Apakah itu CSS

CSS ialah bahasa yang digunakan untuk mentakrifkan gaya dan reka letak halaman web. Ia biasanya digunakan untuk menentukan gaya warna, saiz, kedudukan, format teks, dsb. elemen halaman web. Sama seperti HTML, CSS ialah bahasa penanda yang terdiri daripada pemilih dan blok pengisytiharan. Pemilih memilih elemen HTML untuk digayakan, dan blok pengisytiharan kemudiannya mentakrifkan gaya dan penampilan elemen tersebut.

Kaedah untuk memautkan CSS dalam HTML

2.1 Helaian gaya luaran

Simpan kod CSS ke dalam fail helaian gaya luaran, dan kemudian gunakannya dalam dokumen HTML Pautkan fail ini ke dokumen HTML melalui tag. Pendekatan ini memastikan gaya dipisahkan sepenuhnya daripada dokumen HTML dan oleh itu lebih boleh digunakan semula. Ini juga merupakan pendekatan yang sering digunakan oleh pembangun web kerana ia menjadikan gaya mudah untuk dikekalkan dan diubah suai. Berikut ialah contoh kod:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan teg <link> untuk mentakrifkan perkaitan antara dokumen dan helaian gaya. Atribut rel digunakan untuk menentukan jenis pautan sebagai "helaian gaya", atribut type digunakan untuk menentukan jenis helaian gaya dan atribut href digunakan untuk menunjukkan laluan ke fail helaian gaya.

2.2 Helaian gaya dalaman

menyimpan kod CSS dalam teg <style> fail HTML. Ini memastikan bahawa dokumen HTML adalah tunggal, tetapi pengubahsuaian dan penyelenggaraan helaian gaya akan menjadi lebih sukar.

<head>
  <style type="text/css">
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>

Salin selepas log masuk

Contoh ini menggunakan teg <style> untuk membenamkan kod CSS terus ke dalam dokumen HTML. Kod CSS boleh disertakan dalam pasangan tag <style> dalam bahagian Apabila menggunakan kaedah ini, gaya akan digunakan pada semua elemen padanan di dalam dokumen HTML, bukannya hanya pada satu elemen. Kelemahan kaedah ini ialah jika anda ingin menukar tema atau menukar gaya, anda mesti mengedit setiap fail HTML.

2.3 Gaya sebaris

Tambahkan kod CSS pada atribut gaya elemen HTML tunggal. Gaya sebaris sering digunakan untuk mengubah suai gaya elemen tunggal, tetapi tidak disyorkan untuk aplikasi yang terlalu rumit dalam helaian gaya.

  <p style="color: red; font-size: 16px;">This is a paragraph.</p>

Salin selepas log masuk

Nota: Dalam gaya sebaris, nilai atribut mesti disertakan dalam petikan berganda.

Ringkasan

Terdapat tiga cara untuk memautkan CSS ke dokumen HTML: helaian gaya luaran, helaian gaya dalaman dan gaya sebaris. Kaedah yang anda pilih bergantung pada keperluan anda. Antaranya, helaian gaya luaran ialah kaedah yang paling biasa digunakan, yang akan menjadikan pembangunan web anda berfungsi dengan lebih cekap dan lebih mudah diselenggara.

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