Bagaimana untuk menetapkan gaya CSS untuk badan halaman web?

Dalam reka bentuk web, kami sering menggunakan CSS untuk mengawal gaya halaman web. Antaranya, menetapkan gaya untuk badan halaman web adalah operasi yang sangat asas Operasi ini bukan sahaja boleh mengubah atribut penampilan seperti warna latar belakang dan gaya fon halaman web, tetapi juga mempengaruhi susun atur dan penataan web. muka surat. Artikel ini akan memberi anda pemahaman yang mendalam tentang cara menetapkan gaya CSS untuk badan halaman web.

1. Apakah kandungan halaman web?

Sebelum memperkenalkan cara menetapkan gaya CSS untuk badan halaman web, anda perlu memahami isi halaman web terlebih dahulu. Dalam istilah awam, badan adalah kandungan utama halaman web dan bekas akar semua elemen halaman web yang kita lihat. Pada halaman HTML, teg badan terletak selepas teg kepala dan dalam teg html.

2. Bagaimana untuk menetapkan gaya CSS untuk badan halaman web?

Dengan menetapkan gaya CSS badan, kami boleh mengawal kebanyakan sifat penampilan dan reka letak halaman web. Di bawah, kami memperkenalkan cara menetapkan sifat yang berbeza satu demi satu.

1. Tetapkan warna latar belakang

Dalam CSS, untuk menetapkan warna latar belakang badan, kita perlu menetapkan sifat warna latar belakang kepada nilai warna. Contohnya, untuk menetapkan warna latar belakang kepada kelabu, anda boleh menggunakan kod berikut:

body {
  background-color: gray;
}

Anda boleh mendapati bahawa "badan" di sini merujuk kepada elemen badan dalam halaman web dan kod dalam kurungan kerinting adalah definisi gaya. Antaranya, warna latar belakang merujuk kepada atribut warna latar belakang, dan kelabu ialah nilai warna.

2. Tetapkan imej latar belakang

Jika anda ingin menetapkan imej latar belakang untuk halaman web, kami boleh menggunakan atribut imej latar belakang. Sebagai contoh, kita boleh menetapkan imej latar belakang halaman web kepada gambar bernama "background.jpg":

body {
  background-image: url('background.jpg');
}

Seperti yang anda lihat, imej latar belakang di sini perlu ditentukan menggunakan alamat URL. Dalam contoh ini, kami menggunakan petikan tunggal untuk membungkus alamat imej.

3. Tetapkan fon

Untuk menetapkan fon dalam halaman web, kita perlu menggunakan atribut keluarga fon. Dalam atribut ini, kita boleh menentukan satu atau lebih nama fon sebagai fon lalai untuk halaman web. Contohnya, kod berikut menetapkan fon lalai untuk halaman web kepada Arial:

body {
  font-family: SimSun, Arial, sans-serif;
}

Di sini, kami menggunakan koma untuk memisahkan berbilang nama fon. Penyemak imbas akan cuba memuatkan fon ini mengikut susunan yang kami senaraikan. Jika fon pertama gagal dimuatkan, penyemak imbas akan cuba menggunakan fon kedua.

4. Tetapkan saiz fon

Jika anda ingin menukar saiz fon dalam halaman web, anda boleh menggunakan atribut saiz fon. Di sini, kita boleh menetapkan nilai piksel mutlak, atau menggunakan saiz relatif yang lebih abstrak. Sebagai contoh, kod berikut menetapkan saiz fon dalam halaman web kepada 16 piksel:

body {
  font-size: 16px;
}

Sebagai alternatif, anda boleh menetapkan saiz fon kepada saiz relatif menggunakan kod berikut:

body {
  font-size: medium;
}

Dalam contoh ini, kami menetapkan saiz fon kepada saiz relatif "sederhana". Dengan cara ini, kita dapat memastikan saiz fon sesuai dengan tabiat membaca kebanyakan orang.

5. Tetapkan ketinggian baris

Jika anda ingin menukar jarak antara baris teks dalam halaman web, anda boleh menggunakan atribut ketinggian baris. Dalam sifat ini kita boleh menetapkan nilai piksel mutlak atau menggunakan saiz relatif yang dikira daripada saiz fon. Contohnya, kod berikut menetapkan ketinggian garisan kepada 1.6 kali ganda saiz fon:

body {
  line-height: 1.6;
}

6. Tetapkan warna teks

Untuk menukar warna teks dalam halaman web , anda boleh menggunakan sifat warna. Sifat ini menerima nilai warna sebagai parameter input. Sebagai contoh, kod berikut menetapkan warna teks dalam halaman web kepada hitam:

body {
  color: black;
}

7. Tukar penjajaran teks

Jika anda perlu menjajarkan ke kiri atau pusat teks dalam halaman web Atau dijajar kanan, anda boleh menggunakan atribut penjajaran teks. Contohnya, kod berikut boleh memusatkan teks dalam halaman web secara mendatar:

body {
  text-align: center;
}

8. Tetapkan pelapik halaman

Jika anda perlu meninggalkan sedikit ruang di sekeliling web halaman untuk kandungan Untuk mencipta sedikit jarak dari tetingkap penyemak imbas, anda boleh menggunakan atribut padding. Sebagai contoh, kod berikut akan meninggalkan 100 piksel ruang putih di sekeliling halaman web:

body {
  padding: 100px;
}

3. Ringkasan

Dengan menetapkan gaya CSS badan halaman web, kami boleh mengawal penampilan dan susun atur halaman web Cara. Antaranya, kita boleh menukar warna latar belakang, gaya fon, warna teks, penjajaran, pengisian dan sifat-sifat lain halaman web. Melalui tetapan gaya CSS asas ini, kami boleh mencipta penampilan unik untuk halaman web dan meningkatkan pengalaman akses pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan gaya CSS untuk badan halaman web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!