Upload
da-garofalo
View
457
Download
0
Tags:
Embed Size (px)
DESCRIPTION
A presentation about finetuning Cascading Style Sheets (CSS) for web pages.
Citation preview
�������������
���������� ������������������������
�� ������ ����� ��
� � ��������������������� ! "������#��$���%�������&'���(�$#
! "��#�����)�*���$#��&���#�����'
! � ��%���+�,��)��
2
! � ��%���+�,��)��
! %����'$���'�*����&'���(�$#��$���'�%��
! %����'$���'�#������$-��&'���(�$#��$���'�%��
! .��#��'�%���&'���(�$#�����$����
CSS Page Layout Overview
� /0%�"���--��)#�����&$*��� �)�������1
� "���*���*��������$&&��#����%�����#����# ��-��'
3
���# ��-��'
� 2����#������--���&��#����#��)���'����*�&'���(�$#����# �%��
3,-&��� � ##& 44����)��*���#(�'��� ##& 44��������)���-� ##& 44������&����-� ##& 44����#�$'�������-
CSS Page Layout Advantages� ���#���#(&�'�& (����#���� �#(�����&�#�����-��#�$�#$��� 5�#��#���(��-�����)��$-��#�� 3�������#��-��#������ �������)�&'���(�$#����#���
4
� �������)�&'���(�$#����#���� �������)�������*���#(� �*���#(�#��)�������#(��������-$�#�&���-�)��#(&��� �$&&��#����# ����-�#���/�*
��� ��� ������� �� �� ���
� ���$�����# ���6����$�����-�*��������$&&��#����%��
5
� 7��������8�.����98�.��)�&'���(�$#�$���'�#*���������&��)$�#���#(�)��&�� ���������'�#��$���%���
������� ����
� %��#��#! ��,#�:���*�&'�����-��#�����# �����#����
� 5))��'! ����*�#�����# �����#��#��)�# ��*��)��
� +��)��! +�#�����# ��&))��'�
6
! +�#�����# ��&))��'��)�# ��-�'��
� �'��! ��#��-�����# ���-&#(��&���*�#�����# �����-��#��)�);���#����-��#�
���� ����
� +�������)��&�(�������-��#�����# ����)���# �(������)�)����# ��/�*�&'��)��$-��#
� <���-���������-#������� � ##& 44����*���*������-4#$#�����48�.=�)=%��42��-�=<���� #-
!�� ���������������
8
% �'���# �����#������������-��#�������#����#��� �����#���$�)��# �������&&��<���-���������-#������� � ##& 44����*���(��#>���-4��������#4 #-�?#�����'4���4&���#�����'4
h1 { background-color:#cccccc;padding:5px;color: #000000;
}#myContent { position: relative;
left:30px;font-family:Arial,sans-serif;
}
"#�����������������5�������(��&��������# �����#������������-��#����# ��*����������)��
9
h1 { background-color:#cccccc;h1 { background-color:#cccccc;padding:5px;color: #000000;
}#content {position: absolute;
left:200;top:100;font-family:Arial,sans-serif;width:300;
}
<���-������������� ##& 44���?)���$������$#�����-4@&'�A�*���$#�.(�$#�
"#�����������������$� � %��
��� ����%����
� 3��-��#��# #����-�#��B���#C����# ����' #�������#���)�������# ���
11
h1 { background-color:#cccccc;padding:5px;
������#���)�������# ���# ��*����������)��������# ������-��#������#��������'$��)�$���'�# �����#�&��&��#(��� % ��6��$#� ##& 44����-,)���'����-�$4���#$#����4
padding:5px;color: #000000;
}p { font-family:Arial,sans-serif;}#yls {float:right;
margin: 0 0 5px 5px;border: solid;
}
���%� ����%����
� %����'$���� ����)���������-��#����)��&�(�)�
! display:none ;� � �����-��#��������#�*��)��&�(�)�
! display:block ;� � �����-��#�������)���)����*���6����-��#��??���������#�
12
� � �����-��#�������)���)����*���6����-��#��??���������#�����#$��(�������������-��#��$� ���� (&�����6�
! display:inline;� � �����-��#������*�����)���)���������������-��#�D���������#�����#$��(��*���6����-��#�D�$� ����E��F�
! ����# �����#������-���������-#��� � ##& 44'��6���# *��'����#4�#�& ���'��-4�� ���4���14��4�G4)��&�(?&��&��#(?�����&,
&�'�������%����
� �)������# ���#�6��'���)���������-��#������/�*�&'��
� � ��)��$�#�>?��)�,���$�����B�C��
� 3��-��#����# � �' ���>?��)�,���$��������&&���
13
��)�,���$��������&&�������������#�&�������-��#����# �������>?��)�,���$������)���)����# ���-��������# ��&'��
� % ��6��$#� ##& 44�����0�� �������-4%��4&�=&��=>?��)�,��&
�����%������( ��� ���� ��� ����
) ���� ������ &���#���� #�&� ���#� *�##�-� ��' #� ��)#
14
� ��)# � -��?��)# � -,?��)# � ��' #� -��? ��' #� -,? ��' #� >?��)�,� ����*���#(� ��������� ���#� ����� ���&
!����
���/ #����# �����������#��$���%�������&'���(�$#@
���/ #����# ��)����������*�#��������#�����)�*���$#��&���#�����'@
15
���#�����)�*���$#��&���#�����'@
0��/ (���$�)�(�$�$���# ��>?��)�,�%���&��&��#(@
��� ��
� ����$� � %��NOTE: Except for imagelogo, all elements on this page follow normal flow
� ����� �� ��� ����� ��&&������#����# ��#������$-���D��#��)��$�#�*�6'��$�)������
� .��#?���$-�����'#���
17
� .��#?���$-�����'#���! ���# ����#H
! ��)# ���&,H
� "�' #?���$-�����#��#! -�'��?���# ����&,H
� ���#��' #�I�������& �#�J! ���# ���' #H
� ����� �
� ��� ����
body {margin:0;font-family:Verdana, Arial, sans-serif; }
#wrapper { background-color:#e8b9e8;color:#000066; }
#leftcolumn { float:left;width:100px; }
#rightcolumn { margin-left:100px;background-color:#ffffff;color:#000000; }
#logo { background-color:#eeeeee;color: #cc66cc; font-size:x-large;border-bottom: 1px solid #000000;
18
border-bottom: 1px solid #000000;padding:10px; }
.content {padding:20px 20px 0 20px; } #floatright {margin:10px;
float:right; }.footer {font-size:xx-small;
text-align:center;clear:right;padding-bottom:20px; }
.navBar{ text-decoration:none;margin: 15px;display:block; }
������������*����� �� ������
� 7������� ! ����#(���&&�����#��-����# ���������-��#�����&'�! ��I)�#J���##�������# ���#(���� ��#��! �����##��*$#�����# ��98�.�
19
! �����##��*$#�����# ��98�.�
� 7����) ! ����#(�������&�������#�����(��������-��#�����&'�! K���##�������# ���#(���� ��#��! �)�##��*$#�����# ��98�.�
������� � � �*�� �� ��
� ������&#�������# ��&$�&��� ! �$� ����������������#�����)������
� ���-��#���--���(�$��)�������-�����
20
���#����-��$��#�#�����-����#�,#�����#��#�� �)����������&(��' #���)�*$##���
� ��$��� � ##& 44��)��'��'�����-4��*�##�
����#��������%�
� �$��(�� ��6��(�#,�������� 7���/0%�%���L��)#���#��� ��6���(�#,�������! ##& 44;�'����0���'4���?���)#��4� %����'$���#�-&���(�*�6'��$�)�������
21
� %����'$���#�-&���(�*�6'��$�)�������� %����'$���#�-&���(�*��)���� 7�����--��#��#�����)�# ��$��,&��#�)����)�� ���M#��,&��#�(�$��&'���#�����6��,�#�(�# ���-��������*�������N� +��&#���#N
��� ��� ����!��������
� <���))�#����������-#����#�( � ##& 44'��� ���-4���4! .�'��������#�������%���&'���(�$#���)����6��#��#$#�����
� ##& 44��*��#�#�&����-4�#�����4���4
22
� ##& 44��*��#�#�&����-4�#�����4���4! %�-&�� ����������#����#$#�������)�%��?���#�)���#��
� ##& 44-�(����*���-4����4���4! 3�����(������)��'?�)'����*�)�����&��
� ##& 44�����0���'4�#(��4%��4������'! /0%M�����#����%�������$����
� ##& 44����*�$���*�#���-4��*4�(�$#�4! �������#�������%���&'���(�$#�
� ##& 44����*���*���(���-4��)�,)�#4���4! �)����)�%����(�#,��������������#
��� � ��
� %�����)�����?#$���'�%��)��'��#(���� ��#��#�������'$���&'���(�$#��
� +��&#���#�
� "�������'�# ��%�������$����
23
� "�������'�# ��%�������$����
� �#�#6���#�-��#��'��&�# ���#�� ����'(