Работа в Internet и создание web-страниц. Эксаревская М.Е. - 31 стр.

UptoLike

ВУЗ: 

ВГУ | Воронеж

Составители: 

Рубрика: 

ɩɪɢɫɜɨɢɬɶ ɦɧɨɝɢɦ ɷɥɟɦɟɧɬɚɦ (ɬɚɛɥɢɰɵ, ɫɫɵɥɤɢ ɢ ɬ. ɞ.), ɜɥɢɹɸɳɢɟ ɧɚ
ɨɬɨɛɪɚɠɟɧɢɟ ɨɛɴɟɤɬɚ ɧɚ ɷɤɪɚɧɟ ɛɪɚɭɡɟɪɚ.
Ɍɚɛɥɢɰɵ ɫɬɢɥɟɣ ɩɪɟɞɫɬɚɜɥɹɸɬ ɫɨɛɨɣ ɢɧɫɬɪɭɦɟɧɬ ɜɨɡɞɟɣɫɬɜɢɹ ɧɚ
ɜɧɟɲɧɢɣ ɜɢɞ web-ɫɬɪɚɧɢɰɵ. Ɇɟɯɚɧɢɡɦ ɞɟɣɫɬɜɢɹ CSS ɜ ɨɛɳɟɦ ɜɢɞɟ ɬɚɤɨɜ.
ɋɬɪɭɤɬɭɪɚ HTML-ɞɨɤɭɦɟɧɬɚ ɪɚɡɦɟɱɚɟɬɫɹ ɫ ɩɨɦɨɳɶɸ ɬɟɝɨɜ, ɚ ɫɜɨɣɫɬɜɚ
ɷɬɢɯ ɫɬɪɭɤɬɭɪɧɵɯ ɷɥɟɦɟɧɬɨɜ ɫɬɪɚɧɢɰɵ ɨɩɢɫɵɜɚɸɬɫɹ ɨɬɞɟɥɶɧɨ.
Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS ɢɦɟɸɬ ɫɥɟɞɭɸɳɢɟ ɨɫɨɛɟɧɧɨɫɬɢ.
1. Ƚɢɛɤɨɫɬɶ ɩɨɞɤɥɸɱɟɧɢɹ.
2. Ʉɚɫɤɚɞɧɨɫɬɶ.
3. Ɂɚɜɢɫɢɦɨɫɬɶ ɨɬ ɫɪɟɞɵ ɩɪɟɞɫɬɚɜɥɟɧɢɹ.
4. ɇɚɫɥɟɞɨɜɚɧɢɟ.
ɋɢɧɬɚɤɫɢɫ
ɋɢɧɬɚɤɫɢɫ CSS ɜ ɨɛɳɟɦ ɜɢɞɟ ɢɦɟɟɬ ɫɥɟɞɭɸɳɭɸ ɮɨɪɦɭ:
ɫɟɥɟɤɬɨɪ {ɨɩɪɟɞɟɥɟɧɢɟ}
Ɉɩɪɟɞɟɥɟɧɢɟɦ ɫɬɢɥɹ ɧɚɡɵɜɚɟɬɫɹ ɩɚɪɚ «ɫɜɨɣɫɬɜɨ: ɡɧɚɱɟɧɢɟ». ȼ
ɤɚɱɟɫɬɜɟ ɫɟɥɟɤɬɨɪɚ ɦɨɝɭɬ ɜɵɫɬɭɩɚɬɶ ɷɥɟɦɟɧɬɵ, ɤɥɚɫɫɵ ɢ ɨɞɢɧɨɱɧɵɟ
ɨɛɴɟɤɬɵ. ȿɫɥɢ ɞɥɹ ɫɟɥɟɤɬɨɪɚ ɨɩɪɟɞɟɥɹɟɬɫɹ ɧɟɫɤɨɥɶɤɨ ɫɜɨɣɫɬɜ, ɨɧɢ ɞɨɥɠɧɵ
ɪɚɡɞɟɥɹɬɶɫɹ ɬɨɱɤɨɣ ɫ ɡɚɩɹɬɨɣ. ɇɚɩɪɢɦɟɪ, ɨɩɪɟɞɟɥɢɦ ɫ ɩɨɦɨɳɶɸ CSS
ɡɟɥɟɧɵɣ ɰɜɟɬ ɚɛɡɚɰɚ <p>:
p {color: green}
P – ɫɟɥɟɤɬɨɪ, {color: green} – ɨɩɪɟɞɟɥɟɧɢɟ ɫɬɢɥɹ ɞɥɹ ɷɬɨɝɨ ɫɟɥɟɤɬɨɪɚ, ɝɞɟ
color – ɷɬɨ ɨɩɪɟɞɟɥɹɟɦɨɟ ɫɜɨɣɫɬɜɨ, ɚ green – ɡɧɚɱɟɧɢɟ ɷɬɨɝɨ ɫɜɨɣɫɬɜɚ.
ȼɵɞɟɥɢɦ ɡɟɥɟɧɵɦ ɧɟ ɜɫɟ ɚɛɡɚɰɵ ɜ ɞɨɤɭɦɟɧɬɟ, ɚ ɬɨɥɶɤɨ ɚɛɡɚɰɵ ɤɥɚɫɫɚ
green.
p.green {color: green}
<p class=”green”>ɗɬɨ ɬɟɤɫɬ, ɤɨɬɨɪɵɣ ɦɵ ɫɞɟɥɚɥɢ
ɡɟɥɟɧɵɦ</p>
Ⱦɥɹ ɜɵɞɟɥɟɧɢɹ ɜ ɬɟɤɫɬɟ ɬɨɥɶɤɨ ɨɞɧɨɝɨ ɚɛɡɚɰɚ ɢɡ ɦɧɨɠɟɫɬɜɚ ɫɥɟɞɭɟɬ
ɩɪɢɫɜɨɢɬɶ ɟɦɭ ɭɧɢɤɚɥɶɧɵɣ ɢɞɟɧɬɢɮɢɤɚɬɨɪ:
<p id=”green”> ɗɬɨ ɬɟɤɫɬ, ɤɨɬɨɪɵɣ ɦɵ ɫɞɟɥɚɥɢ
ɡɟɥɟɧɵɦ</p>
ɋɞɟɥɚɟɦ ɡɟɥɟɧɵɦ ɧɟ ɬɨɥɶɤɨ ɧɟɤɨɬɨɪɵɟ ɚɛɡɚɰɵ, ɧɨ ɢ ɡɚɝɨɥɨɜɤɢ,
ɫɩɢɫɤɢ, ɚ ɬɚɤɠɟ ɥɸɛɵɟ ɞɪɭɝɢɟ ɷɥɟɦɟɧɬɵ. Ɉɩɢɫɵɜɚɟɦ ɤɥɚɫɫ:
31
��������� ������ ��������� (�������, ������ � �. �.), �������� ��
����������� ������� �� ������ ��������.
      ������� ������ ������������ ����� ���������� ����������� ��
