Stillərin kaskadlı cədvəlləri
CSS məsləhətlər & üsullar

Bu sənəd məqalənin tərcüməsidir "Web Style Sheets CSS tips & tricks".
Sənədin original versiyası mövcüddür yalnız W3C saytında http://www.w3.org/Style/Examples/007/figures.html
Bü tərcümə rəsmi W3C sənəddi DEYIL.
Bütün Müəllif Hüqüqları W3C Malikdir.
Bu sənəddə tərcümə tərcümə səhvləri və mətbəə xətaları ola bilər.

Müəllif: Sabir Sabutai (bütün tərcümələr müəllifindir)
Lokal versiya: http://www.carionltd.com/Style/Example007/figures.html

(Bu səhifə CSS stillərin kaskadlı cədvəllərini istifadə edir)

Təsvirlərin əlavə edilməsi

Şəkilin ölçüsü

Şəkilin yuxarıda adı yazılması

XHTML

Şəkillər & təsvirlər

Eiffel tower

Mini Parkda (Fransa) Eyfel qalasının dairələnmiş modeli

HTML-da elementlər yoxdur ki, sənədə adli şəkili qoymaq olsun. Bunu HTML3-də etmək olar, ancaq HTML4-də yox. HTML4-də bunu etmə üçün yeganəı imkan var:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">

  <p>Mini Parkda (Fransa) Eyfel qalasının dairələnmiş modeli
</div>

Sonra stillər cədvəlində sizə lazım olan kimi fiquranı formatlaşdırmaq üçün "figure" sinfindən istifadə edin. Məsələn, fiquranı yerləşdiyi pataqrafın eninin 25% təşkil edən məsafə sağa köçürtmək üçün bu addımarı atmalısınız:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

Faktiki olaraq, yalnız birinci iki təyinlər (float və width) lazımdır, qalanlar isə dekorasiya tərtibatı üçündür.

Şəkilin ölçüsü

Burada yalnız bir problem var – şəkil artıq geniş ola belər. Belə halda şəkil həmişə 136 piksel enliyi və DIV - 25% əhatə edən mətndən. Və pşncərəni kiçik etsəniz şəkil sığışmaya bilər və DIV çərçivədən kənara çıxa bilər (bunu yoxlayın!).

Sənəddə olan şəkillərin enliyini bilirsinizsə, DIV minimum enliyini belə əlavə edə bilərsiniz:

DIV.figure {
  min-width: 150px;
}

Digər yol şkilin özünün ölçüsünü dəyişməkdir. Biz bunu sağda olan şəkillə etdik. Gördüyünüz kimi, brauzerin pəncərəsini artıq geniş etsəniz JPEG şəkili çoxda yaxşı ölçüsünü dəyişməyəcək. Lakin bu şəkil dioqram və ya formatlı SVG qrafikdirsə, ölçünün dəyişdirilməsi yaxşı işləyir. Bu istifadə etdiyimiz nişan vurmalardır:

<div class="figure">
  <p><img class="scaled" src="http://www.w3.org/Style/Examples/007/st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez və axşam işığında onun qalası
</div>

St. Tropez

Saint Tropez və axşam işığında onun qalası

Bu isə həmin şəkil üçün stillər cədvəlidir:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

Yeganə əlavə: bu üsul şəkili DIV imkan verən qədər geniş edir (border və padding içərisində səth).

Təsvirin yuxarıda adı yazılması

Cap Ferrat

Cap Ferrat yanında Aralıq dənizi

Brauzerə desez ki, şəkil cədvəl kimi formatlaşdırılıb, siz hətta təsviri şəkilin yuxarısında yerləşdirə bilərsiniz. Sadəcə əvvəlki bölmədəki stillər cədvəlinə bu qaydanı əlavə edin:

div.figure p {
  display: table-cell;
  width: 100%;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

'+' onu deməkdir ki, qayda P elementinə təsir edir, hansı ki digər P ardınca gəlir. Bu da onu deməkdir ki, şərt ikinci P elementinə təsir edir, hansında ki şəkilin təsviri var.

(Bu şəkil bəzi brauzerlərdə baqlara gətirib çıxara bilər, xüsusən şəkillərin ölçüsünü dəyişməklə kombinasiyada, yuxarıda göstərilən kimi.)

XHTML-da şəkillər

Carı (yanvar 2003) XHTML2-üçün təklifərdə CAPTION elementi var, hansı ki OBJECT ilə istifadə edilə bilər. Əgər bu təklif qəbul edilsə, DIV və CLASS istifadə etməyə ehtiyac olmayacaq və nəhayət ki XHTML2-da yaza biləcəksiniz:

<object data="eiffel.jpg">
  <caption>Min Parkda (Fransa) Eyfel qalasının dairələnmiş modeli</caption>
</object>

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Sənəd yaradılıb 17 yanv. 2001;
Son dəyişikliklər $Date: 2007/07/20 16:11:22 $ GMT