Dengan CSS , mudah untuk menetapkan warna teks dalam dokumen. Jika anda ingin perenggan di halaman anda diberikan dalam warna tertentu, anda hanya menyatakan bahawa dalam helaian gaya luaran anda dan penyemak imbas akan memaparkan teks anda dalam warna yang dipilih. Apa yang berlaku kemudian apabila anda mahu menukar warna hanya satu perkataan (atau mungkin hanya beberapa perkataan) dalam perenggan teks? Untuk itu, anda perlu menggunakan elemen sebaris seperti tag.
Pada akhirnya, mengubah warna kata tunggal atau sekumpulan kata kecil dalam kalimat mudah menggunakan CSS, dan tag adalah HTML yang sah, jadi jangan risau tentang ini menjadi sejenis hack. Dengan pendekatan ini, anda juga mengelakkan menggunakan teg dan atribut seperti "font", yang merupakan hasil daripada era HTML yang lalu.
Artikel ini adalah untuk memulakan pemaju web yang mungkin baru untuk HTML dan CSS. Ia akan membantu anda mempelajari cara menggunakan tag HTML dan CSS untuk menukar warna teks tertentu pada halaman anda. Bahawa dikatakan, terdapat beberapa kelemahan untuk kaedah ini, yang akan saya tutup pada akhir artikel ini. Buat masa ini, baca terus untuk mempelajari langkah-langkah untuk mengubah warna teks ini! Ia sangat mudah dan perlu mengambil kira-kira 2 minit.
Langkah demi Arahan Langkah
- Buka halaman web yang anda mahu kemas kini dalam editor HTML teks kegemaran anda. Ini boleh menjadi program seperti Adobe Dreamweaver atau editor teks mudah seperti Notepad, Notepad ++, TextEdit, dll.
- Dalam dokumen, cari kata-kata yang anda ingin paparkan dalam warna yang berbeza pada halaman. Demi tutorial ini, mari gunakan beberapa perkataan yang ada dalam perenggan teks yang lebih besar. Teks itu akan terkandung dalam pasangan pasangan tersebut. Cari salah satu daripada dua perkataan yang warna anda ingin diedit.
- Letakkan kursor anda sebelum huruf pertama dalam perkataan atau kumpulan perkataan yang anda mahu tukar warna. Ingat, jika anda menggunakan editor WYSIWYG seperti Dreamweaver, anda sedang bekerja dalam rigth "view code" sekarang.
- Biarkan bungkus teks yang warnanya ingin kita ubah dengan tag, termasuk atribut kelas. Seluruh perenggan mungkin kelihatan seperti ini: Ini adalah teks yang difokuskan pada ayat.
- Kami baru saja menggunakan elemen inline, yang, untuk memberikan teks tertentu itu "cangkuk" yang boleh kita gunakan dalam CSS. Langkah seterusnya adalah untuk melompat ke fail CSS luaran kita untuk menambah peraturan baru.
- Dalam fail CSS kami, mari tambahkan:
- .focus-text {
- warna: # F00;
- }
- Gg
- Peraturan ini akan menetapkan bahawa elemen dalam baris, yang, untuk dipaparkan dalam warna merah. Jika kami mempunyai gaya terdahulu yang menetapkan teks dokumen kami kepada hitam, gaya inline ini akan menyebabkan teks span difokuskan dan menonjol dengan warna yang berbeza. Kami juga boleh menambah gaya lain untuk peraturan ini, mungkin membuat teks miring atau berani untuk menekankan lebih banyak lagi?
- Simpan halaman anda.
- Uji laman dalam pelayar web kegemaran anda untuk melihat perubahan yang berlaku.
- Perhatikan bahawa selain itu, sesetengah profesional web memilih untuk menggunakan elemen lain seperti pasangan tag atau tag. Teg ini digunakan untuk "bold" dan "italics" secara khusus, tetapi telah ditamatkan dan digantikan dengan dan. Tag masih berfungsi dalam penyemak imbas moden, bagaimanapun, begitu banyak pemaju web menggunakannya sebagai cangkuk styling sebaris. Ini bukan pendekatan yang paling teruk, tetapi jika anda ingin mengelakkan unsur-unsur yang tidak digunakan, saya cadangkan melekat dengan tag untuk keperluan gaya ini.
Tips dan Perkara Yang Dapat Diamati Untuk
Walaupun pendekatan ini berfungsi dengan baik untuk keperluan gaya kecil, seperti jika anda perlu mengubah hanya sekeping kecil teks dalam dokumen, ia dapat dengan cepat dapat mengawal. Jika anda mendapati bahawa halaman anda dipenuhi dengan unsur-unsur sebaris, semuanya mempunyai kelas yang unik yang anda gunakan dalam fail CSS anda, anda mungkin melakukan salah, Ingat, semakin banyak tag ini yang berada di halaman anda, semakin sukar mungkin akan mengekalkan halaman itu ke hadapan. Selain itu, tipografi web yang baik jarang mempunyai banyak variasi warna, dan lain-lain di seluruh halaman!