������� ��� web-��������. �������� �������� CSS � ����� ���� �����.
��������� HTML-��������� ����������� � ������� �����, � ��������
���� ����������� ��������� �������� ����������� ��������.
      ��������� ������� ������ CSS ����� ��������� �����������.
           1.   �������� �����������.
           2.   �����������.
           3.   ����������� �� ����� �������������.
           4.   ������������.
     ���������
     ��������� CSS � ����� ���� ����� ��������� �����:
     �������� {�����������}
     ������������ ����� ���������� ���� «��������: ��������». �
�������� ��������� ����� ��������� ��������, ������ � ���������
�������. ���� ��� ��������� ������������ ��������� �������, ��� ������
����������� ������ � �������. ��������, ��������� � ������� CSS
������� ���� ������ 
:
     p {color: green}
P – ��������, {color: green} – ����������� ����� ��� ����� ���������, ���
color – ��� ������������ ��������, � green – �������� ����� ��������.
       ������� ������� �� ��� ������ � ���������, � ������ ������ ������
green.
       p.green {color: green}
       
��� �����, ������� �� �������
�������

     ��� ��������� � ������ ������ ������ ������ �� ��������� �������
��������� ��� ���������� �������������:
     
 ��� �����, ������� �� �������
�������

     ������� ������� �� ������ ��������� ������, �� � ���������,
������, � ����� ����� ������ ��������. ��������� �����:

                                   31

Страницы