HTML-də qalın şriftləri necə etmək olar. CSS qalın şriftdən istifadə edərək qalın və kursiv şriftlərin yaradılması b

02.02.2022

Gəlin html və CSS-dən istifadə edərək qalın şrift düzəltməyin bütün yollarına baxaq. İki seçim var:

Html teqi ilə qalın şrift

Bütün mətn html teqləri və əlavə olunur kök olacaq. Qeyri-adi “b” hərfindən ibarət ilk etiket ingiliscə “bold” sözünün abbreviaturasıdır.

İki etiket arasında vizual fərq yoxdur. SEO optimallaşdırıcıları arasında belə bir fikir var axtarış motorları açar sözü vurğulamaq istədikdə daha çox təsir göstərir.

Adi şrift. b etiketi ilə qalın

Düz mətn.

Səhifədə çevrilir

Adi şrift. b etiketi ilə qalın

Düz mətn. Güclü etiket vasitəsilə qalın mətn

CSS font-weight xüsusiyyəti vasitəsilə qalın şrift

CSS hərflərin qalınlığından məsul olan şrift çəkisi xüsusiyyətinə malikdir.

CSS şrift çəkisi sintaksisi

şrift çəkisi: qalın|daha|daha yüngül|normal|100..900;
  • qalın - qalın şrift dəyəri (analoq 700)
  • normal (standart) - normal şrift dəyəri (400)
  • daha qalın/açıq - şrift valideyndən daha böyük/kiçik olmalıdır
  • miras almaq - əcdadın (valideyn) dəyərini qəbul etmək

Bizim vəziyyətimizdə şriftin qalınlığı üçün şriftə “qalınlıq” vermək üçün qalın xassəni tətbiq etmək lazımdır.

Məsələn:

Текст со свойством font-weight: bold

Преобразуется на странице в

В текущей статье мы поговорим о том, как выделить текст курсивом HTML. Как и в случае с жирным текстом, курсивный текст можно сделать тремя способами:

  • Тег i HTML;
  • Тег em HTML;
  • CSS-свойство font-style .

Рассмотрим все три варианта, как можно сделать курсив в HTML, обсудим тонкости этого вопроса и какие способы удобнее и правильнее использовать в тех или иных ситуациях.

Курсивный текст: тег

Тег i (italic), по аналогии с тегом b для жирного текста, служит для физического выделения курсивного текста (это означает, что изменяется только начертание текста). Применение тега i :

Конструктор сайтов "Нубекс"

Таким образом, нужная часть текста помещается между тегами .

Курсивный текст: тег

Хотя тег i остается валидным, с точки зрения оптимизации сайта лучше использовать тег em для выделения логически важных участков текста. Это означает, что поисковые роботы учитывают важность текста, помещенного между тегами :

Конструктор сайтов "Нубекс"

Результат:

Конструктор сайтов "Нубекс"

Но не стоит забывать, что текст, заключенный в теги i и em , хоть и отображаются практически одинаково (во всех современных браузерах), по своей сути являеются не совсем идентичными, как уже отмечалось выше. Поэтому использовать теги нужно по мере необходимости: тегом em HTML обрамлять важные участки текста, а визуальное курсивное оформление применять с помощью тега i или CSS-стилей. Рассмотрим теперь использование CSS-стилей для курсивного выделения текста.

Курсивный текст силами CSS

Для установления стилей отображения шрифтов в CSS применяется свойство font-style , которое может принимать значения: oblique (наклонный текст), italic (курсив) и normal (обычный шрифт).

Стоит помнить о том, что курсивный шрифт и наклонный , по своей сути, не являются одним и тем же. Курсив - это особый шрифт, который является аналогом рукописного текста, а наклонный формируется посредством наклона обычного шрифта вправо.

Применение атрибута font-style на практике:

Курсив с <a href="https://rembitpro.ru/az/data-recovery/kak-sdelat-kartinku-ssylkoi-v-html-vkontakte-na-forume-i-s-pomoshchyu-css/">помощью CSS</a> - "Нубекс"

