Span Tag və CSS ilə bir sözün rəngini necə dəyişdirmək olar?

CSS ilə bir sənəddə mətnin rəngini təyin etmək asandır. Sayfanızdaki paragrafların belirli bir renkte görüntülenmesini isterseniz, sadəcə xarici stilinizde belirttiğiniz ve tarayıcınız metinleri seçtiğiniz renkte gösterir. Mətn paraqrafı daxilində yalnız bir söz (və ya bəlkə də bir neçə söz) rəngini dəyişdirmək istədiyiniz zaman nə baş verir? Bunun üçün etiket kimi bir inline element istifadə etməlisiniz.

Nəticədə, bir cümlədə bir sözün və ya sözün kiçik bir qrupunun rəngini dəyişdirmək CSS-dən istifadə etməklə asandır və etiketlər etibarlı HTMLdir, buna görə də bir növ hack olan bu barədə narahat olmayın. Bu yanaşma ilə, köhnəlmiş HTML dövrünün məhsulu olan "yazı tipi" kimi köhnəlmiş yazıları və atributları da istifadə etməyəcəksiniz.

Bu yazı, ehtimal HTML və CSS-yə yeni olan web geliştiricilərinə başlamışdır. Bu, HTML tag və CSS-lərdən səhifələrinizdə xüsusi mətnin rəngini dəyişdirmək üçün necə istifadə edəcəyinizi öyrənməyə kömək edəcəkdir. Yəni, bu metodun bəzi mənfi cəhətləri var və bu məqalənin sonunda əhatə edəcəyəm. İndi bu mətn rəngini dəyişmək üçün addımları öyrənmək üçün oxuyun! Çox asan və təxminən 2 dəqiqə çəkməlidir.

Adım Adım Təlimatı

  1. Sevdiyiniz mətn HTML redaktorunda yeniləmək istədiyiniz veb səhifəni açın. Bu, Adobe Dreamweaver və ya Notepad, Notepad ++, TextEdit və s. Kimi sadəcə mətn redaktoru kimi bir proqram ola bilər.
  2. Sənəddə, səhifədə fərqli rəngdə görünmək istədiyiniz sözləri tapın. Bu təlimçi naminə, mətnin daha böyük bir bəndində olan bəzi sözlərdən istifadə etməyə imkan verir. Bu mətn thetag cütü içərisində olacaq. Rəngini redaktə etmək istədiyiniz iki sözdən birini tapın.
  3. Rəng dəyişdirmək istədiyiniz söz və ya söz qrupundakı ilk hərfdən əvvəl kursorunuzu yerləşdirin. Unutmayın, Dreamweaver kimi WYSIWYG redaktoru istifadə edirsinizsə, indi "kod görünüşü" qurğusunda çalışırsınız.
  4. Rəngini bir sinif özniteliği də daxil olmaqla bir etiket ilə dəyişdirmək istəyirik. Bütün bənd buna bənzəyir: Bu, bir cümlədə əks etdirilən mətndir.
  5. Biz yalnız bir inline element istifadə etdik ki, xüsusi mətni CSS-də istifadə edə biləcəyimiz bir "çəngəl" vermək üçün. Bizim növbəti addım yeni bir qayda əlavə etmək üçün xarici CSS dosyanıza keçməkdir.
  1. Bizim CSS dosyanızda əlavə edək:
    1. fokus-mətn {
    2. rəng: # F00;
    3. }
    4. مور
  2. Bu qayda inline elementin qırmızı rəngdə göstərilməsini təyin edərdi. Sənədimizin mətnini qarağa qoyan bir əvvəlki üslubumuz varsa, bu inline stil span mətninə diqqət yetirmək və fərqli rənglərlə fərqlənir. Biz də bu qayda üçün digər üslubları əlavə edə bilərik, bəlkə də mətni italic və ya cəsarətli şəkildə daha çox vurğulamaq istəyirik?
  3. Sayfanızı saxla.
  4. Qüvvədə olan dəyişiklikləri görmək üçün sevimli veb brauzerinizdə səhifəni sınayın.
  5. Bununla yanaşı, bəzi web mütəxəssisləri və ya tag cütləri kimi digər elementləri istifadə etməyi seçməyi unutmayın. Bu etiketlər, xüsusən, "qalın" və "italik" olmaq üçün istifadə olundu, amma istifadə edilməmiş və əvəz edilmişdir. Etiketlər hələ də müasir brauzerlərdə işləyir, lakin bir çox web developers inline styling kancaları kimi istifadə edirlər. Bu ən pis yanaşma deyil, amma istifadəyə verilməmiş elementlərdən qaçmaq istəsəniz, mən bu cür styling ehtiyacları üçün etiketlə yapışdırmanı təklif edirəm.

İpuçları və izləmək üçün işlər

Bu yanaşma, kiçik bir üslub ehtiyacları üçün yaxşı işləyir, bir sənəddə yalnız bir kiçik mətn parçası dəyişdirməlisinizsə, tez bir zamanda nəzarətdən çıxa bilər. Sayfanızın CSS dosyanızda istifadə etdiyiniz unikal siniflərə sahib olan satır içi elementlərlə dolu olduğunu görürsəniz, səhv edə bilərsən, Unutmayın, səhifənizdə bu etiketlərin daha çoxu nə qədər çətindirsə bu səhifənin irəliləyəcəyini qoruya bilər. Bundan əlavə, yaxşı web tipografi nadir hallarda səhifədə rəngin bir çox variantı və s. Var!