ev > excel > Html şəklinə necə yazmaq olar. Css istifadə edərək mətni şəklin üzərinə yerləşdirin. Şəkildə mətnin necə yazılacağına dair bir nümunə


Html şəklinə necə yazmaq olar. Css istifadə edərək mətni şəklin üzərinə yerləşdirin. Şəkildə mətnin necə yazılacağına dair bir nümunə




Mən tez-tez dərslərə şərhlərdə və ya forumlarda yeni başlayanlar soruşduqda görürəm: "Mən yazmaq istəyirəm şəkil üzərində mətn, və o, şəklin altında və ya üstündə görünür. Kömək edin." Necə yazılacağına dair konkret bir nümunə götürək şəkil üzərində mətn hər yerdə.

Aşağıdakı təsvirdə hər tərəvəzin yanında onun adını imzalamalıyıq. Tapşırıq sadə görünür, amma inanın ki, istənilən təcrübəsiz vebmasteri dəli edə bilər.

Məsələn, mən qəsdən 1280x733 ölçülü böyük bir şəkil çəkdim ki, onu müxtəlif ekran ölçülərinə uyğunlaşdırmaq olar. Yalnız iş masası qətnamələri üçün çap etməyi öyrənmək üçün kifayət etdiyi günlər geridə qaldı. Layout edərkən dərhal uyğunlaşmaya diqqət yetirməlisiniz.

HTML işarələmə

Əvvəlcə tərəvəz şəkli və yazılar üçün bir qab hazırlayırıq. Nəzərə alın ki, biz hər bir yazını müxtəlif siniflərlə ayrıca blokda yerləşdiririk. Və bu məntiqlidir, çünki bütün etiketlərin səhifədə öz koordinatları olacaq və biz divlərdə xassələri təyin etməklə onları idarə edəcəyik.



soğan

kartof

kök

Bitirdikdən sonra HTML-işarələmə, biz şəklin yalnız bir fraqmentini və şəklin altındakı mətni görürük. Tanış şəkil, elə deyilmi?

Şəkil bütün kifayət qədər böyük piksellərinə keçdi və üfüqi sürüşmə çubuğu meydana çıxdı, lakin xoşbəxtlikdən şəklin enini 100% təyin etməklə bunu düzəltmək asandır və bununla da onu uyğunlaşdıra bilərsiniz. Ən azı bir problem həll edildi.

img(
eni: 100%
}

İndi keçək mətnə.

CSS üslubları

Konteyner üslublarında əmlak əsas olacaq mövqe: nisbi. Bunu etməklə biz qaydaları dəyişirik və koordinatların brauzer pəncərəsinin yuxarı sol küncündən deyil, konteynerin küncündən hesablanmasını xahiş edirik ki, bu da içəridə yerləşdirilmiş bütün elementlər üçün əsas olan və pəncərənin 90%-ni tutur. .

Konteyner(
eni: 90%
mövqe: nisbi;
mətni düzün: mərkəz;
rəng: #000;
şrift ailəsi: arial qara;
şrift ölçüsü: 250%
}

sol (
mövqe: mütləq;
yuxarı: 26%;
sol: 6%
}

Mərkəz (
mövqe: mütləq;
yuxarı: 17%;
sol: 42%;
}

sağ (
mövqe: mütləq;
yuxarı: 1%;
sağ: 27%;
}

Koordinatları piksellərlə deyil,% ilə təyin etdik, ekran ölçüsü azaldıqda, mətn onu düzəltdiyimiz yerdə qalacaq. Bu yaxşı xəbərdir, amma pis xəbər odur ki, mətn ölçüsü şəkillə birlikdə kiçilmir. Şəklin özü kiçildilir, mətn isə məcburi şəkildə kiçildilməlidir.

Media sorğuları

768 pikselə bərabər və ya ondan az qətnamədə şrift ölçüsünü 150%-ə qədər azaldın. Tam olaraq 768 piksel azaltmaq lazım olduğunu necə bildik? Kod müfəttişi vasitəsilə mətnin qonşu elementlərə hansı işarədə atıldığını gördük.