Saytlarımız həqiqətəndir böyük addım veb inkişafında.

Biz bunu real edirik keyfiyyət saytlar.



Ancaq yadda saxlamaq lazımdır ki, bəzi brauzerlərdə xüsusiyyətlə mətn var şrift üslubu: oblique; kursiv mətn kimi deyil, kursiv mətn kimi şərh edilə bilər.

Biz şriftlərlə işləməyə davam edirik və bu dərsdə şriftə qalın və ya kursiv görünüş verən xassələrin necə qurulacağına baxacağıq. Əvvəllər necə olduğuna baxdıq qalın və ya kursiv şrift yaradın istifadə etməklə HTML etiketlər Amma artıq bildiyimiz kimi, HTML sənədi tərtib etmək üçün istifadə edilməməlidir, o, yalnız işarələmə və səhifə strukturu yaratmaq üçün nəzərdə tutulub, ona görə də hər şey stil cədvəli vasitəsilə formatlaşdırılmalıdır. CSS. İndi belə xüsusiyyətlərin necə qurulduğuna baxaq.

Kursiv şrift CSS

Mülk mətni kursivlə formatlaşdırmağa kömək edir şrift üslubu: ; , dəyərin təyin olunduğu kursiv , "Şrift Stili - Kursiv" deməkdir.

İndi təsəvvür edək ki, səhifədə çoxlu paraqraflar var və onlardan bəzilərinin kursivlə yazılması lazımdır. Etdiyimiz şey istədiyiniz paraqraf üçün sinif yaratmaq və sonra həmin sinfə malik elementin kursiv olmasını müəyyən etməkdir.

HTML

HTML səhifəsi

Dördüncü abzas Dördüncü abzas Dördüncü abzas



Kursiv şrift üçün xassə təyin edin.

Əgər siz belə paraqraflar yaratmısınızsa və onlar üçün xassə təyin etmisinizsə, onda ikinci abzasın mətni kursiv olub. Biz bu xassəni bütün abzas üçün təyin etdik və indi onu mürəkkəbləşdirək və dördüncü abzasda yalnız iki söz üçün kursiv təyin edək. Bunu necə etmək olar? IN HTML Dərsdə məntiq səviyyəsinin etiketinə baxdıq . Bu teq elementin bəzi hissəsinə sinif təyin edilməli olduğu vəziyyətlər üçün dəqiq istifadə olunur. Beləliklə, biz dördüncü abzasda bir teq yerləşdirdik və ona bir sinif təyin etdik sinif ="kursiv"> . Nəticədə aşağıdakı girişi alırıq:

HTML

Birinci abzas Birinci abzas Birinci abzas Birinci abzas

İkinci abzas İkinci abzas İkinci abzas İkinci abzas

Üçüncü abzas Üçüncü abzas Üçüncü abzas Üçüncü abzas

Dördüncü abzas Dördüncü abzas Dördüncü abzas

Beşinci abzas Beşinci abzas Beşinci abzas Beşinci abzas


Kursiv (şrift üslubu: kursiv; )

İndi ikinci abzas və dördüncü abzasın bir hissəsi kursivlə göstərilir. IN demo bu aydın şəkildə göstərilir.

Qalın CSS şrifti

Qalın şrifti təyin etmək üçün adlanan başqa xüsusiyyətdən istifadə edin font-weight: ; başqa sözlə, buna şrift çəkisi də deyilir. Əvvəlcə doyma təyin edilir normal yəni şriftin doyması normaldır və dəyəri təyin etməklə qalın cəsarətli görkəm alacaq.

Qalın (şrift-ağırlıq: qalın; )

