Span Tag va CSS bilan bir so'zning rangini qanday o'zgartirish mumkin

CSS bilan matndagi matnning rangini sozlash oson. Agar siz sahifangizdagi paragraflarni ma'lum bir rangda ko'rsatishni xohlasangiz, uni tashqi stil sahifangizda ko'rsatasiz va brauzer matnni tanlangan rangga ko'rsatadi. Matn parchasi ichida bitta so'zning rangini (yoki bir necha so'zni) o'zgartirmoqchi bo'lganingizda nima bo'ladi? Buning uchun tag kabi taglavhali elementni ishlatish kerak bo'ladi.

Natijada, bir so'zning yoki so'zning kichik bir qismini rangi CSS da ishlatish bilan osonlashtiradi va teglar haqiqiy HTML hisoblanadi, shuning uchun bu qandaydir hack bo'lishidan xavotirlanmang. Ushbu yondashuv bilan, eski HTML davrining mahsuloti bo'lgan "shrift" kabi eskirgan teglar va atributlardan foydalanmasligingiz ham mumkin.

Ushbu maqola HTML va CSS uchun yangi bo'lgan veb-ishlab chiquvchilarni boshlash uchun. HTML-ga va CSS-ga sizning sahifalaringizdagi muayyan matn rangini o'zgartirish uchun qanday qilib foydalanishni o'rganishga yordam beradi. Aytish joizki, ushbu uslubning ba'zi kamchiliklari mavjud bo'lib, men ushbu maqolaning oxirini qamrab olaman. Hozir ushbu matn rangini o'zgartirish bo'yicha qanday qadamlarni o'rganish uchun o'qing! Bu juda oson va taxminan 2 minut o'tishi kerak.

Asta-sekin ko'rsatma

  1. O'zingiz yoqtirgan matn HTML tahrirlovchisida yangilashni xohlagan veb-sahifani oching. Bu Adobe Dreamweaver yoki oddiygina Notepad, Notepad ++, TextEdit va boshqalar kabi dastur bo'lishi mumkin.
  2. Hujjatda, sahifadagi boshqa rangda aks ettirmoqchi bo'lgan so'zlarni toping. Ushbu o'quv qo'llanmasi uchun matnning katta qismida joylashgan ba'zi so'zlarni ishlatish imkonini beradi. Ushbu matn, thetag jufti ichida joylashgan bo'ladi. Rangini o'zgartirishni istagan ikki so'zdan birini toping.
  3. Kursorni so'zning birinchi harfidan yoki rangni o'zgartirmoqchi bo'lgan so'zlar guruhidan oldin qo'ying. Esingizda bo'lsa, Dreamweaver kabi WYSIWYG tahrirlovchisi foydalanayotgan bo'lsangiz, hozirda "kod ko'rinishida" foydalanishda harakat qilyapsiz.
  4. Rangini tag xususiyatiga ega bo'lgan yorliq bilan o'zgartirmoqchi bo'lgan matni o'ramoq. Barcha xat shunday bo'lishi mumkin: Bu jumlaga qaratilgan matn.
  5. Biz maxsus matnni CSS-da ishlatishimiz mumkin bo'lgan "kanca" ni berish uchun faqatgina ichki elementni ishlatdik. Keyingi qadamimiz yangi qoidalar kiritish uchun tashqi CSS faylga o'tish.
  1. CSS faylida quyidagilarni qo'shishimiz mumkin:
    1. fokus-matn {
    2. rang: # F00;
    3. }
    4. مور
  2. Bu qoida, satr elementi, qizil rangda ko'rsatilishini belgilaydi. Agar hujjatimizning matnini qora rangga aylantiradigan avvalgi uslubimiz bo'lsa, bu satr ichidagi uslub tarozi matnini e'tiborga olib, turli xil rang bilan ajralib turadi. Bundan tashqari, ushbu qoidaga boshqa uslublarni qo'shishimiz mumkin, ehtimol matnni shunchaki itoatkor yoki qalin qilib yanada ko'proq ta'kidlash mumkinmi?
  3. Sahifangizni saqlang.
  4. O'zgarishlarni ko'rish uchun sevimli veb-brauzeridagi sahifani sinab ko'ring.
  5. Shunga qaramay, ba'zi veb-mutaxassislar yoki tag-juftlar kabi boshqa elementlardan foydalanishni tanlashni unutmang. Ushbu teglar "qalin" va "kursiv" lar uchun ishlatilgan, lekin ular eskirgan va o'zgartirilgan va. Teglar hali ham zamonaviy brauzerlarda ishlaydi, biroq ko'plab veb-ishlab chiquvchilari ularni inline uslublar kancalari sifatida ishlatadi. Bu eng yomon yondashuv emas, lekin agar siz eskirgan elementlardan qochmoqchi bo'lsangiz, men bunday uslublar ehtiyojlari uchun yorlig'i bilan yopishtirishni taklif qilaman.

Maslahatlar va narsalarni tomosha qilish uchun

Ushbu yondashuv kichik uslublar ehtiyojlari uchun yaxshi ishlayotgan bo'lsa-da, xuddi hujjatda faqat bitta kichik matnni almashtirish kerak bo'lsa, uni tezda nazoratdan chiqarib olishingiz mumkin. Agar sizning sahifangiz satr ichidagi ma'lumotlar bilan to'ldirilganligini ko'rsangiz, ularning barchasi CSS dosyaningizda foydalanadigan noyob sinflarga ega bo'lsa, siz noto'g'ri qilmoqchi bo'lishingiz mumkin, esingizda bo'lsinki, sizning sahifangizda yozilgan ushbu teglar qanchalik ko'p bo'lsa, unib-chi bu sahifani oldinga siljitish uchun foydalanish mumkin. Bundan tashqari, yaxshi veb-tipografiya juda kamdan-ko'p rang varianti va boshqalar.