mövqe: qohum; daşqın: gizli;

Lazımsız pikselləri qeyri-bərabər çıxararaq, işıq blokunun yalnız bir hissəsini göstərmək lazımdırsa, əmlakdan istifadə edin. klip: düz (yuxarı, sağ, aşağı, sol); mövqesiz tətbiq olunmayan: mütləq. auto yan tərəfin dəyişməz qaldığını göstərir.

mövqe: qohum;

klip: düz (avtomatik, 200px, avtomatik, 30px);

Mövqe ilə blok qarşılıqlı əlaqə: digər elementlərlə mütləq

Bir blokda bir neçə element yerləşdirə bilərik. Qavrayış asanlığı üçün dəqiqləşdirməyəcəyəm.

A
B

A blokuna mütləq mövqe təyin etsəniz, B bloku A bloku yoxdur kimi yerləşdiriləcək - o, öz yerini tutacaq. A bloku artıq B blokunun mövqeyinə nə vasitəsi ilə, nə də sahəsinə görə təsir edə bilməyəcək, sanki onun üstündə üzür.

A
B

A bloku B bloku ilə üst-üstə düşür. Lakin ikincisi nisbi, mütləq və ya sabit dəyərdə mövqe əlavə edən kimi vəziyyət dəyişir.

mövqe: mütləq;

mövqe: nisbi;


mövqe: mütləq;

mövqe: mütləq;


İndi kodda aşağıda yerləşən blok üstünlük təşkil edəcək, bu halda ağ B. Təbii sıranı dəyişdirmək üçün biz istifadə edirik z indeksi. Bu parametrin dəyəri nə qədər yüksəkdirsə, element bir o qədər yüksəkdir. Yadda saxlamaq lazım olan yeganə şey odur ki, mövqe üçün: statik bu xüsusiyyət nəzərə alınmır (xüsusiyyət istisna olmaqla) və IE mövcuddur.

A
B

Elementlər bir-birinin mövqeyinə təsir edə bilmədiyi üçün, onlar üçün dəyərlər təyin etmədən (və ya dəyərlər eynidirsə) yuxarı, aşağı, sağ, sol və kənar bir-birinin üstündə yerləşir. Və ana blokun hündürlüyü, əgər sabit deyilsə, sıfırdır. Çox şeylər bu prinsipə əsaslanır, o cümlədən.

A
B

eni (en) və mövqeyi: mütləq

genişlik (və ya hündürlük) əksər daxili elementlərə tətbiq edilmir. Defolt olaraq avtomatik olaraq eninə bərabərdir: blok elementi üçün 100%.

Bloklu
Çərşənbə axşamı roen ny

Daxili


Çərşənbə axşamı roen ny

Daxili


eni: 100% hər ikisi üçün, statikdən başqa yerləşdirilmiş ananın enidir.

Bloklu
Çərşənbə axşamı roen ny

Daxili


Genişlik təyin edilməyibsə, lakin sol və sağın əks qiymətlərinin göstəricisi varsa, blok bu iki nöqtə arasında tam genişliyə qədər uzanacaq. Əks halda haqqa məhəl qoyulmayacaq.

Bloklu
Çərşənbə axşamı roen ny

Daxili

Şəkil üzərində mətn yazmaq nümunəsi.

Aşağıdakı nümunələr CSS örtüyünün tətbiqi imkanlarını nümayiş etdirəcək.

Meşə və tarla ağ,
Ağ çəmənlər.
Qarla örtülmüş aspenlərdə
Budaqlar buynuz kimi.

Güclü buzun altında
Çayların suları yuxuya gedir.
Ağ qar yığınları
Damlara qar yağdı.

Ulduzlar səmada parlaqdır
Onlar dairəvi rəqsə rəhbərlik edirlər.
Köhnə il vida edir -
Yeni ili daxil edin.

E. Trutneva.

şeir
müəllif

Bir mətnin digərinin üzərinə necə örtülməsinə misal.

Misal
Nümunə

Misal
Nümunə

HTML-də şəklin üzərinə mətnin necə yerləşdirilməsi nümunəsi