Siz həmçinin rəqəmlərlə doyma dəyərini təyin edə bilərsiniz 100 üçün 900 artımlarla 100 . Mənası normal rəqəmə bərabərdir 400 , və dəyəri qalın rəqəm 700 . Mənası 900 bütün şriftlər tərəfindən dəstəklənmir, ona görə də bu dəyəri təyin etsəniz, dəyərdən fərqi görməyə bilərsiniz 700 . Bu vəziyyət belə görünür:

Qalın (şrift çəkisi: 700; )

IN html kod tam olaraq eyni şeyi edir: bütün paraqrafı seçmək lazımdırsa, ona yeni sinif verin, mətnin bir hissəsidirsə, etiketdən istifadə edin sinif ="kursiv"> . Kiçik bir misala baxaq:

HTML

HTML səhifəsi

Birinci abzas Birinci abzas Birinci abzas Birinci abzas

İkinci abzas İkinci abzas İkinci abzas İkinci abzas

Üçüncü abzas Üçüncü abzas Üçüncü abzas Üçüncü abzas

Dördüncüsü Dördüncü abzas Dördüncü abzas paraqraf

Beşinci abzas Beşinci abzas Beşinci abzas Beşinci abzas



Qalın (şrift çəkisi: qalın; )

Nəticədə dördüncü abzasın eyni zamanda kursivlə yazıldığı qalın mətn hissəsini və beşinci abzasın hamısını vurğuladıq. Bunlar öyrəndiyimiz daha iki xüsusiyyətdir. Onlar olduqca tez-tez istifadə olunur, buna görə də xatırlamağa dəyər:

  • Kursiv şrift müəyyən edilir: şrift üslubu: kursiv; .
  • Qalın şrift təyin edilib: şrift çəkisi: qalın; .
  • Şrifti normal çəkiyə qaytarmaq üçün dəyəri təyin edin: şrift çəkisi: normal; və ya məna şrift çəkisi: 400 ; , bu halda eyni şeyi ifadə edir.

Burada şriftlərin daha iki xüsusiyyətinə nəzər saldıq. Baxın Demo sonunda nə əldə etməli idiniz və biz aşağıdakı xüsusiyyətləri öyrənməyə davam edirik.

Salam, əziz blog oxucuları! Bu məqalə haqqında danışacağıq mətn formatlama teqləri. Əsas nümunələrə mətnin qalın və ya kursiv edilməsi daxildir. Bəzi teqlərin veb saytın daxili optimallaşdırılmasına təsirini və onların yazılması qaydalarına da baxacağıq. Bu barədə verilmiş məqalədə oxuya bilərsiniz. Yeri gəlmişkən, oxşar mətn dizayn elementlərini bir çox mətn redaktorlarında, məsələn, Word-də tapa bilərsiniz.

Teqlər 2 növə bölünür: blok və inline. Birincidən istifadə edərkən mətnin bir hissəsinin məzmununu (sətirlər, ayrı-ayrı fraqmentlər və ya sözlər) dəyişdirə bilərsiniz, ikincisi isə . Bu məqalədə nəzərdən keçirəcəyimiz formatlama teqləri əsasən kiçik hərfdir.

Teqlərin yazılması qaydaları və qaydası

Açılış və bağlanma teqlərinin nə olduğunu artıq bilirsiniz. Əgər yoxsa, bu materialın ən əvvəlində verilmiş məqaləni oxuyun. Bir sözlə, iki növ teq var: tək (məsələn, transfer yeni xətt
) və konteyner (cüt-cüt). Beləliklə, bütün mətn formatlama teqləri var qoşalaşmış. Bu o deməkdir ki, hər hansı elementin açılış və bağlanma etiketi var və vurğu onların arasında yerləşdirilməlidir. Məsələn, düzgün seçim ifadə belə görünəcək: Seçilmiş fraqment

Brauzer bu fraqmenti emal edəndə aşağıdakı mətni görəcəksiniz: Seçilmiş fraqment. Yeri gəlmişkən, bütün etiketlər RSS lentində göstərilmir ().

