Bagaimana untuk menggunakan css dalam html

HTML dan CSS ialah dua teknologi teras reka bentuk web moden HTML digunakan untuk mencipta kandungan halaman web, manakala CSS digunakan untuk gaya dan reka letak. Dalam artikel ini, kami akan mempelajari cara menggunakan CSS pada halaman HTML supaya anda boleh mula menambahkan sentuhan yang cantik dan diperibadikan pada tapak web anda.

1. Memperkenalkan fail CSS

Langkah pertama dalam menggunakan CSS dalam halaman HTML ialah memperkenalkan fail CSS ke dalam fail HTML anda. Ini boleh dicapai dengan menambahkan elemen pautan pada pengepala HTML. Elemen ini perlu menunjuk ke lokasi fail CSS anda, seperti ini:

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

2. Gunakan CSS pada elemen HTML

Setelah fail CSS anda dibawa masuk dengan betul Dalam halaman HTML anda, anda boleh mula menggunakan gaya CSS pada elemen HTML anda. Anda boleh menggunakan pelbagai pemilih untuk memilih elemen dan kemudian menggunakan atribut gaya padanya, contohnya:

h1 {
  color: red;
  text-align: center;
  font-size: 36px;
}

Pemilih gaya CSS ini digunakan pada semua elemen h1 pada halaman. Ia menukar warna teks elemen kepada merah, memusatkan teks dan menukar saiz fon elemen.

3. Gaya Bersarang

Anda boleh menambah gaya pada mana-mana elemen dengan menyarangkan pengisytiharan gaya satu elemen dalam pengisytiharan gaya elemen lain. Sebagai contoh, anda boleh mencondongkan semua teks yang ditekankan dalam perenggan dan menukar warnanya kepada biru:

p em {
  font-style: italic;
  color: blue;
}

Sekarang, semua teg e388a4556c0f65e1904146cc1a846bee di dalam teg 907fae80ddef53131f3292ee4f81644b Semua teks akan muncul dalam huruf condong dan dalam biru.

4. Pemilih Kategori

Pemilih kategori ialah pemilih yang boleh digunakan untuk menggayakan berbilang elemen daripada jenis yang sama. Dengan pemilih gaya CSS bernama kelas, anda boleh menggunakan gaya yang sama pada semua elemen dalam kategori. Berikut ialah contoh pemilih kategori:

.blue-text {
  color: blue;
}

Pemilih gaya ini mentakrifkan kelas yang dipanggil "teks biru". Untuk menggunakan gaya jenis ini, anda hanya perlu memberikan kelas ini kepada elemen yang diingini:

<p class="blue-text">这段文字会变成蓝色的。</p>

Nota: Dengan menggunakan atribut kelas, dalam halaman yang sama, anda boleh menetapkan berbilang kelas yang berbeza dan Berikannya kepada elemen HTML yang berbeza apabila diperlukan. Anda juga boleh menggabungkan berbilang kelas bersama-sama untuk menetapkan gaya yang lebih kompleks, jadi pastikan anda menggunakannya dengan baik.

5. Pemilih lain

CSS mempunyai banyak pemilih lain, termasuk pemilih ID, pemilih keturunan, pemilih anak, pemilih kelas pseudo, dsb. Pemilih ini berguna apabila anda perlu menggayakan elemen tertentu. Berikut ialah pengenalan kepada pemilih lain:

• Pemilih ID: Dengan mentakrifkan ID, anda boleh menggayakan elemen tertentu pada halaman.
• Pemilih turunan: digunakan untuk memilih unsur turunan unsur yang ditentukan.
• Pemilih anak: Serupa dengan pemilih keturunan, tetapi ia hanya memilih elemen anak langsung.
• Pemilih kelas pseudo: digunakan untuk memilih elemen dalam keadaan tertentu, seperti tuding, akses atau keadaan yang dipilih.

6. Model Kotak CSS

Model kotak CSS ialah konsep asas untuk meletakkan dan meletakkan elemen web. Model ini menerangkan kotak di sekeliling elemen HTML, yang merangkumi bahagian yang berbeza seperti kawasan kandungan, padding, jidar dan jidar.

Anda boleh mengawal reka letak elemen HTML anda dengan tepat dengan menetapkan saiz dan kedudukan setiap kotak. Berikut ialah beberapa sifat yang biasa digunakan dalam model kotak CSS:

• saiz kotak: Tetapkan model kotak elemen.
• lebar: Tetapkan lebar elemen.
• tinggi: Tetapkan ketinggian elemen.
• margin: Tetapkan jidar elemen.
• lapik: Tetapkan pelapik elemen.
• sempadan: Tetapkan sempadan elemen.

Anda boleh menggunakan sifat ini untuk meletakkan dan melaraskan pelbagai elemen pada halaman web anda untuk mencapai gaya dan reka letak yang anda inginkan.

Ringkasan

Dalam artikel ini, kami telah memperkenalkan cara menggayakan elemen HTML menggunakan CSS. Anda boleh menggunakan CSS dengan mencipta fail CSS dan memautkannya ke halaman HTML. Anda kemudian boleh menggunakan pemilih untuk menggunakan gaya yang berbeza pada setiap elemen. Anda juga boleh menggunakan model kotak CSS untuk menyusun dan mengawal elemen pada halaman. Menguasai kemahiran ini akan membolehkan anda mencipta halaman web yang boleh anda banggakan dengan reka bentuk laman web yang cantik dan diperibadikan.

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