Şəkil üzərində mətni necə yazmaq olar Bu seçim getdikcə populyarlaşır və CSS xassələrindən istifadə edərək bir təbəqənin digərinin üzərinə örtülməsi sayəsində mümkündür.
BAŞLIQşəffaf sahə

Ümumiyyətlə, sualın özü çətin deyil. Bir bloku digərinin üstünə yerləşdirməkdə çətin bir şey yoxdur. Ancaq yenə də bu məsələdə müzakirəyə layiq bir neçə məqam var. Düşünürəm ki, maraqlananlar olacaq.

İdeya sadəcə olaraq şəkil üzərində bəzi mətni ört-basdır etməkdir. Mətn dəyişən uzunluqlu bloklar şəklində təqdim olunur, onun sol tərəfdə yerləşdiyi, mətnin ətrafında hamar bir doldurulması nəzərdə tutulur. Məsələn, bu şəkildəki kimi:

Sənəd sxemi

HTML işarələmə

Parkda film:
Kung Fu Panda

Əlbəttə ki, şəkili fon şəkli kimi göstərmək üçün div elementindən istifadə etmək daha asan olardı, lakin bu halda mən fərz edirəm ki, şəkil sənədin məzmunudur və buna görə də HTML-ə aiddir. Div elementi mətnin mütləq yerləşdirilməsi üçün konteyner kimi istifadə olunacaq.

css

.image (mövqe: nisbi; en: 100%; /* IE 6 üçün */ ) h2 (mövqe: mütləq; yuxarı: 200px; sol: 0; en: 100%; )

Beləliklə, mətni birbaşa şəklin üstünə yerləşdirdik. Növbəti vəzifəmiz mətn üçün fon yaratmaqdır. Elementdən bəri

blok elementidir, biz ondan bu məqsədlər üçün istifadə edə bilmərik. Gəlin daxili elementdən istifadə edək . Başlığın içindəki mətni içinə sarıyaq.

Parkda film:
Kung Fu Panda

Mətni və fonu tərtib etmək üçün bu aralıqdan istifadə edəcəyik:

H2 aralığı (rəng: ağ; şrift: qalın 24px/45px Helvetica, Sans-Serif; hərf aralığı: -1px; fon: rgb(0, 0, 0); /* növbəti sətir işləmədiyi halda */ fon: rgba(0, 0, 0, 0.7); doldurma: 10px; )

Problemlər

Şəkildən göründüyü kimi, sətrin sonunda mətn bloku sətirdəki sonuncu simvoldan dərhal sonra bitir və növbəti sətirdə dərhal sola düzülərək başlayır. Aralıq üçün doldurma xüsusiyyəti, bu halda, bizə kömək etməyəcək.

Problemi həll etmək üçün etiketin hər iki tərəfində əlavə aralıqlardan istifadə etməlisiniz
, bu halda biz artıq paddingdən istifadə edə bilərik.

Parkda film:
Kung Fu Panda

Bu yeni aralıqlarla biz padding xassəsini təyin edəcəyik:

H2 span.spacer ( doldurma: 0 5px; )

Bəs semantika?

Bu mərhələdə dizayn tamamlandı, lakin bir problem qalır. Məhz, yalnız dizayn üçün əlavə edilmiş çoxlu sayda əlavə HTML elementləri. aralıqları nəzərdə tuturam. Bu problemi həll etmək üçün jQuery-dən istifadə edək. Bunu etmək üçün işarələmədəki bütün aralıqları silin və dinamik şəkildə əlavə edin:

Parkda film:
Kung Fu Panda

$(funksiya() ( $("h2").wrapInner(" "); $("h2 br").əvvəl(" ").sonra(" "); });

Mətnin düzülməsini, girintiləri təyin edən HTML teqləri

Tipoqrafiyada istifadə olunan əsaslandırılmış mətn

Aşağıdakı nümunə necə hizalanacağını göstərir mətnin eninə səhifələr:

align="sola" align="sağa"