Teqlər yazarkən əsas odur ki, onları bağlamağı unutmayın. Əks halda, səhifədəki bütün mətn qalın şriftlə vurğulanacaq (teqli nümunədə ). Ancaq eyni zamanda həm qalın, həm də kursivlə müəyyən bir fraqmenti vurğulamaq lazım olduğu hallar var. Ancaq bu hərəkəti yerinə yetirən heç bir etiket yoxdur. Bu vəziyyətdən yalnız bir çıxış yolu var: eyni anda iki etiketdən istifadə edin. Onları hansı ardıcıllıqla istifadə etməyiniz vacib deyil. Buna görə də, belə etiketlərlə mətn yazın:

Seçilmiş fraqment

və ya bu kimi:

Seçilmiş fraqment

Siz hələ də alacaqsınız Seçilmiş fraqment eyni zamanda kursiv və qalın. Bununla belə, birinci variantdan istifadə etmək daha məqsədəuyğundur, çünki əvvəlcə yeganə və düzgün idi. Həm də unutmayın ki, hər bir brauzer parametrlərdən asılı olaraq etiketləri fərqli şəkildə emal edə bilər (). İndi formatlaşdırma etiketlərinin özlərinə keçək.

Qalın və kursiv mətn - teqlər , ,

Ən məşhur mətn formatlama etiketləri - onu vurğulamaq qalınkursiv. Onlar adətən bir fraqmentə əhəmiyyət vermək üçün istifadə olunur. Birinci halda olan fraqmentin seçilməsinə xidmət edir faydalı məlumat və ya açar sözlər. Kursiv qalın mətnlə eyni məqsədə xidmət edir, lakin məlumat daha az əhəmiyyət kəsb edir, çünki kursivlər qalın mətnlə müqayisədə əsas mətnin fonunda daha az nəzərə çarpır.

Əvvəlcə nəzərdən keçirək mətni qalın etmək. Bu əməliyyat üçün istifadə olunan iki teq var - . Fərqlər görünüş yox. Baxmayaraq ki, hər bir brauzer hər bir elementi fərqli şərh edə bilər, siz hər hansı fərqi görə bilərsiniz. Teqlərdəki mətn belə görünür brauzer tərəfindən artıq işlənmiş formada:

Teqlərdəki mətn güclüdür

b teqlərində mətn

Və bu iki sətir səhifənin mənbə kodunda necə görünür:

Teqlərdəki mətn güclüdür b teqlərində mətn

vəziyyətində də eyni vəziyyəti müşahidə edə bilərik kursiv etiketlər . İki nümunə arasındakı fərqləri tapmağa çalışın:

Em teqlərində mətn

Etiketlərdəki mətn I

Amma mənbə kodu:

Em teqlərində mətn Etiketlərdəki mətn I

Beləliklə, qalın və kursiv hesab olunan teqlər əslində fərqli deyil, amma niyə bizə, məsələn, etiket lazımdır varsa ? Axı, sonuncu yalnız bir simvol ehtiva edir (mötərizələri saymadan) və buna görə də yazmaq daha asandır. Və bütün məqam etiketlərin olmasıdır təsir. Açar sözləri bu teqlərlə əhatə etsəniz, bu, veb-saytın tanıtımına faydalı təsir göstərəcək , və etiketdə eyni miqdarda kursiv .

Mətnin bəzi məqamlarını vurğulamaq istəyirsinizsə, etiketdən istifadə edin və ya . Ümumiyyətlə, düşünürəm ki, axtarış sistemləri də bu teqlərdəki mətni daha vacib hesab edirlər, lakin daxili optimallaşdırma daha az təsirə malikdirlər .

Mətni xətt ilə vurğulamaq üçün etiketlər - ,

İndi mətn dizaynında tire istifadə edən bir neçə etiketə baxaq. Sizin üçün ən məşhuru mətn redaktorlarıetiket və ya alt xətt çəkin. Bu etiketin reytinqə təsiri yoxdur (bildiyim qədər), lakin bəzi mətnləri vurğulamaq və diqqəti ona yönəltmək kömək edəcək. Mən yuxarıda bu etiketdən istifadə nümunəsini verdim.

