Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Введение в Web-дизайн. Учебное пособие
.pdf
__________________________________________________________________________________
Ɏɪɟɣɦɵ
81
10.8. Ɏɪɟɣɦɵ
Ɏɪɟɣɦ (ɨɬ ɚɧɝɥɢɣɫɤɨɝɨ ɫɥɨɜɚ Frame) - ɪɚɦɤɚ, ɱɚɫɬɶ ɰɟɥɨɝɨ, ɨɤɧɨ.
Ɏɪɟɣɦɵ ɪɚɡɛɢɜɚɸɬ ɜɢɞɢɦɨɟ ɧɚ ɷɤɪɚɧɟ ɢɡɨɛɪɚɠɟɧɢɟ ɧɚ ɧɟɫɤɨɥɶɤɨ ɱɚɫɬɟɣ (ɨɤɨɧ, ɪɚɦɨɤ, ɹɱɟɟɤ). ȼ ɤɚɠɞɨɦ ɨɤɧɟ ɦɨɠɟɬ ɛɵɬɶ ɪɚɡɦɟɳɟɧ ɞɨɤɭɦɟɧɬ ɫ
ɫɨɛɫɬɜɟɧɧɵɦ ɞɨɦɟɧɧɵɦ ɚɞɪɟɫɨɦ. Ɏɪɟɣɦɵ ɞɚɸɬ ɜɨɡɦɨɠɧɨɫɬɶ ɜ ɨɞɧɨɦ ɨɤɧɟ
ɪɚɫɩɨɥɚɝɚɬɶ ɬɟɤɭɳɭɸ (ɢɡɦɟɧɹɸɳɭɸɫɹ) ɢɧɮɨɪɦɚɰɢɸ, ɚ ɜ ɞɪɭɝɨɦ ɨɤɧɟ ɨɬɨɛɪɚɠɚɬɶ ɦɟɧɸ. ɗɬɨ ɩɨɡɜɨɥɹɟɬ ɥɟɝɤɨ ɩɟɪɟɦɟɳɚɬɶɫɹ ɩɨ ɫɚɣɬɭ, ɛɥɚɝɨɞɚɪɹ ɬɨɦɭ,
ɢ
ɱɬɨ ɩɪ
ɩɨɫɬɨɹɧɧɨ ɜɢɞɢɦɵɦɢ.
ɰɵ, ɤɨɬɨɪɵɟ ɪɚɫɩɨɥɨɠɟɧɵ ɜ ɪɚɡɧɵɯ ɩɚɩɤɚɯ, ɧɚ ɪɚɡɧɵɯ ɫɚɣɬɚɯ ɢ ɞɚɠɟ - ɧɚ
ɪɚɡɧɵɯ ɫɟɪɜɟɪɚɯ.
ɜ ɩɨɢɫɤɨɜɵɯ ɦɚɲɢɧɚɯ. Ɋɨɛɨɬ, ɨɬɵɫɤɚɜ ɧɭɠɧɵɟ ɤɥɸɱɟɜɵɟ ɫɥɨɜɚ, ɞɚɟɬ ɫɫɵɥɤɭ
ɧɚ ɟɞɢɧɫɬɜɟɧɧɵɣ ɮɪɟɣɦ. ɉɨɷɬɨɦɭ ɩɨɥɶɡɨɜɚɬɟɥɢ ɜɢɞɹɬ ɧɚɣɞɟɧɧɭɸ ɫ ɩɨɦɨɳɶɸ
ɩɨɢɫɤɨɜɨɣ ɫɢɫɬɟɦɵ ɫɬɪɚɧɢɰɭ ɛɟɡ ɷɥɟɦɟɧɬɨɜ ɧɚɜɢɝɚɰɢɢ. ɗɬɨ ɧɟ ɩɨɡɜɨɥɹɟɬ
ɩɨɥɶɡɨɜɚɬɟɥɸ ɩɨɥɭɱɢɬɶ ɩɨ
ɩɪɨɫɦɨɬɪɟɬɶ ɫɨɞɟɪɠɢɦɨɟ ɞɪɭɝɨɣ Web-ɫɬɪɚɧɢɰɵ. Ɍɚɤɚɹ ɤɨɧɫɬɪɭɤɰɢɹ ɧɚɡɵɜɚɟɬɫɹ ɜɫɬɪɨɟɧɧɵɦ ɮɪɟɣɦɨɦ.
ɒɢɪɢɧɚ ɮɪɟɣɦɚ (width) ɡɚɞɚɧɚ ɜ ɨɬɧɨɫɢɬɟɥɶɧɵɯ ɟɞɢɧɢɰɚɯ (70% ɨɬ ɲɢɪɢɧɵ
ɨɤɧɚ). ȼɵɫɨɬɚ ɮɪɟɣɦɚ (height) ɨɩɪɟɞɟɥɟɧɚ ɜ ɚɛɫɨɥɸɬɧɵɯ ɟɞɢɧɢɰɚɯ (300 ɩɢɤɫɟɥɟɣ).
ɫɬɪɭɤɰɢɢ. Ɉɧɢ ɫɨɞɟɪɠɚɬ ɧɟɫɤɨɥɶɤɨ ɨɤɨɧ, ɩɪɢɱɟɦ ɜ ɤɚɠɞɨɦ ɨɤɧɟ ɦɨɠɧɨ ɪɚɡɦɟɫɬɢɬɶ ɨɬɞɟɥɶɧɭɸ ɫɬɪɚɧɢɰɭ ɫ ɫɨɛɫɬɜɟɧɧɵɦ ɞɨɦɟɧɧɵɦ ɚɞɪɟɫɨɦ.
ɪɚɡɦɟɳɟɧɢɟ ɢɧɮɨɪɦɚɰɢɢ ɜɟɞɟɬɫɹ ɜ ɨɬɞɟɥɶɧɵɯ ɹɱɟɣɤɚɯ. ɋɭɳɟɫɬɜɟɧɧɨɟ ɨɬɥɢɱɢɟ ɷɬɢɯ ɤɨɧɫɬɪɭɤɰɢɣ ɡɚɤɥɸɱɚɟɬɫɹ ɜ ɬɨɦ, ɱɬɨ ɬɚɛɥɢɰɚ ɫɨ ɜɫɟɦɢ ɹɱɟɣɤɚɦɢ
ɪɚɡɦɟɳɚɟɬɫɹ ɧɚ ɨɞɧɨɣ ɫɬɪɚɧɢɰɟ. Ⱦɥɹ ɨɩɢɫɚɧɢɹ ɮɪɟɣɦɨɜ ɬɪɟɛɭɟɬɫɹ ɱɢɫɥɨ ɨɬɞɟɥɶɧɵɯ ɫɬɪɚɧɢɰ, ɪɚɜɧɨɟ ɱɢɫɥɭ ɹɱɟɟɤ (ɪɚɦɨɤ, ɮɪɟɣɦɨɜ) ɢ ɩɥɸɫ ɟɳɟ ɨɞɧɚ
ɫɬɪɚɧɢɰɚ, ɧɚ ɤɨɬɨɪɨɣ ɨɩɢɫɵɜɚɟɬɫɹ ɤɨɧɫɬɪɭɤɰɢɹ ɮɪɟɣɦɨɜ. ɉɪɢ ɩɪɨɤɪɭɬɤɟ
(ɫɤɪɨɥɥɢɧɝɟ) ɢɡɨɛɪɚɠɟɧɢɹ ɜ ɨɞɧɨɦ ɮɪɟɣɦɟ, ɢɧɮɨɪɦɚɰɢɹ ɜ ɞɪɭɝɢɯ ɮɪɟɣɦɚɯ
ɨɫɬɚɟɬɫɹ ɧɟɢɡɦɟɧɧɨɣ. ɗɬɨ ɞɚɟɬ ɜɨɡɦɨɠɧɨɫɬɶ ɢɫɩɨɥɶɡɨɜɚɬɶ ɮɪɟɣɦɵ ɤɚɤ ɭɞɨɛɧɨ
Ɍɚɤɚɹ ɫɬɪɚɧɢɰɚ ɧɟ ɫɨɞɟɪɠɢɬ ɤɨɧɬɟɣɧɟɪ body.
ɩɪɨɤɪɭɬɤɟ ɩɪɨɫɦɚɬɪɢɜɚɟɦɨɣ ɫɬɪɚɧɢɰɵ ɷɥɟɦɟɧɬɵ ɧɚɜɢɝɚɰɢɢ ɨɫɬɚɸɬɫɹ
Ɂɚɦɟɬɢɦ, ɱɬɨ ɪɹɞɨɦ ɪɚɫɩɨɥɨɠɟɧɧɵɟ ɮɪɟɣɦɵ ɦɨɝɭɬ ɫɨɞɟɪɠɚɬɶ ɫɬɪɚɧɢ-
ɋɭɳɟɫɬɜɟɧɧɵɦ ɧɟɞɨɫɬɚɬɤɨɦ ɮɪɟɣɦɨɜ ɹɜɥɹɟɬɫɹ ɫɥɨɠɧɨɫɬɶ ɢɧɞɟɤɫɚɰɢɢ
ɟ ɩɪɟɞɫɬɚɜɥɟɧɢɢ ɨɛ ɢɧɞɟɤɫɢɪɨɜɚɧɧɨɦ ɫɚɣɬɟ.
ɥɧɨ
ɉɪɨɫɬɟɣɲɢɣ ɮɪɟɣɦ ɩɪɟɞɫɬɚɜɥɹɟɬ ɫɨɛɨɣ ɪɚɦɤɭ, ɜɧɭɬɪɢ ɤɨɬɨɪɨɣ ɦɨɠɧɨ
ɪɧɨɝɨ ɬɟɝɚ iframe.
ȼɫɬɪɨɟɧɧɵɣ ɮɪɟɣɦ ɫɨɡɞɚɟɬɫɹ ɫ ɩɨɦɨɳɶɸ ɩ
ɚ
<iframe src="../../index.html" width="70%" height="300"></iframe>
ɉɭɬɶ ɤ ɡɚɝɪɭɠɚɟɦɨɣ ɫɬɪɚɧɢɰɟ ɨɩɪɟɞɟɥɹɟɬɫɹ ɫ ɩɨɦɨɳɶɸ ɚɬɪɢɛɭɬɚ src.
ɑɚɳɟ ɜɫɬɪɨɟɧɧɵɯ ɮɪɟɣɦɨɜ ɢɫɩɨɥɶɡɭɸɬɫɹ ɮɪɟɣɦɵ ɛɨɥɟɟ ɫɥɨɠɧɨɣ ɤɨɧ-
ȼɧɟɲɧɟ ɮɪɟɣɦɵ ɧɚɩɨɦɢɧɚɸɬ ɬɚɛɥɢɰɵ. ɂ ɜ ɬɚɛɥɢɰɚɯ ɢ ɜɨ ɮɪɟɣɦɚɯ
ɟ ɫɪɟɞɫɬɜɨ ɧɚɜɢɝɚɰɢɢ ɢ ɪɚɡɦɟɳɟɧɢɹ "ɧɟɧɚɡɨɣɥɢɜɨɣ
" ɪɟɤɥɚɦɵ.
Ɋɚɫɫɦɨɬɪɢɦ ɫɢɧɬɚɤɫɢɫ ɨɩɢɫɚɧɢɹ ɫɬɪɚɧɢɰɵ, ɤɨɬɨɪɚɹ ɫɨɞɟɪɠɢɬ ɮɪɟɣɦɵ.
82
__________________________________________________________________________________
Ɏɪɟɣɦɵ
ȼɦɟɫɬɨ ɧɟɝɨ ɢɫɩɨɥɶɡɭɟɬɫɹ ɞɪɭɝɨɣ ɤɨɧɬɟɣɧɟɪ:
<frameset></frameset>
ɉɪɢ ɨɩɢɫɚɧɢɢ ɪɚɡɦɟɪɨɜ ɮɪɟɣɦɨɜ ɢɫɩɨɥɶɡɭɸɬɫɹ ɚɛɫɨɥɸɬɧɵɟ ɟɞɢɧɢɰɵ
ɢɡɦɟɪɟɧɢɹ (ɩɢɤɫɟɥɢ), ɩɪɨɰɟɧɬɵ ɢ ɨɬɧɨɫɢɬɟɥɶɧɵɟ ɟɞɢɧɢɰɵ. ȿɫɥɢ ɫɞɟɥɚɬɶ ɡɚɩɢɫɶ:
<frameset cols="150,10%,*">
ɬɨ ɛɭɞɟɬ ɫɨɡɞɚɧɨ ɬɪɢ ɜɟɪɬɢɤɚɥɶɧɵɯ ɮɪɟɣɦɚ (ɬɪɢ ɫɬɨɥɛɰɚ, cols). ɉɪɢ ɷɬɨɦ ɲɢɪɢɧɚ ɤɪɚɣɧɟɝɨ ɥɟɜɨɝɨ ɫɬɨɥɛɰɚ ɫɨɫɬɚɜɢɬ 150 ɩɢɤɫɟɥɟɣ, ɲɢɪɢɧɚ ɫɪɟɞɧɟɝɨ
ɫɬɨɥɛɰɚ ɫɨɫɬɚɜɢɬ 10% ɨɬ ɨɫɬɚɜɲɟɝɨɫɹ ɩɪɨɫɬɪɚɧɫɬɜɚ, ɚ ɬɪɟɬɢɣ ɫɬɨɥɛɟɰ ɡɚɣɦɟɬ
ɫɜɨɛɨɞɧɭɸ ɫɩɪɚɜɚ ɩɥɨɳɚɞɶ.
Ⱥɧɚɥɨɝɢɱɧɨ ɮɨɪɦɢɪɭɸɬɫɹ ɝɨɪɢɡɨɧɬɚɥɶɧɨ ɪɚɫɩɨɥɨɠɟɧɧɵɟ ɮɪɟɣɦɵ:
set rows="100,*,2*">
e
<fram
ȼ ɞɚɧɧɨɦ ɫɥɭɱɚɟ ɛɭɞɭɬ ɫɮɨɪɦɢɪɨɜɚɧɵ ɬɪɢ ɩɨɥɨɫɵ: ɜɟɪɯɧɹɹ ɲɢɪɢɧɨɣ
100 ɩɢɤɫɟɥɟɣ, ɚ ɫɪɟɞɧɹɹ ɢ ɧɢɠɧɹɹ ɩɨɥɨɫɵ ɩɨɞɟɥɹɬ ɨɫɬɚɜɲɟɟɫɹ ɩɪɨɫɬɪɚɧɫɬɜɨ
ɬɚɤɢɦ ɨɛɪɚɡɨɦ, ɱɬɨ ɧɢɠɧɹɹ ɩɨɥɨɫɚ ɛɭɞɟɬ ɜ ɞɜɚ ɪɚɡɚ ɲɢɪɟ ɫɪɟɞɧɟɣ ɩɨɥɨɫɵ.
Ⱦɚɧɧɵɣ ɩɪɢɦɟɪ ɧɚɝɥɹɞɧɨ ɢɥɥɸɫɬɪɢɪɭɟɬ ɢɫɩɨɥɶɡɨɜɚɧɢɟ ɨɬɧɨɫɢɬɟɥɶɧɵɯ ɪɚɡɦɟɪɨɜ ɩɪɢ ɮɨɪɦɢɪɨɜɚɧɢɢ ɮɪɟɣɦɨɜ.
Ɋɚɫɫɦɨɬɪɢɦ, ɤɚɤ ɫɨɡɞɚɬɶ ɫɬɪɚɧɢɰɭ ɫ ɱɟɬɵɪɶɦɹ ɮɪɟɣɦɚɦɢ. Ɉɱɟɜɢɞɧɨ,
ɱɬɨ ɤɨɧɫɬɪɭɤɰɢɹ ɞɨɥɠɧɚ ɫɨɞɟɪɠɚɬɶ ɞɜɟ ɫɬɪɨɤɢ ɢ ɞɜɚ ɫɬɨɥɛɰɚ. ɗɬɨ ɡɚɞɚɟɬɫɹ
ɫɥɟɞɭɸɳɢɦ ɤɨɞɨɦ:
set rows="80,*" cols="150,*">
e
<fram
ȼɵɫɨɬɚ ɜɟɪɯɧɟɣ ɩɨɥɨɫɵ ɛɭɞɟɬ ɪɚɜɧɚ 80 ɩɢɤɫɟɥɹɦ, ɧɢɠɧɹɹ ɩɨɥɨɫɚ ɡɚɣɦɟɬ ɨɫɬɚɜɲɟɟɫɹ ɩɪɨɫɬɪɚɧɫɬɜɨ. ɒɢɪɢɧɚ ɥɟɜɨɝɨ ɫɬɨɥɛɰɚ ɫɨɫɬɚɜɢɬ 150 ɩɢɤɫɟɥɟɣ, ɩɪɚɜɵɣ ɫɬɨɥɛɟɰ ɡɚɣɦɟɬ ɫɜɨɛɨɞɧɭɸ ɩɥɨɳɚɞɶ. ɑɟɬɵɪɟ ɮɪɟɣɦɚ ɛɭɞɭɬ ɨɛɪɚɡɨɜɚɧɵ ɧɚ ɩɟɪɟɫɟɱɟɧɢɢ ɪɚɫɫɦɨɬɪɟɧɧɵɯ ɫɬɪɨɤ ɢ ɫɬɨɥɛɰɨɜ.
name="1"), ɭɤɚ-
Ⱦɚɥɟɟ ɧɭɠɧɨ ɞɚɬɶ ɢɦɟɧɚ ɮɪɟɣɦɚɦ (ɧɚɩɪɢɦɟɪ, fram
e
ɡɚɬɶ, ɤɚɤɨɣ ɞɨɤɭɦɟɧɬ ɞɨɥɠɟɧ ɡɚɝɪɭɠɚɬɶɫɹ ɜ ɞɚɧɧɵɣ ɮɪɟɣɦ (ɧɚɩɪɢɦɟɪ,
src="logo.html"), ɨɩɪɟɞɟɥɢɬɶ ɜɟɥɢɱɢɧɭ ɨɬɫɬɭɩɚ ɜ ɹɱɟɣɤɟ ɩɨ ɲɢɪɢɧɟ (ɧɚɩɪɢ-
ɦɟɪ, marginwidth="11"), ɜɟɥɢɱɢɧɭ ɨɬɫɬɭɩɚ ɩɨ ɜɵɫɨɬɟ (ɧɚɩɪɢɦɟɪ, margin-
height="22"), ɪɚɡɪɟɲɢɬɶ (yes) ɢɥɢ ɡɚɩɪɟɬɢɬɶ (no) ɫɤɪɨɥɥɢɧɝ (scrolling), ɪɚɡɪɟ-
ɲɢɬɶ (1) ɢɥɢ ɡɚɩɪɟɬɢɬɶ (0) ɩɨɤɚɡ ɝɪɚɧɢɰ ɮɪɟɣɦɨɜ (frameborder). ȿɫɥɢ ɞɨɩɨɥɧɢɬɟɥɶɧɨ ɜ ɤɨɞ ɜɤɥɸɱɢɬɶ ɚɬɪɢɛɭɬ noresize, ɬɨ ɦɨɠɧɨ ɡɚɩɪɟɬɢɬɶ ɩɨɥɶɡɨɜɚɬɟɥɸ
ɢɡɦɟɧɹɬɶ ɪɚɡɦɟɪɵ ɮɪɟɣɦɨɜ ɫ ɩɨɦɨɳɶɸ ɦɵɲɢ (ɬɟɯɧɨɥɨɝɢɹ Drag and Drop).
ɉɪɢɦɟɪ ɮɪɚɝɦɟɧɬɚ ɤɨɞɚ, ɤɨɬɨɪɵɣ ɪɟɚɥɢɡɭɟɬ ɩɟɪ
ɟɱɢɫɥɟɧɧɵɟ ɞɟɣɫɬɜɢɹ, ɩɪɢɜɟ-
ɞɟɧ ɧɢɠɟ:
e name="1" src="logo.html" marginwidth="11" marginheight="22"
<fram
scrolling="no" frameborder="1">
Ɂɚɜɟɪɲɚɟɬɫɹ ɨɩɢɫɚɧɢɟ ɮɪɟɣɦɨɜ ɡɚɤɪɵɜɚɸɳɢɦ ɬɟɝɨɦ:
</frameset>
ɇɟɨɛɯɨɞɢɦɨ ɨɬɦɟɬɢɬɶ ɟɳɟ ɨɞɧɭ ɨɫɨɛɟɧɧɨɫɬɶ ɮɪɟɣɦɨɜ. Ⱦɥɹ ɜɨɡɜɪɚɳɟɧɢɹ ɧɚ ɫɬɪɚɧɢɰɭ, ɫ ɤɨɬɨɪɨɣ ɛɵɥ ɫɞɟɥɚɧ ɜɵɡɨɜ ɮɪɟɣɦɨɜ, ɫɥɟɞɭɟɬ ɢɫɩɨɥɶɡɨɜɚɬɶ
ɫɥɟɞɭɸɳɢɣ ɤɨɞ:
__________________________________________________________________________________
Ɏɪɟɣɦɵ
83
<a href="../freim_s.htm" target="_top">
ɬɨ ɟɫɬɶ ɫɬɚɧɞɚɪɬɧɵɣ ɬɟɝ ɝɢɩɟɪɫɫɵɥɨɤ ɫɥɟɞɭɟɬ ɞɨɩɨɥɧɢɬɶ ɚɬɪɢɛɭɬɨɦ target="_top".
ɇɚ ɫɥɟɞɭɸɳɟɦ ɪɢɫɭɧɤɟ ɩɨɤɚɡɚɧɵ ɧɟɤɨɬɨɪɵɟ ɪɚɡɧɨɜɢɞɧɨɫɬɢ ɮɪɟɣɦɨɜ,
ɫɨɫɬɨɹɳɢɯ ɢɡ ɞɜɭɯ ɨɛɥɚɫɬɟɣ (1 ɢ 2), ɬɪɟɯ (3, 4 ɢ 5) ɢ ɱɟɬɵɪɟɯ ɨɛɥɚɫɬɟɣ (6).
Ɉɩɢɲɟɦ ɤɨɞɵ, ɤɨɬɨɪɵɟ ɩɨɡɜɨɥɹɸɬ ɫɨɡɞɚɬɶ ɩɨɞɨɛɧɵɟ ɜɢɞɵ ɮɪɟɣɦɨɜ.
Ⱦɥɹ ɮɨɪɦɢɪɨɜɚɧɢɹ ɞɜɭɯ ɜɟɪɬɢɤɚɥɶɧɨ ɪɚɫɩɨɥɨɠɟɧɧɵɯ ɮɪɟɣɦɨɜ (1) ɨɫ-
ɧɨɜɧɵɟ ɬɟɝɢ ɞɨɥɠɧɵ ɛɵɬɶ ɬɚɤɢɦɢ.
<frameset cols="10%,*><frame src="1.JPG"><frame src="2.JPG">
</frameset>
ɒɢɪɢɧɚ ɥɟɜɨɝɨ ɫɬɨɥɛɰɚ ɛɭɞɟɬ ɫɨɫɬɚɜɥɹɬɶ 10% ɨɬ ɲɢɪɢɧɵ ɨɤɧɚ. ɉɪɢ
ɷɬɨɦ ɬɭɞɚ ɛɭɞɟɬ ɡɚɝɪɭɠɟɧ ɪɢɫɭɧɨɤ 1.JPG.
ɉɪɚɜɵɣ ɫɬɨɥɛɟɰ ɛɭɞɟɬ ɨɬɨɛɪɚɠɚɬɶ ɪɢɫɭɧɨɤ 2.JPG.
Ɉɱɟɜɢɞɧɨ, ɱɬɨ ɜ ɭɤɚɡɚɧɧɵɟ ɨɛɥɚɫɬɢ ɦɨɠɧɨ ɩɨɦɟɫɬɢɬɶ ɧɟ ɬɨɥɶɤɨ ɪɢ-
b-ɫɬɪɚɧɢɰɵ.<br>
ɫɭɧɤɢ, ɧɨ ɢ, ɧɚɩɪɢɦɟɪ, W
e
ȿɫɥɢ ɨɤɧɨ ɧɭɠɧɨ ɪɚɡɛɢɬɶ ɧɚ ɞɜɟ ɝɨɪɢɡɨɧɬɚɥɶɧɵɟ ɩɪɹɦɨɭɝɨɥɶɧɵɟ ɨɛ-
ɥɚɫɬɢ (2), ɬɨ ɨɫɧɨɜɧɵɟ ɬɟɝɢ ɛɭɞɭɬ ɜɵɝɥɹɞɟɬɶ ɬɚɤ.
<frameset rows="100,*><frame src="1.JPG"><frame src="2.JPG">
</frameset>
Ɂɚɦɟɬɢɦ, ɱɬɨ ɜɵɫɨɬɚ ɜɟɪɯɧɟɝɨ ɮɪɟɣɦɚ ɛɭɞɟɬ ɪɚɜɧɚ 100 ɩɢɤɫɟɥɹɦ.
Ɋɚɫɫɦɨɬɪɢɦ ɤɨɞ, ɩɪɟɞɧɚɡɧɚɱɟɧɧɵɣ ɞɥɹ ɮɨɪɦɢɪɨɜɚɧɢɹ ɬɪɟɯ ɮɪɟɣɦɨɜ
ɜɢɞɚ (3).
<frameset rows="10%,*"><frame src="1.JPG"><frameset cols="10%,*">
<frame src="2.JPG"><frame src="3.JPG"></frameset></frameset>
ɉɪɢɜɟɞɟɦ ɮɪɚɝɦɟɧɬ ɩɪɨɝɪɚɦɦɵ, ɢɫɩɨɥɶɡɭɟɦɵɣ ɞɥɹ ɮɨɪɦɢɪɨɜɚɧɢɹ
ɬɪɟɯ ɮɪɟɣɦɨɜ ɜɢɞɚ (4).
84
__________________________________________________________________________________
Ɏɪɟɣɦɵ
<frameset cols="10%,*"><frame src="1.JPG"><frameset rows="10%,*">
<frame src="2.JPG"><frame src="3.JPG"></frameset></frameset>
Ɋɚɫɫɦɨɬɪɢɦ ɟɳɟ ɨɞɢɧ ɫɩɨɫɨɛ ɪɚɡɦɟɳɟɧɢɹ ɬɪɟɯ ɮɪɟɣɦɨɜ (5).
<frameset cols="150,*"><frameset rows="*,*"><frame src="1.JPG">
<frame src="2.JPG"></frameset><frame src="3.JPG"></frameset>
ɂ, ɧɚɤɨɧɟɰ, ɪɚɫɫɦɨɬɪɢɦ ɮɪɚɝɦɟɧɬ ɩɪɨɝɪɚɦɦɵ, ɢɫɩɨɥɶɡɭɟɦɵɣ ɞɥɹ
ɮɨɪɦɢɪɨɜɚɧɢɹ ɱɟɬɵɪɟɯ ɮɪɟɣɦɨɜ ɜɢɞɚ (6).
<frameset rows="100,*,20"><frame src="1.JPG"><frameset cols="32,*">
<frame src="2.JPG"><frame src="3.JPG"></frameset>
<frame src="4.JPG"></frameset>
Ʉɪɚɬɤɢɟ ɢɬɨɝɢ
Ɏɪɟɣɦɵ ɩɨɡɜɨɥɹɸɬ ɫɨɡɞɚɜɚɬɶ ɭɞɨɛɧɵɟ ɫɢɫɬɟɦɵ ɧɚɜɢɝɚɰɢɢ ɩɨ ɫɚɣɬɭ.
Ɉɞɧɚɤɨ ɦɧɨɝɢɟ ɫɩɟɰɢɚɥɢɫɬɵ Web-ɞɢɡɚɣɧɚ ɪɟɤɨɦɟɧɞɭɸɬ ɜɨɡɞɟɪɠɢɜɚɬɶɫɹ ɨɬ
ɲɢɪɨɤɨɝɨ ɢɫɩɨɥɶɡɨɜɚɧɢɹ ɮɪɟɣɦɨɜ.
__________________________________________________________________________________
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS
85
10.9. Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ - ɷɬɨ ɫɨɜɨɤɭɩɧɨɫɬɶ ɩɪɚɜɢɥ, ɤɨɬɨɪɵɟ ɨɩɢɫɵɜɚɸɬ ɫɬɢɥɶ ɨɮɨɪɦɥɟɧɢɹ Web-ɫɬɪɚɧɢɰ.
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS (Cascade Style Sheets) ɢɫɩɨɥɶɡɭɸɬ ɜ
ɬɟɯ ɫɥɭɱɚɹɯ, ɤɨɝɞɚ ɧɟɨɛɯɨɞɢɦɨ ɭɫɬɚɧɨɜɢɬɶ ɟɞɢɧɵɣ ɫɬɢɥɶ ɨɮɨɪɦɥɟɧɢɹ ɞɥɹ
ɧɟɫɤɨɥɶɤɢɯ ɫɚɣɬɨɜ, ɧɟɫɤɨɥɶɤɢɯ ɫɬɪɚɧɢɰ ɨɞɧɨɝɨ ɫɚɣɬɚ, ɧɟɫɤɨɥɶɤɢɯ ɚɛɡɚɰɟɜ,
ɬɚɛɥɢɰ, ɩɪɟɞɥɨɠɟɧɢɣ ɢɥɢ ɨɬɞɟɥɶɧɵɯ ɫɥɨɜ. Ɍɚɛɥɢɰɵ CSS ɩɨɡɜɨɥɹɸɬ ɫɞɟɥɚɬɶ
HTML-ɤɨɞ ɤɨɦɩɚɤɬɧɟɟ, ɚ ɡɧɚɱɢɬ - ɭɦɟɧɶɲɢɬɶ ɜɪɟɦɹ ɡɚɝɪɭɡɤɢ ɨɬɨɛɪɚɠɚɟɦɨɣ
ɫɬɪɚɧɢɰɵ. Ɉɧɢ ɞɚɸɬ ɜɨɡɦɨɠɧɨɫɬɶ ɭɜɟɥɢɱɢɬɶ ɤɪɚɫɨɱɧɨɫɬɶ ɫɬɪɚɧɢɰɵ ɛɟɡ ɢɫɩɨɥɶɡɨɜɚɧɢɹ ɝɪɚɮɢɱɟɫɤɢɯ ɞɨɤɭɦɟɧɬɨɜ ɮɨɪɦɚɬɚ BMP, GIF, JPEG. Ɉɫɧɨɜɧɵɦ
ɞɨɫɬɨɢɧɫɬɜɨɦ ɤɚɫɤɚɞɧɵɯ ɬɚɛɥɢɰ ɫɬɢɥɟɣ ɹɜɥɹɟɬɫɹ ɜɨɡɦɨɠɧɨɫɬɶ ɢɡɦɟɧɟɧɢɟ
ɮɨɪɦɵ ɫɪɚɡɭ ɧɟɫɤɨɥɶɤɢɯ ɫɬɪɚɧɢɰ ɢ ɞɚɠɟ ɧɟɫɤɨɥɶɤɢɯ ɫɚɣɬɨɜ.
ɷɬɨ ɧɚɛɨɪ ɩɪɚɜɢɥ ɨɮɨɪɦɥɟɧɢɹ ɫɬɪɚɧɢɰɵ. ɗɬɢ
ɇɚɩɨɦɧɢɦ, ɱɬɨ ɫɬ
ɩɪɚɜɢɥɚ ɦɨɝɭɬ ɨɩɪɟɞɟɥɹɬɶ, ɧɚɩɪɢɦɟɪ, ɮɨɪɦɭ ɬɟɤɫɬɚ (ɧɚɤɥɨɧɧɵɣ, ɩɨɞɱɟɪɤɧɭɬɵɣ, ɫɢɧɢɣ ɰɜɟɬ ɢ ɬ.ɩ.), ɮɨɪɦɭ ɬɚɛɥɢɰ (ɬɨɥɳɢɧɚ ɢ ɰɜɟɬ ɜɧɟɲɧɟɣ ɪɚɦɤɢ, ɩ
ɞɨɤ ɜɵɪɚɜɧɢɜɚɧɢɹ ɬɟɤɫɬɚ ɜɧɭɬɪɢ ɹɱɟɣɤɢ).
ɋɬɢɥɢ ɦɨɝɭɬ
ɬɟɤɫɬɚ, ɫɩɢɫɤɨɜ, ɢɡɦɟɧɟɧɢɹ ɰɜɟɬɚ ɫɢɦɜɨɥɨɜ ɢ ɮɨɧɚ, ɨɩɪɟɞɟɥɟɧɢɹ ɝɪɚɧɢɰ ɦɟɠɞɭ ɨɛɴɟɤɬɚɦɢ. ȿɞɢɧɵɣ ɫɬɢɥɶ ɨɮɨɪɦɥɟɧɢɹ ɫɚɣɬɚ ɩɨɡɜɨɥɹɟɬ ɫɞɟɥɚɬɶ ɫɬɪɚɧɢɰɵ ɨɞɧɨɬɢɩɧɵɦɢ, ɭɡɧɚɜɚɟɦɵɦɢ, ɫɬɚɧɞɚɪɬɢɡɢɪɨɜɚɧɧɵɦɢ, ɭɞɨɛɧɵɦɢ ɜ ɢɫɩɨɥɶɡɨɜɚɧɢɢ.
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ ɪɚɡɪɚɛɨɬɚɧɵ ɞɥɹ ɬɨɝɨ, ɱɬɨɛɵ ɪɚɰɢɨɧɚ
ɪɨɜɚɬɶ (ɨɛɥɟɝɱɢɬɶ) ɜɟɪɫɬɤɭ Web-ɫɬɪɚɧɢɰɵ. Ɉɧɢ ɞɚɸɬ ɜɨɡɦɨɠɧɨɫɬɶ ɮɨɪɦɢɪɨɜɚɬɶ ɲɚɛɥɨɧɵ, ɫ ɩɨɦɨɳɶɸ ɤɨɬɨɪɵɯ ɢɡɦɟɧɟɧɢɟ ɮɨɪɦɵ Web-ɫɬɪɚɧɢɰɵ ɩɪɨɢɫɯɨɞɢɬ ɛɵɫɬɪɟɟ. ɉɪɢ ɷɬɨɦ ɩɨɹɜɥɹɟɬɫɹ ɜɨɡɦɨɠɧɨɫɬɶ ɨɞɧɨɜɪɟɦɟɧɧɨɝɨ ɢɡɦɟɧɟɧɢɹ ɮɨɪɦɵ ɫɪɚɡɭ ɧɟɫɤɨɥɶɤɢɯ ɫɬɪɚɧɢɰ ɫɚɣɬɚ ɢ ɞɚɠɟ ɧɟɫɤɨɥɶɤɢɯ ɫɚɣɬɨɜ. Ɍɚɛɥɢɰɵ CSS ɤɚɤ ɛɵ ɨɬɞɟɥɹɸɬ ɩɪɨɰɟɞɭɪɭ ɫɨɡɞɚɧɢɹ ɮɨɪɦɵ ɞɨɤɭɦɟɧɬɚ ɨɬ ɩ
ɞɭɪɵ ɪɚɡɪɚɛɨɬɤɢ ɫɨɞɟɪɠɚɧɢɹ ɞɨɤɭɦɟɧɬɚ. Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ ɭɩɪ
ɥɹɸɬ ɮɨɪɦɨɣ ɩɪɟɞɫɬɚɜɥɟɧɢɹ ɞɨɤɭɦɟɧɬɚ (ɪɚɡɦɟɪɨɦ, ɝɚɪɧɢɬɭɪɨɣ ɢ ɰɜɟɬɨɦ
ɲɪɢɮɬɚ, ɮɨɧɨɦ, ɰɜɟɬɨɦ ɫɫɵɥɨɤ, ɪɚɫɩɨɥɨɠɟɧɢɟɦ ɨɛɴɟɤɬɨɜ ɧɚ ɫɬɪɚɧɢɰɟ ɢ ɬ.ɩ.).
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ ɩɪɟɞɫɬɚɜɥɹɸɬ ɫɨɛɨɣ ɦɚɤɪɨɹɡɵɤ, ɤɨɬɨɪɵɣ
ɢɫɩɨɥɶɡɭɟɬɫɹ ɞɥɹ ɫɨɡɞɚɧɢɹ ɡɚɝɨɬɨɜɨɤ, ɧɚɢɛɨɥɟɟ ɩɨɞɯɨɞɹɳɢɯ ɩɨ ɷɫɬɟɬɢɱɟɫɤɢɦ
ɫɨɨɛɪɚɠɟɧɢɹɦ ɤɨɧɤɪɟɬɧɨɦɭ ɞɢɡɚɣɧɟɪɭ.
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ ɦɨɝɭɬ ɛɵɬɶ ɜɧɟɲɧɢɦɢ, ɜɧɟɞɪɟɧɧɵɦɢ ɢ
ɜɫɬɪɨɟɧɧɵɦɢ. ȼɧɟɲɧɢɟ ɤɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ ɫɨɡɞɚɸɬɫɹ ɫ ɩɨɦɨɳɶɸ
ɨɬɞɟɥɶɧɨɝɨ ɮɚɣɥɚ, ɜ ɤɨɬɨɪɵɣ ɞɢɡɚɣɧɟɪɵ ɡɚɧɨɫɹɬ ɨɩɢɫɚɧɢɟ ɡɚɪɚɧɟɟ ɫɨɡɞɚɧɧɵɯ
ɫɬɢɥɟɣ. Ɏɚɣɥ, ɫɨɞɟɪɠɚɳɢɣ ɨɩɢɫɚɧɢɟ ɫɬɢɥɟɣ, ɞɨɥɠɟɧ ɢɦɟɬɶ ɪɚɫɲɢɪɟɧɢɟ .css.
Ⱦɨɫɬɨɢɧɫɬɜɨɦ ɜɧɟɲɧɢɯ ɬɚɛɥɢɰ ɹɜɥɹɟɬɫɹ ɜɨɡɦɨɠɧɨɫɬɶ ɦɨɞɢɮɢɰɢɪɨɜɚɧɢɹ ɮɨɪɦɵ ɫɬɪɚɧɢɰɵ ɛɟɡ ɢɡɦɟɧɟɧɢɹ HTML-ɤɨɞɚ ɫɚɦɨɣ ɫɬɪɚɧɢɰɵ.
ɢɥɶ -
ɨɪɹ-
ɛɵɬɶ ɢɫɩɨɥɶɡɨɜɚɧɵ ɞɥɹ ɭɩɪɚɜɥɟɧɢɹ ɫɜɨɣɫɬɜɚɦɢ ɲɪɢɮɬɚ,
ɢɡɢ-
ɥ
ɪɨɰɟ-
ɚɜ-
86
__________________________________________________________________________________
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS
ȼɧɟɞɪɟɧɧɵɟ ɤɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ ɞɟɤɥɚɪɢɪɭɸɬɫɹ (ɨɩɪɟɞɟɥɹɸɬɫɹ) ɜ ɡɚɝɨɥɨɜɤɟ Web-ɫɬɪɚɧɢɰɵ (ɦɟɠɞɭ ɬɟɝɚɦɢ head). Ⱦɟɣɫɬɜɢɟ ɜɧɟɞɪɟɧɧɵɯ
ɬɚɛɥɢɰ ɪɚɫɩɪɨɫɬɪɚɧɹɟɬɫɹ ɥɢɲɶ ɧɚ ɨɞɧɭ ɫɬɪɚɧɢɰɭ.
ȼɫɬɪɨɟɧɧɵɟ CSS ɫɨɡɞɚɸɬɫɹ ɧɟɩɨɫɪɟɞɫɬɜɟɧɧɨ ɜ ɦɨɦɟɧɬ ɢɯ ɢɫɩɨɥɶɡɨɜɚɧɢɹ (ɜ ɬɟɥɟ ɞɨɤɭɦɟɧɬɚ, ɦɟɠɞɭ ɬɟɝɚɦɢ body). Ⱦɟɣɫɬɜɢɟ ɜɫɬɪɨɟɧɧɵɯ ɬɚɛɥɢɰ
CSS ɩɪɟɤɪɚɳɚɟɬɫɹ ɩɪɢ ɩɨɹɜɥɟɧɢɢ ɬɟɝɚ, ɡɚɜɟɪɲɚɸɳɟɝɨ ɚɛɡɚɰ </p>.
ȼɜɟɞɟɧɧɵɟ ɩɨɧɹɬɢɹ ɩɨɡɜɨɥɹɸɬ ɩɨɧɹɬɶ, ɩɨɱɟɦɭ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ ɧɚɡɵɜɚɸɬɫɹ ɤɚɫɤɚɞɧɵɦɢ. Ɉɛɴɹɫɧɹɟɬɫɹ ɷɬɨ ɬɟɦ, ɱɬɨ ɮɨɪɦɚ ɨɬɨɛɪɚɠɚɟɦɨɣ ɧɚ ɷɤɪɚɧɟ ɫɬɪɚɧɢɰɵ ɦɨɠɟɬ ɭɬɨɱɧɹɬɶɫɹ ɩɨɫɥɟɞɨɜɚɬɟɥɶɧɨ (ɩɨɷɬɚɩɧɨ, ɤɚɫɤɚɞɧɨ). ɋɧɚɱɚɥɚ ɭɤɚɡɵɜɚɸɬɫɹ ɨɛɳɢɟ ɫɜɨɣɫɬɜɚ ɫɚɣɬɚ ɢɥɢ ɫɬɪɚɧɢɰɵ ɫ ɩɨɦɨɳɶɸ ɜɧɟɲɧɟɝɨ
b
ɮɚɣɥɚ, ɡɚɬɟɦ ɜ ɡɚɝɨɥɨɜɤɟ We
-ɫɬɪɚɧɢɰɵ ɞɟɥɚɸɬɫɹ ɧɟɨɛɯɨɞɢɦɵɟ ɭɬɨɱɧɟɧɢɹ ɢ,
ɧɚɤɨɧɟɰ, ɜ ɦɟɫɬɟ ɜɜɟɞɟɧɢɹ ɬɟɤɫɬɚ ɡɚɜɟɪɲɚɟɬɫɹ ɨɤɨɧɱɚɬɟɥɶɧɚɹ ɤɨɪɪɟɤɰɢɹ
ɮɨɪɦɵ ɬɟɤɫɬɚ, ɬɚɛɥɢɰɵ ɢ ɬ.ɩ. ɉɪɢ ɧɚɥɢɱɢɢ ɤɨɧɮɥɢɤɬɨɜ (ɩɪɨɬɢɜɨɪɟɱɢɣ) ɩɨɫɥɟɞɭɸɳɢɟ ɭɤɚɡɚɧɢɹ ɨɬɦɟɧɹɸɬ ɩɪɟɞɵɞɭɳɢɟ ɭɤɚɡɚɧɢɹ (ɬɨ ɟɫɬɶ ɩɨɫɥɟɞɧɢɟ
ɞɢɪɟɤɬɢɜɵ ɢɦɟɸɬ ɛɨɥɟɟ ɜɵɫɨɤɢɣ ɩɪɢɨɪɢɬɟɬ).
ȼɵɡɨɜ ɜɧɟɲɧɟɝɨ ɫɬɢɥɹ ɪɚɡɦɟɬɤɢ ɢɡ ɮɚɣɥɚ ɨɫɭɳɟɫɬɜɥɹɟɬɫɹ ɫ ɩɨɦɨɳɶɸ
ɷɥɟɦɟɧɬɚ link. ɗɥɟɦɟɧɬ link ɞɨɥɠɟɧ ɪɚɫɩɨɥɚɝɚɬɶɫɹ ɜ ɡɚɝɨɥɨɜɤɟ ɞɨɤɭɦɟɧɬɚ.
ɇɚɩɪɢɦɟɪ,
<head><link href="apa.css" rel="stylesheet" type="text/css"></head>
ȼ ɞɚɧɧɨɦ ɫɥɭɱɚɟ ɜɧɟɲɧɢɣ ɮɚɣɥ ɢɦɟɟɬ ɢɦɹ apa.css.
ɉɪɢɜɟɞɟɦ ɩɪɢɦɟɪ ɜɧɟɲɧɟɝɨ ɮɚɣɥɚ, ɫɨɞɟɪɠɚɳɟɝɨ ɨɩɢɫɚɧɢɟ ɨɞɧɨɝɨ ɢɡ
ɜɨɡɦɨɠɧɵɯ ɫɬɢɥɟɣ.
{background: blue; color : white;
body
font-family : "Times New Roman", serif;
font-size: 14px; text-align: justify;}
p{text-indent : 11mm;}
h2 {font-size: 14pt; color: green;}
hr {color: blue; height: 3 pt;}
Ɉɩɢɫɚɧɢɟ ɞɚɟɬ ɫɥɟɞɭɸɳɢɟ ɭɤɚɡɚɧɢɹ (ɤɨɦɚɧɞɵ) ɛɪɚɭɡɟɪɭ ɧɚ ɮɨɪɦɚɬɢ-
ɪɨɜɚɧɢɟ ɬɟɤɫɬɚ. ɋɞɟɥɚɬɶ ɮɨɧ ɞɨɤɭɦɟɧɬɚ ɫɢɧɢɦ (background: blue;). ɂɫɩɨɥɶɡɨɜɚɬɶ ɛɟɥɵɟ ɱɟɪɧɢɥɚ ɞɥɹ ɢɡɨɛɪɚɠɟɧɢɹ ɬɟɤɫɬɚ (color : white;). ȼɵɛɪɚɬɶ ɝɚɪɧɢɬɭɪɭ Times New Roman (font-family : "Times New Roman", serif;). ɍɫɬɚɧɨɜɢɬɶ
ɜɵɫɨɬɭ ɫɢɦɜɨɥɨɜ 14 ɩɢɤɫɟɥɟɣ (font-size: 14px;). ɋɞɟɥɚɬɶ ɜɵɪɚɜɧɢɜɚɧɢɟ ɬɟɤɫɬɚ
ɩɨ ɲɢɪɢɧɟ ɨɤɧɚ (text-align: justify;). ɍɫɬɚɧɨɜɢɬɶ ɜɟɥɢɱɢɧɭ ɨɬɫɬɭɩɚ ("ɤɪɚɫɧɭɸ
ɫɬɪɨɤɭ") 11 ɦɦ (text-indent : 11mm;). Ⱦɥɹ ɡɚɝɨɥɨɜɤɚ ɬɢɩɚ h2 ɭɫɬɚɧɨɜɢɬɶ ɪɚɡɦɟɪ ɫɢɦɜɨɥɨɜ 14 ɩɭɧɤɬɨɜ (font-size:
14pt;), ɚ ɰɜɟɬ -
ɡɟɥɟɧɵɣ (color: green;).
Ɂɚɞɚɬɶ ɰɜɟɬ ɝɨɪɢɡɨɧɬɚɥɶɧɨɣ ɥɢɧɢɢ (ɨɬɥɢɧɨɜɤɢ) - ɫɢɧɢɣ (color: blue;), ɚ ɜɵɫɨɬɭ ɥɢɧɢɢ - 3 ɩɭɧɤɬɚ (height: 3 pt;).
Ɉɩɢɫɚɧɢɟ ɫɬɢɥɹ ɜɧɟɞɪɟɧɧɵɯ ɬɚɛɥɢɰ ɩɪɨɢɫɯɨɞɢɬ ɫ ɩɨɦɨɳɶɸ ɷɥɟɦɟɧɬɚ
(ɬɟɝɚ) style, ɪɚɡɦɟɳɚɟɦɨɝɨ ɜ ɡɚɝɨɥɨɜɤɟ Web-ɫɬɪɚɧɢɰɵ (ɜɧɭɬɪɢ ɤɨɧɬɟɣɧɟɪɚ
<head> </head>). ȼ ɷɬɨɦ ɫɥɭɱɚɟ ɞɟɣɫɬɜɢɟ ɫɨɡɞɚɧɧɨɝɨ ɫɬɢɥɹ ɪɚɫɩɪɨɫɬɪɚɧɹɟɬɫɹ
__________________________________________________________________________________
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS
87
ɧɚ ɫɨɞɟɪɠɢɦɨɟ ɜɫɟɣ ɫɬɪɚɧɢɰɵ. ɉɪɢɜɟɞɟɦ ɩɪɢɦɟɪ ɨɩɢɫɚɧɢɹ ɜɧɟɞɪɟɧɧɨɝɨ ɫɬɢɥɹ.
<head> <style type="text/css"> h1 {font-size: 18pt; color:red;} </style>
</head>
Ɉɛɴɹɜɥɟɧɢɟ ɢ ɢɫɩɨɥɶɡɨɜɚɧɢɟ ɜɫɬɪɨɟɧɧɨɝɨ ɫɬɢɥɹ ɩɪɨɢɫɯɨɞɢɬ ɫ ɩɨɦɨɳɶɸ ɚɬɪɢɛɭɬɚ style, ɧɨ ɧɟ ɜ ɡɚɝɨɥɨɜɤɟ ɫɬɪɚɧɢɰɵ, ɚ ɧɟɩɨɫɪɟɞɫɬɜɟɧɧɨ ɜ ɷɥɟɦɟɧɬɟ (ɬɟɝɟ) ɪɚɡɦɟɬɤɢ. ɗɬɢɦ ɫɩɨɫɨɛɨɦ ɦɨɠɧɨ ɢɡɦɟɧɢɬɶ ɫɜɨɣɫɬɜɨ ɫɬɚɧɞɚɪɬɧɨɝɨ
ɬɟɝɚ ɜ ɦɨɦɟɧɬ ɧɚɛɨɪɚ ɬɟɤɫɬɚ ɜ HTML-ɪɟɞɚɤɬɨɪɟ. Ɍɚɤɨɟ ɢɡɦɟɧɟɧɢɟ ɫɬɢɥɹ ɞɟɣɫɬɜɭɟɬ ɧɚ ɧɟɛɨɥɶɲɨɦ ɭɱɚɫɬɤɟ ɬɟɤɫɬɚ (ɥɨɤɚɥɶɧɨ), ɧɚɩɪɢɦɟɪ, ɜ ɩɪɟɞɟɥɚɯ ɚɛɡɚɰɚ. ɗɬɨɬ ɫɩɨɫɨɛ ɩ
ɨɪɨɣ ɧɚɡɵɜɚɟɬɫɹ ɚɧɝɥɢɣɫɤɢɦ ɬɟɪɦɢɧɨɦ inline
(ɜɫɬɪɨɟɧɧɵɣ).
ɉɪɢɜɟɞɟɦ ɩɪɢɦɟɪ ɜɫɬɪɨɟɧɧɨɝɨ ɫɬɢɥɹ.
<p style="line-height:30 pt">
Ɂɚ ɫɱɟɬ ɷɬɨɣ ɞɢɪɟɤɬɢɜɵ ɪɚɫɫɬɨɹɧɢɟ ɦɟɠɞɭ ɫɨɫɟɞɧɢɦɢ ɫɬɪɨɤɚɦɢ ɨɬɦɟɱɟɧɧɨɝɨ ɚɛɡɚɰɚ ɛɭɞɟɬ ɭɫɬɚɧɨɜɥɟɧɨ 30 ɩɭɧɤɬɨɜ.
ɋɚɦɵɦ ɜɚɠɧɵɦ ɞɨɫɬɨɢɧɫɬɜɨɦ CSS ɹɜɥɹɟɬɫɹ ɜɨɡɦɨɠɧɨɫɬɶ ɢɡɦɟɧɟɧɢɹ
ɫɬɢɥɹ ɧɚ ɛɨɥɶɲɢɯ ɩɥɨɳɚɞɹɯ HTML-ɞɨɤɭɦɟɧɬɚ, ɚ ɧɟ ɥɨɤɚɥɶɧɵɟ ɢɡɦɟɧɟɧɢɹ.
ɉɨ ɷɬɨɣ ɩɪ
ɢɱɢɧɟ ɜɫɬɪɨɟɧɧɵɟ ɬɚɛɥɢɰɵ CSS
ɫɥɟɞɭɟɬ ɫɱɢɬɚɬɶ ɦɟɧɟɟ ɩɟɪɫɩɟɤɬɢɜɧɵɦɢ ɩɨ ɫɪɚɜɧɟɧɢɸ ɫ ɜɧɟɲɧɢɦɢ ɢ ɜɧɟɞɪɟɧɧɵɦɢ ɤɚɫɤɚɞɧɵɦɢ ɬɚɛɥɢɰɚɦɢ
ɫɬɢɥɟɣ.
Ɉɛɪɚɡɧɨ ɜɫɬɪɨɟɧɧɵɟ ɬɚɛɥɢɰɵ CSS ɦɨɠɧɨ ɧɚɡɜɚɬɶ ɨɞɧɨɪɚɡɨɜɵɦɢ (ɢɥɢ
ɥɨɤɚɥɶɧɵɦɢ) ɬɚɛɥɢɰɚɦɢ, ɜɧɟɞɪɟɧɧɵɟ CSS - ɧɟɨɞɧɨɤɪɚɬɧɨ ɢɫɩɨɥɶɡɭɟɦɵɦɢ
(ɢɥɢ ɪɟɝɢɨɧɚɥɶɧɵɦɢ), ɚ ɜɧɟɲɧɢɟ CSS - ɦɧɨɝɨɪɚɡɨɜɵɦɢ (ɢɥɢ ɝɥɨɛɚɥɶɧɵɦɢ)
ɬɚɛɥɢɰɚɦɢ ɫɬɢɥɟɣ.
Ɋɚɫɫɦɨɬɪɢɦ, ɤɚɤɢɦ ɨɛɪɚɡɨɦ ɨɩɢɫɵɜɚɸɬɫɹ ɩɪɚɜɢɥɚ ɮɨɪɦɢɪɨɜɚɧɢɹ ɫɬɢɥɟɣ.
ɫɟɥɟɤɬɨɪ {ɫɜɨɣɫɬɜɨ 1: ɡɧɚɱɟɧɢɟ 1; ɫɜɨɣɫɬɜɨ 2: ɡɧɚɱɟɧɢɟ 2;…}
ɂɬɚɤ, ɩɪɚɜɢɥɚ ɫɨɫɬɨɹɬ ɢɡ ɫɟɥɟɤɬɨɪɨɜ ɢ ɨ
ɜɟ ɫɟɥɟɤɬɨɪɨɜ
ɢɫɩɨɥɶɡɭɸɬɫɹ ɫɬɚɧɞɚɪɬɧɵɟ ɢɦɟɧɚ ɬɟɝɨɜ, ɫɜɨɣɫɬɜɚ ɤɨɬɨɪɵɯ ɧɟ-
ɩɢɫɚɧɢɣ ɢɯ ɫɜɨɣɫɬɜ. ȼ ɤɚɱɟɫɬ-
ɨɛɯɨɞɢɦɨ ɞɨɩɨɥɧɢɬɶ ɢɥɢ ɢɡɦɟɧɢɬɶ. ȼɫɟ, ɱɬɨ ɧɚɯɨɞɢɬɫɹ ɜ ɮɢɝɭɪɧɵɯ ɫɤɨɛɤɚɯ,
ɩɪɢɧɹɬɨ ɧɚɡɵɜɚɬɶ ɨɩɪɟɞɟɥɟɧɢɟɦ (ɢɥɢ ɨɩɢɫɚɧɢɟɦ). Ɋɚɫɫɦɨɬɪɢɦ ɤɨɧɤɪɟɬɧɵɣ
ɩɪɢɦɟɪ.
h2{color: red; font-size: 10 pt;}
Ɂɞɟɫɶ ɢɦɹ ɫɟɥɟɤɬɨɪɚ h2. ȼ ɞɚɧɧɨɦ ɩɪɚɜɢɥɟ ɢɫɩɨɥɶɡɨɜɚɧɨ ɞɜɚ ɫɜɨɣɫɬɜɚ
color ɢ font-size. ɉɟɪɟɱɢɫɥɟɧɧɵɟ ɫɜɨɣɫɬɜɚ ɩɪɢɧɢɦɚɸɬ ɡɧɚɱɟɧɢɹ ɫɨɨɬɜɟɬɫɬ-
ɜɟɧɧɨ red ɢ 10 pt. ɇɟɬɪɭɞɧɨ ɡɚɦɟɬɢɬɶ, ɱɬɨ ɫɜɨɣɫɬɜɚ ɪɚɡɞɟɥɹɸɬɫɹ ɬɨɱɤɨɣ ɫ ɡɚɩɹɬɨɣ, ɚ ɡɧɚɱɟɧɢɹ ɭɤɚɡɵɜɚɸɬɫɹ ɩɨɫɥɟ ɡɧɚɤɚ ɞɜɨɟɬɨɱɢɹ. Ɂɚ ɫɱɟɬ ɢɫɩɨɥɶɡɨɜɚɧɢɹ
ɝɨ ɫɬɢɥɹ ɩɨɦɟɱɟɧɧɵɣ ɫ ɟɝɨ ɩɨɦɨɳɶɸ ɬɟɤɫɬ ɛɭɞɟɬ ɜɵɞɟɥɟɧ ɤɪɚɫɧɵɦ
ɞɚɧɧɨ
ɰɜɟɬɨɦ (red),
ɚ ɫɢɦɜɨɥɵ ɛɭɞɭɬ ɢɦɟɬɶ ɪɚɡɦɟɪ 10 ɩɭɧɤɬɨɜ (pt).
ɋɟɥɟɤɬɨɪɵ ɞɨɩɭɫɤɚɸɬ ɝɪɭɩɩɢɪɨɜɤɭ, ɤɨɬɨɪɚɹ ɞɟɥɚɟɬɫɹ ɜ ɬɟɯ ɫɥɭɱɚɹɯ,
ɤɨɝɞɚ ɪɚɡɧɵɦ ɬɟɝɚɦ ɧɟɨɛɯɨɞɢɦɨ ɩɪɢɞɚɬɶ ɨɞɢɧɚɤɨɜɵɟ ɫɜɨɣɫɬɜɚ.
ɇɚɩɪɢɦɟɪ,
h1,h2,h3 {color: Blue;
88
__________________________________________________________________________________
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS
font-family: "Times New Roman", Times, serif;
font-weight: bold;}
Ƚɪɭɩɩɢɪɨɜɤɚ ɬɪɟɯ ɫɟɥɟɤɬɨɪɨɜ ɩɨɡɜɨɥɢɥɚ ɡɚɞɚɬɶ ɨɞɢɧɚɤɨɜɵɟ ɫɜɨɣɫɬɜɚ
ɫɪɚɡɭ ɬɪɟɦ ɡɚɝɨɥɨɜɤɚɦ (ɬɢɩɚ h1, h2 ɢ h3). ɍɤɚɡɚɧɧɵɟ ɡɚɝɨɥɨɜɤɢ ɛɭɞɭɬ ɜɵɞɟɥɟɧɵ ɫɢɧɢɦ ɰɜɟɬɨɦ. Ȼɭɞɟɬ ɢɫɩɨɥɶɡɨɜɚɧɚ ɝɚɪɧɢɬɭɪɚ Times New Roman. ɋɢɦɜɨɥɵ ɡɚɝɨɥɨɜɤɨɜ ɛɭɞɭɬ ɢɦɟɬɶ ɩɨɥɭɠɢɪɧɨɟ ɧɚɱɟɪɬɚɧɢɟ.
Ⱦɥɹ ɡɚɤɪɟɩɥɟɧɢɹ ɧɚɜɵɤɨɜ ɢɫɩɨɥɶɡɨɜɚɧɢɹ CSS ɨɛɪɚɡɭɟɦ ɫɬɢɥɶ, ɤɨɬɨɪɵɣ ɩɨɡɜɨɥɹɟɬ ɮɨɪɦɢɪɨɜɚɬɶ ɨɬɫɬɭɩ ɩɪɢ ɩɟɪɟɯɨɞɟ ɤ ɧɨɜɨɦɭ ɚɛɡɚɰɭ (ɬɚɤ ɧɚɡɵɜɚɟɦɭɸ "ɤɪɚɫɧɭɸ ɫɬɪɨɤɭ").
;}
p{text-indent: 15 m
m
Ɍɚɤɚɹ ɦɨɞɢɮɢɤɚɰɢɹ ɫɟɥɟɤɬɨɪɚ ɩɨɡɜɨɥɹɟɬ ɧɚɱɢɧɚɬɶ ɤɚɠɞɵɣ ɧɨɜɵɣ ɚɛɡɚɰ (ɩɚɪɚɝɪɚɮ) ɫ ɨɬɫɬɭɩɨɦ, ɪɚɜɧɵɦ 15 ɦɦ.
ɉɨɪɨɣ ɬɪɟɛɭɟɬɫɹ ɨɞɧɨɦɭ ɢ ɬɨɦɭ ɠɟ ɬɟɝɭ (ɷɥɟɦɟɧɬɭ) ɩɪɢɞɚɬɶ ɪɚɡɧɵɟ
ɫɜɨɣɫɬɜɚ. ɇɚɩɪɢɦɟɪ, ɜ ɨɞɧɨɦ ɫɥɭɱɚɟ ɡɚɝɨɥɨɜɨɤ ɬɢɩɚ h2 ɞɨɥɠɟɧ ɛɵɬɶ ɜɵɞɟɥɟɧ
ɡɟɥɟɧɵɦ ɰɜɟɬɨɦ, ɚ ɜ ɞɪɭɝɨɦ ɷɬɨɬ ɠɟ ɬɢɩ ɡɚɝɨɥɨɜɤɚ - ɤɪɚɫɧɵɦ. ɉɨɞɨɛɧɵɟ ɡɚɞɚɱɢ ɪɟɲɚɸɬɫɹ ɩɭɬɟɦ ɢɫɩɨɥɶɡɨɜɚɧɢɹ ɤɥɚɫɫɨɜ ɢ ɢɞɟɧɬɢɮɢɤɚɬɨɪɨɜ. ȼɨ ɜɧɟɲɧɟɦ ɮɚɣɥɟ ɫɥɟɞɭɟɬ ɩɨɦɟɫɬɢɬɶ ɨɩɢɫɚɧɢɟ ɞɜɭɯ ɤɥɚɫɫɨɜ:
h2.green{
color : green
}
h2.red{
color : red
}
ȼɵɡɨɜ ɫɨɡɞɚɧɧɵɯ ɤɥɚɫɫɨɜ ɜ ɦɟɫɬɚɯ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɬɟɤɫɬɚ ɨɫɭɳɟɫɬɜ-
ɥɹɟɬɫɹ ɬɚɤ:
<h2 class="green">Ɂɚɝɨɥɨɜɨɤ ɛɭɞɟɬ ɡɟɥɟɧɵɦ</h2>
<h2 class="red">Ɂɚɝɨɥɨɜɨɤ ɛɭɞɟɬ ɤɪɚɫɧɵɦ</h2>
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ ɨɛɥɚɞɚɸɬ ɫɜɨɣɫɬɜɨɦ ɧɚɫɥɟɞɨɜɚɧɢɹ. ɗɬɨ
ɨɡɧɚɱɚɟɬ, ɱɬɨ ɩɪɢ ɢɫɩɨɥɶɡɨɜɚɧɢɢ ɜɥɨɠɟɧɧɵɯ ɬɟɝɨɜ, ɨɞɢɧ ɢɡ ɤɨɬɨɪɵɯ ɨɩɢɫɚɧ
ɜɨ ɜɧɟɲɧɟɦ ɮɚɣɥɟ, ɮɨɪɦɚɬɢɪɭɟɦɨɦɭ ɬɟɤɫɬɭ ɩɟɪɟɞɚɸɬɫɹ ɫɜɨɣɫɬɜɚ ɜɫɟɯ ɬɟɝɨɜ.
ɋɥɟɞɭɸɳɢɣ ɫɬɢɥɶ ɢɦɟɟɬ ɧɚɡɜɚɧɢɟ ɷɥɟɦɟɧɬɚ, ɤɨɬɨɪɨɟ ɧɟ ɫɨɜɩɚɞɚɟɬ ɫ
ɢɦɟɧɟɦ ɤɚɤɨɝɨ-ɥɢɛɨ ɬɟɝɚ:
.whiteblue { color: #FFFFFF; background-color: #0000FF }
ȼ ɞɚɧɧɨɦ ɫɥɭɱɚɟ ɰɜɟɬɚ (ɛɟɥɵɟ ɱɟɪ
ɧɢɥɚ ɢ ɫɢɧɢɣ ɮɨɧ) ɡɚɞɚɧɵ ɜ ɲɟɫɬɧɚɞɰɚɬɟɪɢɱɧɨɣ ɫɢɫɬɟɦɟ ɫɱɢɫɥɟɧɢɹ. ɇɭɠɧɨ ɨɛɪɚɬɢɬɶ ɜɧɢɦɚɧɢɟ ɧɚ ɬɨ, ɱɬɨ ɩɟɪɟɞ
ɢɦɟɧɟɦ ɫɟɥɟɤɬɨɪɚ ɩɨɫɬɚɜɥɟɧɚ ɬɨɱɤɚ.
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ ɩɨɡɜɨɥɹɸɬ ɢɫɩɨɥɶɡɨɜɚɬɶ ɛɨɥɶɲɨɟ ɱɢɫɥɨ
ɫɟɥɟɤɬɨɪɨɜ
, ɫɜɨɣɫɬɜ ɢ ɢɯ ɡɧɚɱɟɧɢɣ. Ɍɚɤ ɬɚɛɥɢɰɵ ɫɩɟɰɢɮɢɤɚɰɢɢ CSS2 ɫɨɞɟɪɠɚɬ ɛɨɥɟɟ ɫɬɚ ɫɜɨɣɫɬɜ. ɉɨɥɧɨɟ ɢ ɩɨɞɪɨɛɧɨɟ ɢɯ ɪɚɫɫɦɨɬɪɟɧɢɟ ɩɨɬɪɟɛɭɟɬ ɧɟɞɨɩɭɫɬɢɦɨ ɛɨɥɶɲɨɝɨ ɜɪɟɦɟɧɢ ɢ ɨɛɴɟɦɚ ɬɟɤɫɬɚ. ȼ ɧɟɨɛɯɨɞɢɦɵɯ ɫɥɭɱɚɹɯ ɞɥɹ
ɜɵɛɨɪɚ ɧɭɠɧɵɯ ɷɥɟɦɟɧɬɨɜ, ɫɜɨɣɫɬɜ ɢ ɢɯ ɡɧɚɱɟɧɢɣ ɫɥɟɞɭɟɬ ɨɛɪɚɳɚɬɶɫɹ ɤ
ɢɥɢ ɛɚɡɚɦ ɩɨɦɨɳɢ, ɤɨɬɨɪɵɦɢ ɨɫɧɚɳɟɧɵ Web-
ɫɩɪɚɜɨɱɧɨɣ ɥɢɬɟɪɚɬɭɪɟ [3]
__________________________________________________________________________________
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS
89
ɪɟɞɚɤɬɨɪɵ. ȼɢɞɢɦɨ, ɜ ɩɨɞɨɛɧɵɯ ɫɢɬɭɚɰɢɹɯ ɫɥɟɞɭɟɬ ɨɬɞɚɬɶ ɩɪɟɞɩɨɱɬɟɧɢɟ ɪɟɞɚɤɬɨɪɚɦ ɬɚɛɥɢɰ CSS. ɍɞɨɛɟɧ ɜ ɪɚɛɨɬɟ ɪɟɞɚɤɬɨɪ ɤɚɫɤɚɞɧɵɯ ɬɚɛɥɢɰ ɫɬɢɥɟɣ
TopStyle ɮɢɪɦɵ Bradsoft.
ɉɪɨɝɪɚɦɦɚ ɫɨɞɟɪɠɢɬ ɬɪɢ ɨɤɧɚ. ȼ ɜɟɪɯɧɟɦ ɥɟɜɨɦ ɨɤɧɟ ɞɟɦɨɧɫɬɪɢɪɭɟɬɫɹ ɤɨɞ ɫɬɢɥɹ. ȼ ɩɪɚɜɨɦ ɜɟɪɯɧɟɦ ɨɤɧɟ ɩɪɢɜɨɞɹɬɫɹ ɫɜɨɣɫɬɜɚ ɢ ɢɯ ɡɧɚɱɟɧɢɹ.
ɉɨɞɛɨɪ ɫɜɨɣɫɬɜ ɢ ɡɧɚɱɟɧɢɣ ɨɫɭɳɟɫɬɜɥɹɟɬɫɹ ɢɧɬɟɪɚɤɬɢɜɧɨ ɫ ɭɱɟɬɨɦ ɤɨɧɬɟɤɫɬɚ. ȼ ɧɢɠɧɟɦ ɨɤɧɟ ɪɟɞɚɤɬɨɪɚ ɞɟɦɨɧɫɬɪɢɪɭɸɬɫɹ ɞɟɣɫɬɜɢɹ ɫɨɡɞɚɧɧɵɯ ɫɬɢɥɟɣ.
ɑɟɬɜɟɪɬɚɹ ɫɥɟɜɚ ɤɧɨɩɤɚ ɧɚ ɩɚɧɟɥɢ ɢɧɫɬɪɭɦɟɧɬɨɜ ɩɨɡɜɨɥɹɟɬ ɜɵɛɪɚɬɶ ɧɭɠɧɵɣ
ɫɟɥɟɤɬɨɪ.
ɋɥɟɞɭɟɬ ɨɛɪɚɬɢɬɶ ɜɧɢɦɚɧɢɟ ɧɚ ɬɨ, ɱɬɨ ɞɢɪɟɤɬɢɜɵ ɧɚ ɹɡɵɤɟ CSS ɦɨɠɧɨ
ɡɚɩɢɫɵɜɚɬɶ ɡɚɝɥɚɜɧɵɦɢ ɢ ɫɬɪɨɱɧɵɦɢ ɛɭɤɜɚɦɢ (ɢɯ ɪɚɛɨɬɨɫɩɨɫɨɛɧɨɫɬɶ ɧɟ ɡɚɜɢɫɢɬ ɨɬ ɜɵɛɪɚɧɧɨɝɨ ɪɟɝɢɫɬɪɚ). ɇɚɩɨɦɧɢɦ, ɱɬɨ ɬɟɝɢ ɹɡɵɤɚ HTML ɬɚɤɠɟ ɪɟɝɢɫɬɪɨɧɟɡɚɜɢɫɢɦɵ.
90
__________________________________________________________________________________
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS
Ɋɚɫɫɦɨɬɪɢɦ ɧɟɫɤɨɥɶɤɨ ɩɪɢɦɟɪɨɜ ɢɫɩɨɥɶɡɨɜɚɧɢɹ ɜɫɬɪɨɟɧɧɵɯ CSS.
Ɋɚɫɫɬɨɹɧɢɟ ɦɟɠɞɭ ɛɭɤɜɚɦɢ ɜ ɷɬɨɦ ɩɪɟɞɥɨɠɟɧɢɢ
ɫɨɫɬɚɜɥɹɟɬ 3 ɦɦ.
Ɍɚɤɨɟ ɮɨɪɦɚɬɢɪɨɜɚɧɢɟ (ɢɡɦɟɧɟɧɢɟ ɦɟɠɛɭɤɜɟɧɧɨɝɨ ɪɚɫɫɬɨɹɧɢɹ) ɜɵɩɨɥɧɟɧɨ ɫ ɩɨɦɨɳɶɸ ɚɬɪɢɛɭɬɚ letter-spacing:<p style="font-family:Courier New
Cyr; letter-spacing:3 mm">
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ ɩɨɡɜɨɥɹɸɬ ɢɡɦɟɧɢɬɶ ɦɟɠɫɬɪɨɱɧɨɟ ɪɚɫ-
ɫɬɨɹɧɢɟ. Ɇɨɠɧɨ ɭɜɟɥɢɱɢɬɶ ɪɚɫɫɬɨɹɧɢɟ ɦɟɠɞɭ ɫɬɪɨɤɚɦɢ. ȼ ɞɚɧɧɨɦ ɫɥɭɱɚɟ ɨɧɨ
ɫɨɫɬɚɜɥɹɟɬ 30 ɬɢɩɨɝɪɚɮɫɤɢɯ ɩɭɧɤɬɨɜ (ɨɞɢɧ ɩɭɧɤɬ ɫɨɞɟɪɠɢɬ 0,35 ɦɦ).
ɗɬɨ ɪɟɚɥɢɡɨɜɚɧɨ ɫ ɩɨɦɨɳɶɸ ɷɥɟɦɟɧɬɚ <p style="line-height:30 pt">.
Ⱦɚɧɧɵɣ ɚɛɡɚɰ ɧɚɱɢɧɚɟɬɫɹ ɫ ɨɬɫɬɭɩɚ ("Ʉɪɚɫɧɨɣ ɫɬɪɨɤɢ") ɪɚɡɦɟɪɨɦ 12
ɦɦ. Ɍɚɤɨɟ ɮɨɪɦɚɬɢɪɨɜɚɧɢɟ ɬɟɤɫɬɚ ɨɛɟɫɩɟɱɢɜɚɟɬ ɷɥɟɦɟɧɬ < p style="text-
indent:12 mm">.
ɗɬɨɬ ɚɛɡɚɰ ɜɵɪɨɜɧɟɧ ɩɨ ɩɪɚɜɨɦɭ ɢ ɩɨ ɥɟɜɨɦɭ ɤɪɚɹɦ. Ɍɚɤɨɟ ɜɵɪɚɜɧɢɜɚɧɢɟ
ɱɚɳɟ ɜɫɟɝɨ ɢɫɩɨɥɶɡɭɟɬɫɹ ɜ ɤɧɢɝɚɯ ɢ ɫɬɚɬɶɹɯ. Ʉɪɚɣɧɢɟ ɛɭɤɜɵ ɫɬɪɨɤ ɧɚ ɥɟɜɨɣ ɢ
ɩɪɚɜɨɣ ɝɪ
ɚɧɢɰɚɯ ɫɬɪɚɧɢɰɵ ɜɵɫɬɪɚɢɜɚɸɬɫɹ ɜɞɨɥɶ
ɜɟɪɬɢɤɚɥɶɧɵɯ ɥɢɧɢɣ. Ɍɚɤɨɣ
ɜɢɞ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɨɛɟɫɩɟɱɢɜɚɟɬ ɷɥɟɦɟɧɬ <p style="text-align:justify">.
Ʉɪɚɬɤɢɟ ɢɬɨɝɢ
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ ɩɨɡɜɨɥɹɸɬ ɨɬɞɟɥɢɬɶ ɩɪɨɰɟɞɭɪɭ ɫɨɡɞɚɧɢɹ
ɫɨɞɟɪɠɚɧɢɹ ɫɬɪɚɧɢɰɵ ɨɬ ɩɪɨɰɟɞɭɪɵ ɩɪɢɞɚɧɢɹ ɟɣ ɧɭɠɧɨɣ ɮɨɪɦɵ.
ȼɧɟɲɧɢɟ CSS ɞɚɸɬ ɜɨɡɦɨɠɧɨɫɬɶ ɭɩɪɚɜɥɹɬɶ ɮɨɪɦɨɣ ɫɪɚɡɭ ɧɟɫɤɨɥɶɤɢɯ
Web-ɫɬɪɚɧɢɰ ɢ ɞɚɠɟ ɫɚɣɬɨɜ.
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]