Hər gün xidmət sektorunda çalışan işçilərin sayı və məlumatların yayılması artır. Əgər ötən əsrlərin simvolları təsərrüfat və fabrik idisə, indiki 21-ci əsrin simvolu informasiya axınına çıxışı olan kompüterlərlə təchiz olunmuş ofisdir.
align="əsaslandırmaq" align="mərkəz"

Hər gün xidmət sektorunda çalışan işçilərin sayı və məlumatların yayılması artır. Əgər ötən əsrlərin simvolları təsərrüfat və fabrik idisə, indiki 21-ci əsrin simvolu informasiya axınına çıxışı olan kompüterlərlə təchiz olunmuş ofisdir.

Hər gün xidmət sektorunda çalışan işçilərin sayı və məlumatların yayılması artır. Əgər ötən əsrlərin simvolları təsərrüfat və fabrik idisə, indiki 21-ci əsrin simvolu informasiya axınına çıxışı olan kompüterlərlə təchiz olunmuş ofisdir.

Əsaslandırma dəyəri vahid təmin edir mətnin sağa və sola düzülməsi, yəni enində. Bu üsul çapda geniş istifadə olunur.

HTML-də mətnin mərkəzə və əsaslandırmaya uyğunlaşdırılması

HTML-də mətni mərkəzə, mətni sağa düzün:

Nəticə:

Atributlar və dəyərlər

  • align="left" - müəyyən edir sol mətn düzülüşü(standart).
  • align = "mərkəz" - mətni mərkəzə uyğunlaşdırır.
  • align="sağa" mətni sağa düzür.

Alignment | HTML mətn abzası

HTML mətni və səhifənin sol tərəfindəki abzas

istehsal edək mətn abzası solda iki şəkildə:

Nəticə:

Yeni pəncərədə baxın.

Bəziləri səhv çıxış yolu tapırlar: onlar qrafik redaktorlarda şəklin üzərinə mətn çəkirlər, sonra isə mətnlə şəkli html sənədlərində yerləşdirirlər. Bəs mətnin dəyişdirilməsi tələb olunarsa? Şəkli yenidən çəkmək? Daha sadə həllər var.

Nəticədə əldə edirik:

Hər yer ağ qarla örtüldü: Ağaclar da, evlər də, Xəfif qanadlı külək fit çalır: “Salam, qış-qış!”

Təqdim olunan metodun mahiyyəti ondan ibarətdir ki, biz şəkil və mətndən ibarət div konteyneri hazırlayırıq. Bu halda, biz mətni konteynerin aşağı sol küncünə nisbətən yerləşdirəcəyik.

html kodu:

Hər yer ağ qarla örtüldü: Ağaclar da, evlər də, Xəfif qanadlı külək fit çalır: “Salam, qış-qış!”

css kodu:

.container ( displey:daxili blok; mövqe:nisbi; ) .konteyner div ( ekran: inline-blok; mövqe: mütləq; alt: 10px; sol: 0px; fon rəngi: rgba(0,0,0,.4 ); dolgu: 5px 5px 5px 10px; rəng: ağ )
  • displey: inline-block - biz konteynerin bütün səhifə boyunca uzanmamasını istəyirik.
  • mövqe: nisbi - bütün yuvalanmış blokları mövqe ilə məcbur edir: onların mövqe koordinatlarını brauzer pəncərəsindən deyil, .container blokundan hesablamaq üçün mütləq.
  • ekran: inline-block - blok elementləri ilə əlaqəli üslublar mətnimizə tətbiq oluna bilsin.
  • mövqe: mütləq - müəyyən koordinatlardan istifadə edərək bloku yerləşdirmək üçün: aşağıdan, soldan - aşağıdan və soldan (koordinatlar) girintilər əvəzinə yuxarıdan (yuxarıdan) və sağdan (sağdan) istifadə etmək mümkündür

Şəklin üzərinə apararkən təsviri göstərin

Yuxarıda göstərilən üsul siçan ilə şəklin üzərinə gətirərkən mətni göstərmək üçün istifadə edilə bilər (onlayn mağazada məhsulları təsvir etmək üçün faydalı ola bilər).