Məqsədinə görə oxşar daha iki etiket - . Hər ikisi mətni cızmaq funksiyasını yerinə yetirir. İstənilən vəziyyətdə bu etiketdən istifadə edə bilərsiniz: əgər siz sənədi (daha doğrusu, onun bir hissəsini) yeniləyirsinizsə, köhnənin üstündən xətt çəkib yenisini əlavə edə bilərsiniz; materialın mövzusundan kənara çıxan bir şey yazmaq niyyətindəsinizsə; əxlaqi və etik standartlara uyğun gəlməyən bir şey.

Bu iki etiket arasındakı fərqlər yalnız onlardadır yazı, bunun nəticəsində birincidən istifadəyə üstünlük verilir, çünki birincisi, yazmaq daha rahatdır, ikincisi, səhifənizdə daha az HTML kodu olacaq və axtarış motorları bunu sevir.

Tag və atributlar - mətn şrift parametrləri

İndi atributlar olmadan istifadə edilməyən etiketi nəzərdən keçirin. Bundan istifadə edərək, müəyyən bir mətn parçası üçün parametrlər təyin edə bilərsiniz. Ümumiyyətlə, indi (kaskad üslub vərəqlərindən) istifadə etməyə üstünlük verilir, çünki... onlardan istifadə edərək, səhifənin bütün HTML kodunu xeyli azalda bilərsiniz. Beləliklə, eyni etiketə baxaq . Onun üçün hər şey mövcuddur üç atribut:

  • üz- şriftin özü. Məsələn, Arial, Courier və ya Verdana. Siz bir neçə sadalaya bilərsiniz, çünki bütün istifadəçilərin geniş şrift dəsti yoxdur və üz atributunda bir neçə yazmaqla brauzer hansının istifadə edəcəyini, daha doğrusu, sistemdə hansının mövcud olduğunu seçə biləcək;
  • ölçüsü— mətn ölçüsünü göstərən atribut. Həm şərti vahidlərlə, həm də piksellərlə ifadə oluna bilər;
  • rəng- mətn rəngi. Bu atribut həm HTML rəng kodlarında, həm də Word kodlarında istifadə edilə bilər. Birincilər #FFFFFF formasına malikdir (burada F A-dan F-ə qədər istənilən rəqəm və ya hərfdir), ikincilər isə yazılır. sadə sözlərlə(məsələn, qırmızı - qırmızı).

Etiketdəki mətn belə görünür hər bir atributdan istifadə edərək:

Bu mətn 6px-dir


Bu mətn qırmızıdır

Bu mətn Arial şriftindədir

Bu mətn qırmızıdır və ölçüsü 5px

Yazılı kodu emal etdikdən sonra görəcəyiniz budur:

Blok mətn dizayn elementləri - başlıqlar

-

, paraqraf

Nəhayət, demək olar ki, hər bir sənəddə istifadə olunan blok elementlərinə baxacağıq. Bunlar başlıq və paraqraf etiketləridir. Birincisini nəzərdən keçirək. 6 növ başlıq var və hər birinin öz etiketi var. Hər növün yalnız öz seriya nömrəsi var və etiketlərdən istifadə etməklə qeyd olunur

,

,...,

. Bütün başlıqlar işlənən zaman belə görünür:

Sözün başlığından sonrakı rəqəm etiketdəki nömrəyə uyğun gəlir . Başlıqlar səhifənin optimallaşdırılmasına böyük təsir göstərir, ona görə də onları etiketlərə sarın açar sözlər. Bu işin bir neçə xüsusiyyəti var ki, onlar haqqında sonrakı məqalələrdə danışacağam.

İndi paraqrafı vurğulayan etiket haqqında danışaq

Bu etiketin funksiyası mətni başqa eyni mətnlə boş sətir arasında ayırmaqdır. Sənədin mənbə koduna baxsanız, aşağıdakıları görə bilərsiniz:

