Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan warna dalam html
Bagaimana untuk menetapkan warna dalam html
- PHPzasal
- 2023-04-21 14:16:2311326semak imbas
HTML ialah bahasa penanda yang digunakan untuk mencipta dan mereka bentuk halaman web. Apabila membuat halaman web, menggunakan warna boleh membantu mereka menjadi lebih menarik dan boleh dibaca. HTML menyediakan banyak cara untuk menetapkan warna. Dalam artikel ini, kita akan belajar cara menetapkan warna menggunakan HTML.
1. Konsep asas warna HTML
Warna HTML biasanya menggunakan mod warna RGB (terdiri daripada nilai kecerahan merah, hijau dan biru). Warna asas diwakili oleh perkataan, seperti "Hitam" untuk hitam, "Putih" untuk putih, "Biru" dan sebagainya. Dalam HTML, anda boleh menggunakan kaedah berikut untuk menetapkan warna:
2. Gunakan nama warna
Dalam HTML, anda boleh terus menggunakan nama warna untuk menetapkan warna. Nama warna termasuk nama warna asas dan beberapa nama warna biasa. Nama warna biasa adalah seperti berikut:
Kod sampel:
<body style="background-color: DodgerBlue;"> <h1 style="color:White;">Hello World!</h1> <p style="color:SlateGray;">This is a paragraph.</p> </body>
3 Gunakan nilai perenambelasan untuk menetapkan warna
Selain menggunakan nama warna, anda boleh. juga menggunakan nilai RGB untuk menetapkan warna. Warna RGB terdiri daripada nilai dari tiga saluran warna: merah, hijau, dan biru, dan nilai setiap saluran diwakili oleh nombor dari 0 hingga 255. Dalam HTML, anda juga boleh menentukan warna menggunakan format heksadesimal (Hex). Nilai heksadesimal bermula dengan simbol #, diikuti dengan 6 digit perenambelasan, di mana dua digit pertama mewakili nilai saluran merah, dua digit tengah mewakili nilai saluran hijau, dan dua digit terakhir mewakili nilai saluran biru . Berikut ialah beberapa nilai heksadesimal biasa untuk warna:
Kod sampel:
<body style="background-color: #1E90FF;"> <h1 style="color:#FFF;">Hello World!</h1> <p style="color:#708090;">This is a paragraph.</p> </body>
Terdapat beberapa kelebihan untuk menetapkan warna menggunakan nilai perenambelasan. Pertama, ia menawarkan lebih banyak pilihan warna. Kedua, menggunakan nilai heksadesimal memastikan konsistensi warna apabila berbilang elemen menggunakan warna yang sama.
4. Gunakan nilai RGB untuk menetapkan warna
Nilai RGB ialah set tiga nombor, mewakili nilai kecerahan setiap saluran warna, yang boleh dipilih antara 0~255. Dalam HTML, anda boleh menggunakan kod berikut untuk menetapkan warna RGB:
Kod contoh:
<body style="background-color: RGB(30,144,255);"> <h1 style="color:RGB(255,255,255);">Hello World!</h1> <p style="color:RGB(112,128,144);">This is a paragraph.</p> </body>
5. Gunakan nilai HSL untuk menetapkan warna
nilai HSL mewakili rona warna, ketepuan dan kecerahan. Dalam nilai HSL, H mewakili warna, S mewakili ketepuan, dan L mewakili kecerahan. Dalam HTML, anda boleh menggunakan kod berikut untuk menetapkan warna HSL:
Kod contoh:
<body style="background-color: hsl(210, 100%, 50%);"> <h1 style="color:hsl(0, 0%, 100%);">Hello World!</h1> <p style="color:hsl(210, 11%, 49%);">This is a paragraph.</p> </body>
6. Gunakan helaian gaya CSS untuk menetapkan warna
Dalam HTML, Anda juga boleh menggunakan helaian gaya CSS untuk menetapkan warna. Lembaran gaya CSS ialah teknologi yang memisahkan maklumat gaya daripada dokumen HTML, membolehkan kami mengedit halaman HTML dengan cara yang lebih jelas dan logik. Berikut ialah beberapa contoh kod:
<head>
<style>
body {
background-color: #1E90FF;
}
h1 {
color: #FFF;
}
p {
color: #708090;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a paragraph.</p>
</body>
Ringkasan:
Terdapat banyak cara untuk menetapkan warna dalam HTML. Menggunakan nama warna memudahkan untuk menetapkan warna asas dan biasa digunakan, menggunakan nilai heksadesimal dan nilai RGB memberikan lebih banyak pilihan warna, dan menggunakan nilai HSL membolehkan kami menetapkan warna dengan lebih tepat. Menggunakan helaian gaya CSS membolehkan kami menetapkan warna dengan lebih mudah dan logik. Kaedah yang berbeza sesuai untuk situasi yang berbeza, dan adalah penting untuk memilih kaedah yang sesuai dengan anda.
Atas ialah kandungan terperinci Bagaimana untuk menetapkan warna dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!