Yaşıl düzbucaqlılar bir abzasdan, qırmızı düzbucaqlılarda başqa bir abzasdan ibarətdir. Bu kod brauzer tərəfindən işləndikdən sonra necə görünür (ox boş sətirə işarə edir):

Nəticədə, bir abzasın digərindən kifayət qədər nəzərə çarpan ayrılmasını əldə edirik, bu faydalıdır - oxumaq daha rahat olur.

Haqqında məqalənin sonu budur sənəd formatlama etiketləri. Bu materialda təsvir etdiyimdən daha çoxu var. Sadəcə, onlardan bəziləri haqqında çox danışmaq lazımdır, nəticədə onlara tam baxışı olan ayrı məqalələr həsr olunacaq!

HTML-də qalın mətn bir neçə yolla hazırlana bilər. Bunlara daxildir:

  • Tag b;
  • Tag güclü;
  • CSS mülkiyyəti şrift çəkisi.

Mətn seçim variantlarının hər biri haqqında sıra ilə danışaq.

Qalın mətn: etiket

Tag b HTML bu şəkildə tətbiq olunur:

Veb sayt qurucusu "Nubex"

Etiket üçün bağlanması olmalıdır, və onun universal atributlara çıxışı var (məsələn sinif, id, başlıq və s.)

Etiketin etibarlılığına baxmayaraq b və HTML spesifikasiyası ilə qınanmır, etiket istifadə üçün daha uyğundur güclü, gəlin bunun səbəbini anlayaq.

Qalın mətn: etiket

HTML spesifikasiyasına görə etiket b qalın hərflərlə mətni vurğulamağa xidmət edir. Bunun əksinə olaraq, etiket güclü HTML vurğulamaq üçün istifadə olunur vacibdir frah, bu səhifə üçün əsas olan sözlər.

Bu etiket səhifələri sıralayarkən mühüm əhəmiyyət kəsb edir axtarış nəticələri Buna görə veb saytın tanıtımı və SEO optimallaşdırılmasında geniş istifadə olunur. Axtarış motorları teqlərə əlavə edilmiş mətni nəzərə alır , və bunu vacib olaraq qeyd edin.

İstifadə olunan etiket güclü oxşar şəkildə:

Veb sayt qurucusu "Nubex"

Siz qeyd edə bilərsiniz ki, etiketlər xaricdən tətbiq olunur heç də fərqli deyil (çünki bütün müasir brauzerlər onları demək olar ki, eyni şərh edir), lakin axtarış motorları üçün kodda semantik fərqlər hələ də mövcuddur. Buna görə də, əksər SEO optimallaşdırıcıları etiketdən istifadə etməyi tövsiyə edir güclü.

CSS istifadə edərək qalın mətn

Etiketin əhəmiyyətini artıq qeyd etdik güclü axtarış motorunun təşviqi zamanı, ancaq vurğulamaq lazımdırsa nə etməli çox sayda Mətn qalındırmı (lakin mətni axtarış motorları üçün vacib kimi qeyd etmək lazım deyil) yoxsa şriftin “qalınlıq” dərəcəsinə nəzarət etmək lazımdır? Belə hallarda CSS xassəsindən istifadə olunur şrift çəkisi. Aşağıdakı kimi tətbiq olunur:

CSS istifadə edərək qalın mətn - "Nubex"

Saytlarımız həqiqətəndir böyük addım veb inkişafında.

Biz bunu real edirik keyfiyyət saytlar.

Bizə etibar edin və biz sizə kömək edəcəyik sizi ruhdan salmayacağıq.



Dəyərlər daha cəsarətlidaha yüngül Siz yağ səviyyəsini valideyndən böyük (və ya daha az) olaraq təyin edə bilərsiniz. Rəqəmsal dəyər(100-900) siz yağ tərkibinin dərəcəsini təyin edə bilərsiniz.