88
!"#$ %&#$ !%’!(#

HTML5 CSS3 by Examples Chapter1

  • Upload
    su-chin

  • View
    71

  • Download
    0

Embed Size (px)

DESCRIPTION

How to work with HTML CCS3 with a examplesThis is the chapter 1 of that to do

Citation preview

Page 1: HTML5 CSS3 by Examples Chapter1

������������ ��������� �������������������������� ���� !"#$���%&#$�� !%�'!( #��

Page 2: HTML5 CSS3 by Examples Chapter1

����������������

�����������

�������������� �� ������ �

����������� ��������

��

��� �����

� ������� ���� ������������ !�"#� �$%%&

� $������ �������� !�"#�� '��'��������()��*��'��� ��

� "��� � ��������������������� ��� �����������

������������ ��������� �������������������������� ���� !"#$���%&#$�� !%�'!( #��

Page 3: HTML5 CSS3 by Examples Chapter1

������������ ���

���������������� �������� ��������������� �� ���� ���������� �������� �� ���������

�������������������� ��� ��������������������������������� ��� ������� � ����

��� !"�# �����������$%� ��&���� ����&�� �� ��������%&&�������� ��� ������'������

��� !(��� �������� �� ��� ��������� �� ���� ��� �����������������%���)�����*�� �����

���� ��+ �� ���� ���� ��+��� ���� ��� ����� �� �� �� ������ ��� ������ +��,�-� ./� 0���

������ ��.1� ./��2)������� ��.1� .�2)�%�� �� ���3�������.1� .0������� ���/�������.� ���� .�/�34�

�������5��%%��+��&6�����.��

��������� ������ ������� �������� ������

/ ��+��,� ����+� ���.��� �.�+�� �������� ������� ��� ������ ������.��� �.��/���������������+� �����,�

���#���������������, ��1�6��������� ��� �1�# ������������������������������������� �������� ��� ��

� ��+��,��

/ ��+��,� ������ ������� �������������������������������+����� ������������ �������������/�����������

����+� ������������+�� �+�� ����������� �� �������������7��� ���������� �������� ���# �1������ � ���

���� ��1� �� ���� � ��1� ���������1� ��� �� ��� ��� �� ��������1� ����� ���� ������� ���1� ���8��� ��� ��� ���

������� � ����� ����

������������� !���������

����� ��9� "���� +��������������2��� � ���� ���������� ����� ��� � �� +��,����� +� ��������1� ������ �� ��

��� ���������1���������� ���� ��������������+����������1������� �1��������� ����������� ��1�# �������

6�����#� ������������������������������+� ����/� ������� �������� ���� �� ���������������������

��������+� ����������� ������������ �����������1�����+��,�1�����+���1��������, ����������#���# �������

#� ������������������������������+� ������, ������ ������ ��+��,������������ ����������������������

����������#����� ����� ���� ���������� ���%���������� �����#���

�%$�:��-� ;!:�: ;;;!�":<: ��%$�:��-��: ;;;!�":<:��

3 +���������������������������+�-�"��; <"���

�� ���%���������� ���=�� �-���� � �������>� ����� ���?/@�(:4�;:�" �

�������A��� ������

0� ���� ��/��� ���%��������2�� ����

�/�34��2�'2%������%%��+� &@2�03&%� ;!:�: ;;;!�":<: B��� ��1�B���1�2� ��� �����

Page 4: HTML5 CSS3 by Examples Chapter1

��������������

� ���������������������������������������������������������������������������������������������������������������������

� ���������������������������������������������������������������������������������������������������������������������

� ������������������������������������������������������������������������������������������������������������������

� ���������������������������������������������������������������������������������������������������������������

� �������������������������������������������������������������������������������������������������������������

� ���������������������������������������������������������������������������������������������������������

� !�������������������������������������������������������������������������������������������������������������

� "���������������������������������������������������������������������������������������������������������

� #��$����%�������������������������������������������������������������������������������������������������������

� &��$������������������������������������������������������������������������������������������������������������

� ��$�������������������������������������������������������������������������������������������������������

���'�(�������� ��)��'����� ����������������

��� ��� ������� ������������� ���������

�� ��� ����� ������� ���� ������������� ��������

��� ���!"#�� ��������������� �������$%���&���� �������������� ���������

'(�)�*�� ���� �&�

+,#-�� ./0.������ ����1& '2.#�-'�����343������33� 5���6���7�5�)��7�.��)��� ���

Page 5: HTML5 CSS3 by Examples Chapter1

� ��������������������������������������������������������������������������������������������������������������������

� �������������� ��������������

� ��������������������������������������� !� ����

� ����"������������#��������������������������#��������� !� ����

� ����$���������!����% �&��'(����������

� ��"����������� ������)*+��

� ��"������������� ������)*+�,���-.�����

� ��"�"���(� �/ ���� ��������������

� ��"�$���(� �/ ���� ������)*+��

� ��"�0���1��/ ���� ��������������

� ��"�2���1��/ ���� ������)*+��

� ��"�3���������!����% �&�4���5666666����������

� ��$���� �!����% �& ��! �!�������������

� ��$�����������!����% �&�4 7����������������

� ��0���� �!����% �& ��! �!�����)*+��

� ��2���������! �!�������������

� ��3���������! �!�����)*+��

� ��8���� �����! �!�������������

� ��9���� �����! �!�����)*+��

� ������ � ����%�#����������

� ���:��� � ����%�#��)*+��

� �������+��!���!�������������

� ���"���+��!���!�����)*+��

� ���"�����+��!���!����% �&������;����������� $��

� ���"�"���(�� !�� $��&������� $��

� ���"�$���+��!���!����% �&�!������� �������������

� ���"�0���+��!���!����% �&�!������� �����)*+��

� ���$���� �!�������������������

� ���0���� �!�����������)*+��

� ���2���� �!�������������������

� ���3���� �!�����������)*+�,���-.�����

� ���8���(�������������������

� ���9���(�����������)*+��

� �������<�!�������� ������������

� ��":���<�!�������� ����� $��

� ��"����<�!�������� ����)*+��

� ��""���=&��%&������)*+��

� ��"$���(�> ���!���������������

4=+72���?@� ������ $�# AB�+<7A ��89;:;�8889�";0;� '���& !�C�'����C��� ��� ���2

Page 6: HTML5 CSS3 by Examples Chapter1

� �����������������������������������������������������������������������������������������������������������������

� ��������� ��������������������

� ����������� �������������������� ��������

� ������������������������ ������������������

� ��������� ��������������������

� ����������� �������������������� ����� ��

� ���������!�������������"��#�������� ��

� ���������!�������������$���������$��%&�������� ��

� ����'���(��������) ������������������ ��

� ��������*�������������������� ����� ��

� ������+������!���

� ��������+������!���%,��)�!!�����������

� ��������+�!������������%,��)�!!�������� ��

� ���������)�!!�������������� �!� ����� ��

� ��'������!!�������

� ��'��������!!������� ������������������

� ��'������)�!!������� ������������������

� ��'�����-.!��� !����� ������������)� ����� ��

� ��'�'���-.!��� !����� ������������)� ���/(��

� ������-.!������ ��������)� �

� ��������-.!������ ��������)� ����� ��

� ���������� !),�����%,�0������� ��

� �����������00)����������)� ����� ��

� ����'������00)����������)� ���/(��

� ��1���2�3�������������)��!)����� �

� ��1�����2�3�������������)��!)����� ��������

� ��1�����2�3�������������)��!)����� �4�5 ����.��������

� ��1�����2�3�������������)��!)����� ����� ��

� ��6���+��������.���������

� ��6�����+��������.������������� ��

� ��6�����������������0�)��0��� ���������� ��

� ��������!)�������� ����������������������7*8���

� ����������!)�������� ����������������������7*8�����/(��

� ����������!)�������� ���������������������9�!��������

��/(��

:;(8���+<=+����������%, ->+(?8-��@6� A @666��� ' @ B�!��� C�B� C�+������ �1

Page 7: HTML5 CSS3 by Examples Chapter1

� ����������� �������������������������������������������������������������������������������������������������

� �������� �� ���������

� �������������� � �����������

� �������������� � ���������

� �������������� ������������������������

� ��������� ���� � ��! �"�#� � $ ��% ������������

� �������� �������� �����������

� ����������! ���! �"�����"�����#����#�����&��� ���

� ����������! ���! �"��'�� �����(���"�)������%��& ���!*+��

� ��������,������ ����$$���%���'�� ����������)�(���"��

� �����������������

� ��������� ���"�$����������

� ��������� ���"�$��������

� ������� ��������������� ���!�"������ ���

� ��������-��*"������! ����(���".� ��*�*�����

� ��������-��*"������! ���! �"�� �������� ���(���".������

� ����������! ���! �"�/0����������

� ����������! ���! �"����*�����������

� ��#���$�����"�����$������ ��������

� ��1�������������������������

� ��1�����2���� ������� �����3�!���������

� ��1�������������3�!���������

� ��1�������������3�!�������

� ��1�1���4� �3������������

� ��1�5���4� �3����������

� ��1�6��������4� �! �"��''����� � �����''���

� ��%���$��������������� ���������

� ��5�������� ���"�$�����(���".� ��*�*������������

� ��5�������� ���"�$��! �"�7(�81���� ������*�*��$���������

� ��5�������� �����"�$������ ��*�*����! �"�90����������

� ��5�����7��� ������#�����"�� #������''���

� ��5�1������ ��������$��%�"�$����������

� ��5�5���� �� ���"�$�� ������ �� ����������

7(�81��3:;3'������''���� <=3��8<'�>6+*?*>666+��*�*> @�$" �A�@�#�A�3� #�� ���6

Page 8: HTML5 CSS3 by Examples Chapter1

� �������������� ���������������������������������������������������������������������������������������������

� ����������� �� ���

� ��������������������������

� �������������������������

� ��������������������������

� �������������������������

� ��������������� ��� ��� ���� !"���������

� ����#�������� ����������

� ����������� �� �� ��� !"

� ������������$�%%����������

� ��������& � ��$�%%����������

� ���������������%�����������������

� ������������ �' ���������

� ��������(�%)��� *)���������

� ����������� �� �� �)

� ����������� ��+ ���,�*�����������

� ������������(���%����������

� ������������(���%����������

� ��������- ����*�*%�����������

� ���������� �� �$ !*��

� ��������+ !*��$�%%���������

� �������� !*��$�%%��������

� ��������+ !*��$�%%�� ��./!��0����� �����12,��

� ��������+ !*��$�%%�� ��./!��03������12,��

� ��������+ !*��+�%%�� ��������"�4 �����������

� ����#���+ !*���"�� � ��$�%%�� ��������12,��

� ����5���+ !*���"�������������

� ������6� ��%� ��$�%%����������

� ����������� �� ��*� %%

� ���������*� %%��+�*)�� !"�� ������ ���������

� ���������*� %%��+�*)�� !"�� ��.� ���������

� ���������*� %%��+�*)�� !"�� ������ ��������

� ���������*� %%��+�*)�� !"�� ��.� ��������

7�,8���6496���"������$0 �:6,;8���<5�=>=<555���=�=< ?����*�@�?����@�6�� ���

Page 9: HTML5 CSS3 by Examples Chapter1

� ������������� �����������������������������������������������������������������������������������������

� ��������� ������������������

� ����������� ��������������� �����

� ����������� ������������������������ �!������� �����

� ��������" ����� #���� ��������������� �����

� ����$���" ����� #� �%���������� ���� �����

� ������& ��'�������������� �����

� ��������& ��'���%��'����������

� ��������" ����� �� ��'���%�������������

� ������"�(�) !�*� ���++���

� ���������!�,-��� �,�) !��� �������

� ��������*� ��������� �����

� ��������*� ��������������# ����� �����

� ����$���*� ������������

� ��������*� �����������# �� ���� ��./�! # �������

� ��$���01�2������������ �����

� ��$�����01�2���������������

� ��$�������'3#� !�2�!���++���

� ��$�����4� ������������

� ����������������������������������������������������������������������������������������������������5�

� 5�����6 � �'��� ����� #�+��� ����� �����

� 5����������� #�7�������'38 8��#�� !�9�'�8 8��#���� �����

� 5�������:���+'������������'� ��� ����� �����

� 5�������:���+'��������� �'� ������� �����

� 5�����6 � �'��� ����� #�+��� ��������

� 5����������� #� '�� #� ��������

� 5����������� #����� ��������

� 5��������� #�7�������'38 8��#�� !�9�'�8 8��#

� 5����������� #�;���� #����� ���'� �����

� 5�$���*' ��� #����� �

� 5�$�����+������ #����� ����� �����

� 5�$�����+������ #�;�6 � � '�� #����� ����� �����

�9�4���"<&"+�� !��++��%- =0"�*4=+�>?.8/8>???.��8$8> 2����'�@�2�� �@�" ����� ��>

Page 10: HTML5 CSS3 by Examples Chapter1

� ������������� ���������������������������������������������������������������������������������������������.>

� ?�����6��# ��� �������

� ?�������( 8�� !�!��� #� ����# ���� �����

� ?���������� #� #��� �!#�'�������) ��� � ����� �����

� ?�������9� ���� ��� �!#�'����� �����

� ?�����+��� �" �����

� ?�����������'�+��� �� ����� ���� �����

� ?�������=�������� ���� �����

� ?�������=)��� #�+��� ���� �����

� ?���$���7��3� #��� ���� �����

� ?��������++������ ���++���

� ?��������� #����# ���� �����

� ?����������� #����# ������'��'38 8!�#��� ���� �����

� ?�������A�� #���������# �� �'�'� ���� �����

� ?����������� #����# ������9�'�8 8��#��� ���� �����

� ?���$������� #����# ������ 8,� # ���'����� �����

� ?����������� #����# ��������� #� '�� #� ���� �����

� ?���5������� #����# ������9�'�8 8��#���� �����

� ?���?������� #����# ��������8,� # ���'����� �����

� �������������������������������������������������������������������������������������������������������

� .�����9�� #������������

� .�������*��� #�� !�B�� C(������� �����

� .�������*��� #�� !�B�� C(����������

� .�������*��� #�� !��� ���'�� ���'������ �����

� .���$����� !-�D�����-�� ������ �����

� .�������������� � ���� �����

� .�����*�����)�� �����

� .���������'3#� !�*�����)���� �����

� .���������'3#� !��������� #�'��!����� �����

� .���������'3#� !��������� #�'��!����++���

� .���$������ #�'��!�������!�,, ���� !����� �����

� .���������� #�'��!�������!�,, ���� !����++���

� .�����+���+-�� �

� .�������=����'�'����%�����++���

� .�������=���� ������'���%������ �����

� .�������=����� !������ ���++���

� .���$���=����� !������ ���� �����

� .�������+���+-�� ����++���

�9�4���"<&"+�� !��++��%- =0"�*4=+�>?.8/8>???.��8$8> 2����'�@�2�� �@�" ����� ���/

Page 11: HTML5 CSS3 by Examples Chapter1

� �������������� �������� ��

� �������������� ���������� ��

� ������������� ����������������������������������������������������������������������������������������������

� ������������������ ��

� ������������������!"������ ��

� ��������#�$���%���������� ��

� ��������#�$���%������&'��!������ ��

� ������������������� ��

� ��������(�������)"������������� ��

� �������� ���!��)"������������� ��

� ������������������ �������*�!"�� ����� ��

� ����+������������*�,�-����������� ��

� ������./���� ���� �

� ��������./���0"���������� ��

� ��������./���0"��������� ��

� ��������'��1��21����3���� �4� ����� ��

� ����+���'��1��21����3�������� ����� ��

� ����5���./���!!������ ��

� ��+���./�������6��

� ��+�����0�����!/1���"�-����� ��

� ��+�����./�������6������ ��

� ��+�����./��������-����6������ ��

� �����������������������������������������������������������������������������������������������������������+75

� �7���������������� �

� �7���������������4�� �3�����������"�� ���������� ��

� �7���������������!��� ����� ��

� �7���������������8���*������ ����� ��

� �7����'���� �

� �7������.--����!�"�/����!����� ��

� �7������.--����!�"�/����!���� ��

� �7������'�"�/����!�������� ��

� �7����./������ �

� �7������./���$"��������� ��

� �7������./�����������/�� ��

90 :5��#;<#���-������!� =># .:=�����&7&�������&+&� )�4��/ ?�)�� ?�#������� ���

Page 12: HTML5 CSS3 by Examples Chapter1

�����������

���� ������ � ����� ���� ���������� ���� ���� �������� ����� ������� ��� ��������� ����

��������������������������������� ��������������� !"���������������������������

��������������������������������������� !"��#���������������������������������

���� �������������������������������������� ������������������� �����������������������

����������������������������� ������$��������������������������� !"���������

�������������$�������������������������� !"����������������������������%&&'�����

��������� ��$�� ��������������������������(������ ����� ��������������������� ��� ����

�� !"��������������������%&&'������)* �����������

������� ��$��������������������������������� ������ !"����������������������%&&'��

������������������������������������������������� !"�����������������%&&'�)* �

�+����������������������������� ������� �������, ��������������������������� !"�

��������������� ���������������������� ���%&&'����������)* ����������-������������

����� �������� ����������������� ����������� ����.������������ �������� ����� ������������

�����������������/�������,&����/�����������������, �,��������������������� �����������

�����������������������������������������������������

���� ��$� ����� ��$�� ������������ ����� ���� ����� ����� ����� $��������� � ����

������������ ����� !�0���&����������%&&�� ���������1���������2��� 3������������

����������������������$������������������ ���������������������������������� ��$�����

���������������,���������������������������������/��������/����������������(�������

������������������������������������4����������������������������������������������

����� ���� �������� ����� ���� ������ ���������� ��� ���$���� ��� ���� ������ ���� �������� �����

��������� ���� ������� ��������� �������� ����� ���� ���� ���� ��� ������ ��� ��� ������ ��

����������

����� �����

���������� ��� ����������� �������� ���������� ������������ ������������ ��������� �� ���

�������� �����������������������������������������������������������������������������

��������������������� ������������������������������������������5������%����� ��$�

����������(�����,6� �� ���������������������������������� �������������������������

���������� *����� ���������� ����� ������� ������ ���� ������� ���� ����� ������ ������� ���

��$�� ���� ��������� ��� ����� ��$� ��� �� ������������ ���������� 2��� ������������

����������������$��������������������������������������������������������������������

���������7����������������������������������������$������������$�� �����������������

����8������������������������������������������$���������������������������

�� !"�%9#:9&�����%&&'� � ;<9 �!;&�=>6,?,=>>>6@A,B,= 5��������5�����9����������@A

Page 13: HTML5 CSS3 by Examples Chapter1

� �������������������� ��������

������ ��� ���� ����������� � � ����� �������� ������� ���� ������� ���������

�������� ��� ���� ����� ��!��� �������� � � ����"� ��� ��������� ������� #����� ����

������ ������ ���!��� ��������� ������$����������� �����%��� ���� ���������� �

���� ����������&� ����'"�#���� ������ ����������#� ����(� � ���� �����������������&�

����������� ��������)�������)������� ��������*���� �������������������������

��� �$��������#&� ���� ��$��������#&� ��� �� ���� ���� ������ $������ ����"�� ������

������$�������+������ ���������#������

����� ���������� ������������ � ���� ����������������������� �����,��������-�����

����������������&�-������������� ������������������%������������ �����������

������� ����� ���#� ���� ��������� ��� .��������� ����� ��� ��� ������ �� ��������$��

���� �����$������������������#���������#�������� ������/��������� ������� ������� �

����� ������� ����� 0�� ������ ����� ���� ����� ��� ��$�� ��� ������� ���� ����#�

��������1������2&� ��������$�����#������%����2&�� ������� ��� �����������

*���� � ���#� ��������� �������� � � ������ ���� �����&� $����&� ��$��&� ���

�������&� ������ ������� ��� �������� ����� ���� ��$��� ��� ����&� �� � � ��� ��� �

��������������������&�����������$������������������#�������� �����������������

���������������� ��������"��������$������ ����������������������� ���������

������#���� ��������������������������$��#�������� ���#��������������

3���� ��� �� �������� ������� �� ���� �� ���� � � ����&� ���� ���� ������)�� �������

��������������������� ����������)����������� �������� ������������������� ����

��������������$��#� ���������������

� ������ ���������������� �����4�� ����

3�$�*����������� ����������������������� ����� ������������� ����$��# ����&�

3�$�*������ ��� ����� �$��# ������ 0 � #��� ���� ��� ���� �� �#� ��� ��$�������&�

3�$�*��������#����#������#�����������������3�$�*�����&������ ���������������

������� 3�$�*������ ������������ ���� ��� ���� �#����� ���������� ��� �������

���������������������������������5������

3�$�*���������������������������������������������������������(���������

��������������������������������0����������������������������������������

��������������� �������������� ���� �����������#������ ����������� ����

��������� ���������#� � � �� ��������� ������� %��������#&� �� ��� ������

3�$�*����������������������������� ���������������� &���������������� ������ ����� �

�� ��������� ������ ������ ����� �$�������� ����� �������� ����

������6,(7,*����6**8��# 9:,�;�9*�<=>�?�<===>'@�"�< -�������&�-����&�,��������'8

Page 14: HTML5 CSS3 by Examples Chapter1

��������� ��� ���� ������ �� ��� ���������� ����������� � � ��� ����� ��

������������

��� ������������ ��� � ������������������ �� ������� �� �� �������

����� ��� ������ ����������� �� ��� �� �������� ���� �������� �� ���������� �!�

�����������������������������"#$%������������� �������������

� ����������� ���� ��� � ������� ��� ���� �� ��� ���� �� ��� ��� ���

���������������&�������������� ��� ���� ����� ������ �������������

����������� ������������������������������������� ��'��������������

( ����)$������* ���������%��� ���

+��,�����������������+���+���� ������������#��������- ��������

��� ��� ����������� � �����"#$%./+��,/����������+��,����������

���� ��� ��� ��������� ��"#$% ��������"#$%./+��,/ ��������� �� ��

� �� �� �� ��� ���������� ��� +��,� �� ��� ��� ���0��� ��� �� ��

������������������������ ������������������

���� ��� ��� ��� �� +��, ��� ��� ��'�� � � ��� �� � � �������� � �����

������� � �������� �������� ������������������������������+��,����

���������������� ����� ���������� ���� � ��������� ���������������

��������� ��������������������� ���������#���� ��������������

�������������� ������������� ��+��,����������������������� �

������������� ���������������� ������������

�������������� ���� ����� !����������"��������#�

$���������%"����!�� �������

����&'�������������!" ��������!������&�()&�(��#�

����� '�������������!" ��������!�������&�()&�&�(��#�

���� &'�������������!" ��������!������&&�()�&&�(��#�

����* '�������������!" ��������!������+&�()�&&�(��#�

�����&&'�������������!" ��������!������&�()&�(��#�

#�

1��� ���� ���)+��, ��������� ������'��������������#���������+��,

� ������ � �� ���- �����������������1��������������� ������

����� ���� ���������������� ����+��,� ��������������2!������- ��

��3���������������������3��3������ � ���� ����3�������� 3+���������

������� � �!���� ������3�#�������������� ����+��,�

"#$%.+1451��� +��,�� 671$8%6�9:;'<'9:::;=>'?'9 @��������@�����1��������=?

Page 15: HTML5 CSS3 by Examples Chapter1

� ��������������������� ���

������������������������������������������������������� �����!������������������

��"����������������!���#��������$������������ �#�%��������"�����������������������

���� ��������#���� �������� ������ ���� ������ �#�%������ ��"������ ��!�� &'($� ����� ����

�������)��������������������������������

���� ����� ��� ���� ���� ������� ���������� (�� �������$� ����� ��� �����

�*�������� �� ���� ��������$� ��+� "��� ����� ��� �#���� ����� ���� ����������� ��"����� ���

��������!��)�����������������$���������������*��������"��������������������������

���"�������������������,����������������"����������-� .��

%���� ��� ���� ����� ��������� ��� ������� ���� ��� ���#���� /01� ���#������� �������� ���

�2 � �������$� /31� 4%%� ������������� ���� ������� ���� �������$� /51� ���,���������

�#���� ��������� ���� ���� ���������$� /61� ���� "����,��� ��� ������ ���������$� ���� /.1�

����������,����������������������������������"��������������,�����������

���� �������7������������� ��������� ��� ������� �� �8��#������ ���� ��������� �� ����

����7�������������'��*��������9����*�����$����������"����������������������#������

+���+�����������������2 �����������������������(�����+"��"+���������������������

��������������������������������������������8�����������������������������������

����� �#�%�����:�����������������������������"������

,�-!���.��!!/ �0-�������"���� �����

��������� ��/����!�1���,����!��!!�2�������� �2����

����,����!��!!�2�������� �2)�� �3���

#���

(�� ���� ���� ���� ��� ������$���� ������ ��!�� ����� ��� ����� ���� ����� �����*������ ���

��������0$���������� ���� �������� �����*����������� ������������������� ������$� ����

������������������

-� .�4;<=;%�����4%%5�"� >?; @>%�ABC,D,ABBBC03,6,A E������$�E���$�;���������0.

Page 16: HTML5 CSS3 by Examples Chapter1

� ������������������� ���������������

������������� ������������������������� ����������������������������������������

����������������������� ������������ ������ �������������������������������������

��� ������� ������������ ������!��������������������������������� �������������

������"� ��� ���!� ���������#���� ���� ������� ����� ��"��� �"�$%%&� ����� ��''������

��� ����

�� ���� ��''������� �������� ������������� ���� ���������� ��� ����� ��� ����� �������

������ ��� ���� ��� (���������� ����(� ����� ���������'������ � ������ ����� ����

������ ��� ���� ��� ����������� (�������������(������ �� ������ ��)����� �������� �������

#���� ���� ������ ������������� ��� �������� ��� ��� ��)����� ������ ���� �������'���� ���

�����'�������

$������������������������*�������������������������������������������"���� �����

���� ������� '��� ����� '������ ���������� ���������� ��������� ��"� ��)����� ����� ����

���������"�������'����������� �� ��������'���������)�������"��

���������� �������

+ ,�������� ������!����� ���������������������� ���������

- ������!�.��� ������������ ����� ���!� � ��!��������������������)����

/ ������������� ��.�����01������2�3���01�����4�01� ���"������0��"����"�$%%&1�

& ���������������0��� �������1� �����������������0���������)���1�

5 ��������������� ��������������

6 ���������'������ ��)���������'�������

7 ��'�����8������������������������ ����������������������"�

9 ������������ ������ ��� ��������� ������ ���

: ����������''������''���� ����������''�������"�

; ���������)���������� �� ������� ���������"�)<��"�

-+ �������������������"� �����������������������"�

-- ��������������01� ����������������������

$�������������������������

=4�>6�$�?@�%�����$%%&��" #A���>#%�;9:�+�;999:-/�5�; B�� ������B�����������������-7

Page 17: HTML5 CSS3 by Examples Chapter1

� �������������� ���

���� ������� � � ����� ����� ���� ������������ ���� ����� ����� ��������� � �����������

�� ����� ��� ������� � ���� �� ��� ���������� � ��� ��� ������ � !"#$� %��&��

������$�'��(������� ����)���*������+����������������� �����!����� ������ �

&��� ������������ ���� ������ ���� � �������� ������ &� �,����� ���������'�� �-(�

� ��%��&��' �����$�� �������������� ���!.+�*��������!����� ��������$����������

���������������� ������$���� ���������������������� &$� ��� ���������������������������

(������� /�� ���� �� ���!.$� '�� ����0� ���� �-(� ������� � �� %��&�� 1�����

"#2(���� &�%���,�1����"#+"�����' �������������+�

� ���������������

'����� ��� ������������������� &��,������3-(4�����-�������������������� ��

�-(������������������� ���� ���� ������ �� ����+���� ����� ���������������� ����0� � �

�-(�� ���� �� �$���� ���������� �����������������������0+��-(������ ����������� ,�

������������� ������� ���$��� �&��� ��������������5��67������������,+�

*�����$������� ��������8%���/�����8���� ��������� ��������� �������������������

����0+������ ����8�� �&�������8� ���� � �%���/�����$��������� ��������������� ���

������ ����� ��� �� �� � � ���� ���� ��������,� ��������,+� ��� �������� ���� ������$� ���

������8�������8������ �%���/������� �����,������� �����+������������� +�9���

��� ���� ���� ��������� ����&�� � � ���� ����� � ���� ����� �����+� 9��� �� � �� �

�� ,�+������������,������+�

�����������8���������8��������������������������������������������� ,���������� &�

��������+�-� � &�� �+�������������������������,�����������������+�5������$�,���

�� �� ,��� �� �������������������+�' ��,���*���:�&������&&�����������+������� ��

����� ��� ����� ��� �� � �����,� ���� ������ � � %���/������ � ���� �� �� ���� ��� ��� ���

������� �+����,���� ����������������,� &�$�,����������� ��������,� &������������

��,�����+�

� �������������������

*��� ' �����$� ��;�� �� ��� ������ ��� ��� ����� ���� ������ ����� ����� ��� ��� (���� &�

%���,�1����"#+"�� ��1�����"#+���������� �� ���������� ����� ,��+�������,�

����������� ������������ ��������� ��' ������������$��������� ����8'�����,8�

�������� �������+�(�����8-� ��������������������8������ ����������������,�

������������,+�<�������! !���&������� �������������+������ �&�������������� �������$�

,�����,��� �������� ����� ,������8������ �&��8������%��&���,+�

5��67��'1='(�� ���((0��, >'��6 (�?�.!#!?���."@!A!? %������$�%����$�' ������ ��"�

Page 18: HTML5 CSS3 by Examples Chapter1

��� �� � ����� � �� �� � ���� ���� ���� ����� 85��6������8+� :��� ��������� �����

' �����! ������ 85��6������8� ���� ������� �������,+� ��� ��,� �������� � � ����

�����$���� ��������� ����� �������������������� ����� ���,���������� ����

� +�*��������$���������� ������ ���������������������2/���2������2B�� $���� ����

���������������������$�����,��� ���������&�����������

�������������� ������������������

������������������ �����������

� ����������������������� ������

����� &���������������(�������/��������������)� &,����,�� ���� �� �� �$���� ������

���� � ���&������ �����2����������!� ���������� ���+� ��;�� C���� ��������� &�� � ����������

������� � ���� �� �+� � � ����$� ,��� �� � �� � ���� 8D�����;� ��� � � � ���� (������$�

��� ������������������<:(������ ������������������� ������+�

*�������������$�� ������������� ��&�����������������/�������������������������������

��� ���� ������ ����!� � �,����� ��,�����$� � � ������� � ��� ���� ������� ��,�����+� ����

��������,�������$���������$�� ������������� &�������������,������ ���������

�������+������!���,������������,������$���������������� ��� ,�������$�����������

�,� &������������������� �+�

- ��������� �� ������������,� &���������������(����(�������/������������ ���$�����

������������������������& ���������������(�������/�$�����&����;�� ����������� �����

����������� ����� $�������������� ������������������& ����������� ����������������

�� ���� �� ������ ����������,� ������� ���� ��� ���� ���+��,� &����� ��� ����� ������,��

'�������� ���,���������������;�������������� ��&������������-(�� �����-(�

��&�����+�(�����,$�� ������������%��&����,��������������&��' ������� ���������

� ������� &��������+�6��;�����+�

� �����������������������������

������ ������ ������� ������ �������� ����������!� !� ���� �2���2��,�����������

&����$� ���� ������� ������ &� ������� ��� ���,� ��� ��� �!� !� �� ����!�� ���� � �����

���$� ������ �� �� &�� ������� �� � ��� ������ � ��� ������� �� �������� �� ��&������ ���

���$�������$�� �������������+�

5��67��'1='(�� ���((0��, >'��6 (�?�.!#!?���."@!A!? %������$�%����$�' ������ ��".

Page 19: HTML5 CSS3 by Examples Chapter1

� ������������� ���������

�������������� �������������������������� � ������������������������� ��

�� �� ������ ��������� �� � � �� �� ��� ����� !"� �#����� ������!� ���

��������� !���$#����$"!� %�� ���� �����$&"� �#����� ������'� ���� ���� ��� � ��� ���(�

��������� ���!) ���������!����������������������������(���������� ����

��������� �����������������������������������������������������������

��� �� �(� ��� ��(� ��*�� �� �����(� +��� ���� ����� ���� ��� ��� ��� ������ � ��� ���

������ ���������������������������������(�

,��-��������������� ������ �����.-����/0(1(2(1��������������������������

��� ��������(����������$#����$3���� ��������(������� ������ ����� ������(�

4����������������������� ���������������������������������������� �

��� �����(�

&5%*6���)*'(���%�7�*$�����$�� $� ���*8�09�:�'�;�

���������������������������������������������8�

5%*6���)*'(���%7*$�����$�� $� ���*80����� ��8�9�������8�9�:';�

+��� ���� ����� ��� ��� ���� -������ �� �� ��� �������� �����8� 3��� �(����

�����(������ �3����(���(�

�������4<=4#��� ��##2��� .>4�?�.#�@AB$9$@AAAB10$C$@ D��������D�����4����������1@

Page 20: HTML5 CSS3 by Examples Chapter1

���������

��� �������

�������4<=4#��� ��##2��� .>4�?�.#�@AB$9$@AAAB10$C$@ D��������D�����4����������09

Page 21: HTML5 CSS3 by Examples Chapter1

� �������������� ���������������������������

� ��������������� �������������

� ��������������������������������������� ������

� ����!������������"������������������������"���������� ������

� ����#��������� ����$��%��&'����������

� ��!������������ �����()*��

� ��!�������������� �����()*�+���,-������

� ��!�!���'���.������ �������������

� ��!�#���'���.������ �����()*��

� ��!�/���0��.������ �������������

� ��!�1���0��.������ �����()*��

� ��!�2��������� ����$��%�3� �4555555����������

� ��#������ ����$��%��� �� �������������

� ��#����������� ����$��%�3�6���������������

� ��/������ ����$��%��� �� �����()*��

� ��1��������� �� �������������

� ��2��������� �� �����()*��

� ��7��������� �� �������������

� ��8��������� �� �����()*��

� ��9����������$�"����������

� ���:����������$�"��()*��

� �������*�� ��� �������������

� ���!���*�� ��� �����()*��

� ���!�����*�� ��� ����$��%������;�������������#��

� ���!�!���'��� ����#��%���������#��

� ���!�#���*�� ��� ����$��%� ���������������������

� ���!�/���*�� ��� ����$��%� �������������()*��

� ���#������ ������ �����������

� ���/������ ������ ���()*��

� ���1������ ������� �����������

� ���2������ ������� ���()*�+���,-������

� ���7���'�������������������

� ���8���'�����������()*��

� ���9���<� ���������������������

� ��!:���<� ����������������#��

� ��!����<� �������������()*��

� ��!!���=%��$%������()*��

� ��!#���'�>���� ���������������

������������ ��������� �������������������������� ���� !"#$���%&#$�� !%�'!( #���

Page 22: HTML5 CSS3 by Examples Chapter1

� ����������������

������������������ ������������������ ����������������������������� �����������������

����������������� �����������������������������������������������������������

���� ��� ��������� ��������!���� ���� ����� ����� ���� �������� ������ ����� ���� ���"

������� #$�" ����� ������� ����� ���� ���� ��� %&����� '���� ���� ���� �������� ���

������ ���� (��)� ������!� ���� ������� ������� ���� �� ��������� ���� ��������!�

�� ���!������*��������

�������������������������������������������������������������������������������

���� ������� ��� ������� ����� ���� ������ �������� +���� �*����� ����� ����� ��

���������� ���������,���������#$�" ���������������������������� %&�����-�����

��� ������ ����� �������� ��� ���� �*�����!� ��� ��.�� ��� ��� ���� ����/�� ���� ����������

������������*���������������" ���������#$�" �������������

���� �*������ ��� �� ����� ����� ����� ���������0� 1�2(�����3� 4�2#$�3� )�2(��)3��

+*������������ ���2(�����3���� �����������������������%�������5��������������

����������������������������������������������������%���������+*������������ ���

2#$�3����#$�" �����������!��������������������������������������������������

�������������������%&�����+*������������ ���2(��)3���� �����������(��)�����0�

�����������������%���������������������

�������������� ���������� � ������������� ���

�1� ��2(�����3� �� �������� ���������

�4� ��2(�����%3� �� ����������%&���� ���������

�)� ��2(��)3� ��6���(��)� ����������5�����������

�7� ��2#$�3� �� ���������� ����������5�����������

��� ��2#$� 3� �� ����������%&������ ����������5�����������

+*�����(�������

8������������!�����������������������!�����������������*��!� �������������� ��

�������!� ����� ������ �������� 2�����9:-;��������;3!������������������ ��� ����

����� �����*�������'�������������� ���� ��� ������������ ������ ��*�� ����� �������

������ -������� �������� ������� ������� ��� ����� �����!� ��� ����� ������ �� ����.�

����������������������������������������������(��)��

8���������������������������������!��������������������������������*������ �����

���������������*������������������������������������������������� ��.����� �����

������(;�<;������(��)� � +=;�6�+��>?@"A">???@14"7"> :�����!�:����!�;����������44

Page 23: HTML5 CSS3 by Examples Chapter1

� ���������������� �������������

��� ����������� ����� �������������������������

�� �� ������� �������� ����� ������� ��� ����� ��

�������� �������� ��� ����� �� ���� �������� �

�������� ��� ���� ��� ��� ����� � ��� �� �!������

����� �� ����� �������������������"#$������

"����#�����$���������� %�

&��#"$���� ����'((�)�'((�)�'((�)�*��

�������

������

�� �� �������� �������������������� ����������

������������������������������� �� ��� �������������!!�

�"� �� ���

���������

������������#$�% ""�&�&������

�� ������������'��(������)�*#���� ���$�+ ""��� �����,--����.-����

�������� ���'��������#�/�$�+ ""�

��������-�+ ""�0����1� �������� ����

������ ������'��"����+ ""�/-��-��1� ����#�.��$�

������ �������"����+ ""��-�.��1� ����#,-��$�

����#� ��2���-+�2���� ������'��+�23��$�% ""����� ����������

������#� ������-+������ �������+��3��$�% ""����� ������

����� ����� ��4 ������#4 ���� ��#$�5�/..�$�+ ""������4 �������#$�

����� ��'���� ��4 ������#4 ���� ��#$�5�/..�$�+ ""�'�����-&/..�

����� ������� ��4 ������#4 ���� ��#$�5�/..�$�+ ""������

����� �� ��� � ��4 ���� ��#$��+ ""� ��� �-�--&��--�

����� ���'� � ����'� #��3����3�6����3'������3�6����3�����3�6����3 ��� ��3�$��+�

������������7��������'� �+ ""���������7�������������

������������8���#�626�6�$�+ ""�� �������

������������7��������'�#�3�'������3�6��3�������3�6��3����3�$�+ ""���������7���������������

����������'��9 ��#$�+ ""������ ����

�������� ��#��3�"/6�23�"/6��"/6�-64 ���9*5/6� ���$�+ ""��:������������

������������#$�+ ""�� ���������

��;�

�;�

;�

������� ��������+ ""�� ������<=4��

�"���������"�����"������

+,-(��$./$0������001��� �2$,3-�0�45678745556*'7974 #�������)�#����)�$���� �����'1

Page 24: HTML5 CSS3 by Examples Chapter1

������������������� ������������������������������������������������������������

����������������������������������������������������������������������� ������

��� ����� �������� ������� ������ ������������ ����� ����� ��� ����� ���� ������� ������

������������������� ���������������� ������������������ ������� �����������

�� !� �� ���������� "�� ��� ��� �!���� ������� ���� ��� � ���������!� ���� ���� ���� ���� ���

�����������������#��������������������������$%&������$%������$%����������

����������%$&������������� ��������������������������%$&���������������

����������#�� ��� ��� ���������� '��������(����'� ���������� ��������� ����� ��� � ��

����'��������)*'����������

+ ���� ��������� ����������������� ����� ����

(��������������� ����������������������������������!�������������,����!"" �

�#"� ����-� ..� �����������,���������������������/.� ����������������������

�����������&������ ������������� ���0((������������������� ������������$����������

���!��������'������'���������������1�����0((���������������1��������������

0((��������������2'������-� ����������'�����������������-�

+ ������ ��� $ ������%&��������' ������%�����������' ������%��������� (

�)�����

+ � � ��*&����)+� '

����������,����������������� ..��/.� ����������������������� ����������,���"��

������ �!��������������������3�������������1���������������2�.������,�����

���3������� .� .� �������������������������������/.�3�����)�.��/*��"�������-�

4��2����������5����6

����,��������3��������/��/� ���������������������..�3�����)��.����.*��

+ ,�� ������ �- �,.�#)���!

"��7��8/!���������������������������������������9�������%$&�����7(8&�

�������� ������ ������5� �3���� ��������������� ���������� �������$%�����

7(8����������������!��������� �����2.�/��

�,.�#)��� ������ ����

���%$& ����)����!�%����!�$���!�&� ��*� ����)��//�!�.�!��..�!�.�/�*� .�� �3���

��7(8&� ��)�7��!�(���������!�8�����!�&� ��*� ��)� :.�!�.;�!��..;�!���.�*� ������ ������

��%$ ���)����!�%����!�$����*� ����)��//�!�.�!��..�*�

<�7(8� �)�7��!�(���������!�8������*� ��)� :.�!�.;�!��..;�*�

/�0��= ����)�0���!��������!�������!�$�����*� ����)�.�.�!���.�!�.�/�!�.�/�*�

:�7>?� @��%%$$� @��.. <�

A�0���� ������������������������������� ����������������������3��

7��8/�0&BC&(�����0(( ��� >?&�D8>(�EAF1.1EAAAF��1<1E %�� ��!�%���!�&����������<

Page 25: HTML5 CSS3 by Examples Chapter1

� �������������� ��������

��������������� ����������������������������������������������� �������� �����

����������������������������������������������������������������� �����

�������������������������� ������������������������� ����������������� ���!�������

�����������������������������!� �������������������������������������������

"��� ��� �� ����� � ������ ������� ���������� #����� ������� �������� ������

���������������������������������������� ��������� ������������$������ ���

����������������������������������������!� ������� ��������� ����������� ��

������ ���� �� ��� ����� ������ ������� ��� ���� ���� ���� ������������ ���

�� ����������������������������� �� � �����!����� �����������%�

� &�&�&�������������'� �����������������

� &�&�(����������������� ������������()����*))�

� &�&�*����������� �����������+,-������� �����������������+,-.)�)�)�)/����

�+,-.(00�(00�(00�&/�

� �������� �����������������������������������������������

"�� �������������������'� ��������������������������)������ ������&�����������

#��� ����� ������ ��������� ���� 1!������ ������������������ ����� ��������� �

����� � ������� ��� ���� )�)� ��� &�)��"�� �������2�� ���� ������� ����� � � ��� �����

��������3� ���������� � �)�0� �� ������������2�����4�������������!��)�0� �� ��

��� ���� ��� ����� #��� ������ ��� �������� ������ �������� )� ��� &� ��� ��� �� �� �� ����

$��������./�����������(��������������������������)�))))����&�55555��"�������

���������������������� ������������ ��#������� �������������&�����)��

& $��������./� ���������)�)))����&�))))� )�6*70(*78(*�

( $��������./�9�(� ���������)�)))����&�55555� &�785)785(78�

* $���� ���.$��������./�9�(�/� ���������)����&� &�

+���������������������������)����&

#�������������� ������!�� ������������������������'� ���!��� �%�

&� � ��:�.�$���� ���.�$��������./�9�(�/���;����;�%�;� ��;�<�

(� ���.�$��������./�=�)�75555�/�>�� �:;����;�?�� ���>�� �:;� ��;�?�<�

*� � ��:�.�$��������./�@�)�75555/���;����;�%�;� ��;�<�

7� � ��:�.�$���� ���.�$��������./�A�)�0�/���;����;�%�;� ��;�<�

4#$30�B-CD-�����B��*��� EF-$G3E��56H�)�5666H&(�7�5 +�������+�����-���������(0

Page 26: HTML5 CSS3 by Examples Chapter1

� ������������������� ������������������������������

��� ����� ����� � � ������� ��� ������ ���� ����� ���� ��������� ���� ���� ����� � � ���� �����

����������������������������������� �����������������������������������������

������������������������������������������������������������������� �����! �

�����������������

� "���������#$� ��������� � ������ � �%!&'�!&(�!�

� "���������#$�)��* � ��������� � �����* � � �' �((('(+&&�

! "���� ���#"���������#$�)��* �$� ��������� �����* � �' �

& "���� ���#"���������#$�)��* $�,� ���������� ����!* � �% �

-���������������������������� �����!

.�� ����� �����"���������#$�������� ����� ��������� ������ ������ �������� �

���� ��� ����� �%!&'�!&(�!�� /�0�� ��� ��������� ��� ��� �* �� ����� ������� ��� ������

�������� � � ���� �* � �� ����� �' �((('(+&&&&�� .�� ����� �0���� ���� �����

������#��������������$�������"���� ���#$���������������' ��1���������������� ����

��������������� �����������������������.���������������������������������

����������������������������������"���������##"���������#$$��

� �������������� ����������������23�������������������� ������ �

� �������������� ����������������23�������������������+ ������ �

4���������� �� ����� � � �������� �������� ��������� ���� ��������� ���������� �������

�������������������

�� "���������#$�)���5��� ���� ����������������������5�� ������� �

�� "���� ���#"���������#$�)�� $�5�� � ������������������5� ������ �

!� "���� ���#"���������#$�)�� $�5�' � ������������������5' �����' �

� �������� ��

4�����0���#�0$����������� ��������������������������������#�����������$��������������

���������������6�����0�������7�����������������������������������4�����0��������

���������������������������8����0������������������������9��0��9������ ��������������

���������� � � ���� ��:���� ����� ���� ������ ������ ��;������������������ ����� ����� ���

����� ���������<��0����=���������������

����2���'&��2��'�&���2�%����2�����

����2������2��(�0�2�� =�

>4"�'�?8/@8A�����?AA!��� BC8"D�BA�+%*5 5+%%%*��5&5+ -�������-������8�����������(

Page 27: HTML5 CSS3 by Examples Chapter1

� ������������������� ������������������������������������������������

���� ������������������������������������

�� � ������������ ������������ �����������������

���� �� �� � ���� ��� ���� ������� !�� "�� "�� � ��

�#�� ����#�� ��#��#�� ��������" �� ����������

"����������$���������������%�����$���%�

�� ���� %�#��� �#�� ��� ��� �� ��� ��$�� ���

��%� �� � " ��� � �#�� �� #��#�� ��� %�#���

������ ���� "�������������&�����%�#����#�� �� ���� � ��'�'���������� ����#�����������

'&'� ���� ����� �#�(���� )�� ������ �� �����$� ������� "�� � $#��� ����� �� ���� �� �����

�����$� � ����� ��$���� �� "���� �� ���� ����� *� �������$�� �� ����� �� ������ ��

��� $�����$�������$������� ����+++������#�� ���

�������������� �� �������� ����������������������������� �� ���

���������

������������� �! ���"�"������

�� ��� �����������#���$������%�&����� ��� ' �������� ���()*��+����

�� ����,���� ��#�������,���-� ' ���

�� ������.��'�� ��������-�' ����������/��

���,#����0�,���������112�33�2�%%� ��2�4��2�--� ��' ���

������ ��+����'�+����'�+55 �! �����������

�������� �������'�����6'��55 �! ���6�����

����� ����� ��* ��#�����* ��#� ��� �7�-66� �' ���� ������

����� ������� ��* ��#�����* ��#� ��� �7�-66� �' ���� ���������

����� ������� ��* ��#�����* ��#� ��� �7�-66� �' ���� ��������

��������+��8 �! ������-��� ������

�������������� �!������-66�'���������-66�'������������9�' ���������-66�-66���

�������������4 �!������-66�'�������������'��������-66�9�' ������:�-66���-66�

�������������- �!����������'���������-66�'��������-66�9�' ��������������-66�-66�

�������������; �!������-6��'���������4-<�'������������9�' ��� �:"� ����-6��4-<���

�������������8 �!������-6��'�������������'��������4-<�9�' ��� �:"���:�-6����4-<�

����9�

��������+��6 �! ������� ������

�������������� �!������-66�'�������������'������������9�' ������-66�����

�������������4 �!����������'���������-66�'������������9�' �����������-66���

�������������- �!����������'�������������'��������-66�9�' ������������-66�

�������������; �!������-66�'���������-66�'��������-66�9�' ���������-66�-66�-66�

�������������8 �!������-66�'���������4-<�'��������4-<�9�' ����� �:�������

����9�

,)*-���%./%0������001��� 23%*4-20�+567�7+5556&�787+ ���#� ������$����%� $� �����5

Page 28: HTML5 CSS3 by Examples Chapter1

�������������������������� ����������� ������������� �������

������������������������� ������������������

������������������� � �!�"� � �"��� ������ ������

�����������������������#�� ������ ������

������������$����������������������������� ��� % �!�""�&����

��'�

�'�

'�

���� ���������������� �����������(��

)�����(�*�)�����*�)�"�+�*�

������������� ���������������������������� �����������������������������������

��������������������������������������������� �� ���������������������������

����������������������������� �����

���� ������

�� �� �!""��#��#�$� ���

!� �� �#��!""��#�$� �����

%� �� �#��#��!""�$� �����

&� �� �#��#��#�$� ������

"� �� �!""��!""��!""�$� ���'�����'������()� ����

*� �� �!""��!""��#�$� ���'������()������ �

+� �� �!""��#��!""�$� ���'������()�����

,� �� �#��!""��!""�$� �����'������()����������

�������������������������������������������������������

- ����%���.������������ ���./0��� !""�!""�!""$�

- ��!�*���.������������ ���1���2�������

- ��%�����.������������ ���134���� %*#���##5��##5$�

- %�%�����3������������� ������������� ���6���������(7����7�����)�

1�84"�9:;<:3�����933%��� =>:8?4=3�@+,A#A@+++,�!A&A@ /�������/������:��������!,

Page 29: HTML5 CSS3 by Examples Chapter1

� ��������������� �������������

��� ��������� ������������ �� �� �������� ����

���� � ����� ������� ��� ��� ����� ����

� ����!�"�� � �# �� ��� ��#��#��!�$ ���� ���

��� ������� ���� �������!��� � ���������������

��� ��� �%������ � ��� ��� ���� ��� � ����� ������

�����%����� �&���'((((((�'))**++�

������� � ����� ���������� ������������ ����������������������������������

,-����!� �� ������� � ���� ������� ����� ��� ��� *�� ��� ,-����!� .�� ���� ��� ���� #��

.�������/����� #����������,-������������������������ ����������!�

��������

�����

������ ����� ��������������������������������������� �������� �������������� �����

�������

�������

��� �����

� ����� !�"���# !�����# $������% �$ ���� ���� ��

&'�������(� ��')�������'(�* ���"���)� �+,-�������

)� '��%$���������$���.����(�*�� ���������������

�)� '��%$���������$���.��"�(�* �������� �"�

��� ������&'/���������������������)���$���/($ ���� ������"����)� �����

���&'�����������(�����' ���($ ����������"��������

������0�.-���)��� '-��� ���'(�1�'���23(�(���4� ���'�5($ ��� �������� �)� �����

��� ������ '*���/���/6(����'*���)������!����������!� ������������������

��������������������������������"�����"�!���������� ! �����������7��)� �����

����������������������������������8� ���9��� ���6($ ������������� �)� �����

����� ������&'/���������������������)���$��/($ ���� ������"����)� ��� ����

���&'�����������(�����'�� ���($ ����������"��� �������

������0��.�-���)��� '-��� ���'(�1��5:::2�5�(���4� ���'�5(�$ ��� �������� ��

����� ������ '*���/�� /6(����'*���)�������!��������! �������������������

����������������������������������"�����"�!����������! �����������7��

������������������������������������8� ���9��� ����! ������������� �

������������������������������������ � ;�����"�2 6($ ����8������ ���������

��6����)� ���

0�12�34"546� ���3667��� $84�91$6�:;<�=�:;;;<>?�@�: *� ����/�* ���/�4��� ������?:

Page 30: HTML5 CSS3 by Examples Chapter1

�6����)� ���

6($�

���� ��������������������

� ����������� ���������������������������������������������������������������

A����� ��� �������#��������� ��� ������������������������������!�A�� ��������

B��������&��%��B����������������������������������#!�

� ���������� ������!������ ������"�����"#���$�#"$��%$��$"���&%�����'������!�

0���/���� ��� �� ��������������������#� ������ ���� ��� ����������������������������

��,����C����C����� �,-�����! ���� ���!���������!�

� ��(��������%��������������#��$�$����������)******+),,,,,,

A��� ���%����������������������������� �������$� ���������B)��B����B� ���+���B!�.��

����������/������������������ � ������������� ��B'======B����B'((((((B�����%!�

'))**++� ��� ���� )��)��� *����*����� +���+���!� 6���� �% ������ ��&�

'((((((D�����'((====D����'====((D�����'((((D������!�A����������� �������

���� ��� �?@��� ������ ��������������� � �������=�((((((�����%����=�>E;;;?>E�

�������� ��������!�

> � �!� ������� =!;7@2?7@E?7�

? � �!� �������F�>E;;;?>E� >?/7?7/?2<!;<@=;@:2E<�

7 � �!������� �!� �������F�>E;;;?>E��� >?/7?7/?2<�

@ � �!������� �!� �������F�>E;;;?>E��!��6���� �>E�� ��=:� �

2 B'B�G�� �!������� �!� �������F�>E;;;?>E��!��6���� �>E�� '��=:� �

6�������� ���� ���� ������%�������'((((((

�������� B��6���� �>E�B� ��� ��� ���#���� ����%�������!�A��� ����� ���>E/;;;/?>E�

���������������� ����>HH?@����>�====�====�====�====�====�====!�

> B'B�G�� �!������� �!� �������F�>E;;;?>E��!��6���� �>E��

? B'B�G�� �!������� �!� �������F�=%��������!��6���� �>E��

7 B'B�G�� �!������� �!� �������F��>HH?@���!��6���� �>E��

@ B'B�G�� �!������� �!� �������F�=%�������!��6���� �>E��

*���� ���� ������%�������'((((((

0�12�34"546� ���3667��� $84�91$6�:;<�=�:;;;<>?�@�: *� ����/�* ���/�4��� ������7=

Page 31: HTML5 CSS3 by Examples Chapter1

� ����������������� ������������

�� �� �� ��� �� � ������ � � �� ��� � � ��

������ ����� ����� ����������� ���������

� ���� !������"����#�$��� ��������������

��� � ��� � � ���� ����� � ��� ���� ����

%������ ��������%� ��������� !���#�

�������������� ������

��������������������������������������� ��������������

����������� !� ���"#��$ �������� ��%&'�����(�

�"������������������)����#�$�� ������ �!���

� �"������������������)����#�$ ���������

����� �*+*)'���� ��"'��������"#�,�"���-.#�#��/����("�0#� �������� ���

�������� ���� !����� �����1������"*��*#�� ���������� ���� ��

����� !�������������2���"��� �#� ������������

�������� �����������(�������)�*��*��� ������(��� ��� ��

�������� �����������������)�*��*�� �������� ���� ��

�������� ���������� ������� �������������

�������� ���������������� ����

�������� ���������� 3(�!�2����� �� ������� ��� ���� ��

�������� ���������������*����!��*� �������!���

����� �*+*)'���� ��"'��������"#�,�"���-.#�#��/����("�0#� �������� ���

������ ����� !����� �����1������"*��*#�� ���������� �� ���

����� !�������������2���"� ��#� ��������� �� ���

������ ������������(�������)�*��*��� ������(��� � ���

������ ������������������)�*��*�� �������� �� ���

������ �������������4��!������-�)�*��*�� �����3���� �� ���

������ ����������� ������� ��� �� ����������

������ ����������������� ����

������ ����������� 3(�!�2����� �� ������� ��� �� �� ���

������ ����������������*����!��*� ���������� ��

��5���� ����

�5���� ����

5����� �����������

��� ��������������������

&��'(�)*+,*-�����)--.�"� /0*�1'/-�23456523334785952 :����� ��:�� ��*�������� �.7

Page 32: HTML5 CSS3 by Examples Chapter1

����� ����� ��� ��� �� ���� ����� ��� ����������� ����� ���� �� ���� �������������

������������ ��������� ������������������������������ ��������������������������� !!�

� ��� ����������"���#$"����������������������������������������� !!�� ��� ���

����������������������������� ���� �����������%�������� �� �����

&�� �� ��� ���� ����������� ��� ������'� �������� ���� �(� �� )������ � ��� ����� ���

���������������������� �� �*�� ��������������'��������������������������� �������

�����

������� � ���� ��

� ��������������+��������#$�,�����-�.� /#������$� ����#�������#$�,�����-�

� � ���+�������� ����������#"��0"$�.� ���+�/#�1��0������+"���������2�����."�3�$.�

4 �������(���������� ����#� ��$.� /#�������(���$�������#� ��$.�

5� ����������������+���6�"��"�.�

� ���������������+���6�"��"�.�� �����#,������2���'�������2���-$�

7 ���0���������(8��� ����� +" �����#9:���$".� ���0���#,����(8��;� ����� �2�" �����#9:���$�-$.�

<����+�������*�� �!����� =��#���0�$.�

�� �#0� ���+�:.���1������������.��66$�,�����-�/#���0�$����#��������#$,�/#����$����-�

>�+�������*�� �!����� #�?��@�$.

��������(�8� ���� ��� +� ���.�/#�?��@�$���#"(�8� ����;��� "'�� ���$.�

A�BC7� =DE=!����� !!4�(� �F=BGC�!�9>H;:;9>>>H��;5;9 I �����'�I���'�=���������4�

Page 33: HTML5 CSS3 by Examples Chapter1

� ������������������ �����������

��� ���� ��� �� ������ ��� ������ ��� �������� ��� ������� ��� ���

�������� ��� �������� ���� �� ��� ������� ������� ��� �� ���

������� ��������� ��� ��������� ����� ��� ����� ��� � �����

����������� ��������� ������� ���� ������ �� �����������

������������� ���������� ������� �����

���������

�� ���� �� ������ �������� ���

��� ������� �� ��!���� �"#����� ��$ ���%&&�'�()&���'����

���'����� �� ���� ��'���*��$ ���

���+���$ ���

,�

�� ���� ���+���� ���������+�

�����'������-����&.&.��� ��+���.��� ����� ���$ �������������� ������� ����

� �����(&�$ ��� ����������/�����������'���

��������� ��+���� ���$ ���(&�'�)��/�������%&���'�����

������� ����� ��� ���$ ���*&�'�(&��/�������()���'�����

����������0���&$�0����� ����� ��$�01����� ������������ ��

����������������&$������� ��+���$��1����� ���������+�

����������2�13����������3������ �����4��(��*5������6��� �(7�$������ ���

�������'�����6�������$ �����������6�������������

�������'�����-������.�0.��.���$ �����+������

���,�

,�

����8����������+�.�(&&&���$ ������������/����9 ������ :�������

,�

� ����$ ����������� � �

����������������������

� ����������������������������� ���� �������������������������� �

��� �����!�� ����� !���� ������������� ������� ������� ����!���"!����#$$$���������#�

��������!�� ����� !�� � ���� �� ��������������� ������� �������"�%� �������� ������

������������&�"���'��������� ����� �� ��������� �������"��������������������� ��

������ � �������� ������������ �� ��%����� �����()������������������������������

��� ����������"���"���

*+,-��./0.1������112��� 34.+(,31�5678$856667#98:85 ;�������%�;����%�.���� �����22

Page 34: HTML5 CSS3 by Examples Chapter1

� ���������������� �����������

�� � ��� ��� ��� ������ �� �� �� ��� ��� ���� ��� ������� ��� ���

���� ���������� ���� ��� ��� � � �!� �� ������ ��� ���

��� ��������� ������ �"�!���������� ���� ������ ����

����� ���� #��� �� #��� ��������!� $��� ��� ������� ��� ���

��� ���� ������ ��������� ��������������������� #��� ��� ����������!�

��������

�����

������ ����� ������� �������������������� �����

�������

�������

��� �����

� � ���!"�#���$!"� � �$!!%��� ��&!�% ���� ���� ��

'(�������)� ��(*�������()�+ ���#���*� �,-.�����/�

�� #()�% ���� ����,-.��������

�����0��� ��(� � #�"��!!!�)�% ������� ������������� �

1)%�

*�������� #()�+ ������� #�

*� (��&%������� �%���2����)�+�� ���������������

�*� ( �&%� ��� � �%� �2��#�)�+ �������� �#�

��� ������'(3��������������������4*� �%���3)% ���� ������#����*� ��� �

���'(�����������)�����( ���)% ����������#��� ����

������5�2.���*��� (.��� ���()�6�(����7)�)���8� ��/(�9)% ��� �������� �*� ��� �

��� ������ (+����4�3�� 31)����(+���*�4�� �"����4���" ������/�����������

��������������������������������#���4�#�"����/��4���" ������/����:��*� ��� �

����������������������������������;/ ���<��� 4��1)% ������/������ �*� ��� �

����� ������'(3��������������������4*� �%��3)% ���� ������#����*� ��� ����

���'(�����������)�����(�� ���)% ����������#��� �������

������5��2�.���*��� (.��� ���()�6��9�����9�)���8� ��/(�9)�% ��� �������� �

����� ������ (+����4�3�� 31)����(+���*�4�� �"����4��" ������/������������

����������������������������������#���4�#"����/��4���" ������/����:��

%�&'�($)*$+� ���(++,��� -.$�/&-+�01234301112563730 8� ������8 �����$��� ������,7

Page 35: HTML5 CSS3 by Examples Chapter1

�������������������������������������������� ���������� ����������� ���

�������������������������������������������������� ��� ������������� ��������

�������������

������������

���

�� ���������!��" ���#�#��������

���$!%��&%�'����!��� ��!�" ����� �� �� �()*��+�����,����� ���

������-./.�0�1� �'� ���!1� �'�����!��2�34555�34��' �6 ���!34��� ����������� ���

�����$! ����'���!"����������� ��������� ������ ���� ���

�������

���

7������ 8�7�����8�7�� � 8�

� ���������������� ����������

������������������ ���������� �������������������������� �������� �������������

��������������� �������������������������������������������� �� �����������

�������������������!�� �� ��������������� �� ���������� ������������ ����

������!�����������������������"�!������� ��� �������������������"�����#���

���������� ���$�����������!����������������������� ������#%&�������� ����� ����

� ��������������������������������������������

������������� �����������'���(������������&�������)�������������������������� ������

����������!*� ���

����������� ����������������� ������������ �������+,� ��-��.�.��������� ��������

'���(����$���� �� ��!����� �������������������������� ��������������/��������

�������� �������� �������!*� ������������ � ������������������������������

����� ��� ����������� �$� � ����������+,� ��-��0�0������ ����� �����������������

�� ������ 1���$� ��� ����� ��� ������ ��� ��� ��� �� ���� ����� ���� ������ � ��� ���

�������������!��2�����������

1�345�6"78"&����6&&.�!� +9"3%4+&�:;<���:;;;<�0�=�: >�� �� �$�>���$�"�������.5

Page 36: HTML5 CSS3 by Examples Chapter1

� ������������������ ����������

���� � ����������������� ��� ���������� ����

��� �� ������ � � ���� �!� ������ �!� ������ � � �� ����

�� �"� � � � � �� #� ����� ��� #���� �!� �� ������

#� � � ���#�� $�����������������#� ��� � ������

�� �� ������ !� # �� �� % �� �� #����� �!� �� ������ �� ���� �� #� � � ��� ���

!� # �� �������� �����#� ���

��������

������

�� ������

��������������������������������������� ��������������

����������� !� ���"#�$ �������� ��%&'�����(�

�����"#�� ��� ������%&'��)� ��

�����*�������"��������������#�� �����������!����� ���

+��

!� �������"#�$ ���,�,�����

�"������������������-����#�$�� ������ �!���

� �"������������������-����#�$ ���������

����� �./.-'���� ��"'��������"#�0�"���12#�#��3����("�4#� �������� ���

�������� ���� !����� �����5������".��.#�� ���������� ���� ��

����� !�������������6���"��� �#� ������������

�������� �����������(�������-�.��.��� ������(��� ��� ��

�������� �����������������-�.��.�� �������� ���� ��

�������� ���������� ������� �������������

�������� ���������������� ����

�������� ���������� 7(�!�6����� �� ������� ��� ���� ��

�������� ���������������.����!��.� �������!���

����� �./.-'���� ��"'��������"#�0�"���12#�#��3����("�4#� �������� ���

������ ����� !����� �����5������".��.#�� ���������� �� ���

����� !�������������6���"� ��#� ��������� �� ���

������ ������������(�������-�.��.��� ������(��� � ���

������ ������������������-�.��.�� �������� �� ���

������ �������������8��!������1�-�.��.�� �����7���� �� ���

������ ����������� ������� ��� �� ����������

������ ����������������� ����

������ ����������� 7(�!�6����� �� ������� ��� �� �� ���

&��'(�)%*+%,�� ��),,-��� ./%�0'.,�12345412223674841 9����#�"�9���"�% ��� �� ��-:

Page 37: HTML5 CSS3 by Examples Chapter1

��������������� ���� ������ ����� ���� ��������

�������� ����

������� ���

���

������ ������������ ��������������

������������� ������� ���!����"�#���#�� ���

����������� �������$��%������&'�$(����#���#�� ���

�����)� ���

����*�����+��������$�*�� ���

��������,��-�.��*�� ��.��*����� ����/�01222301���� !����$�01��� ������� ��� ��

���������4�5��������6$� ���7 ������� ��

������--� ���

�����

���

+�������8�+�� �8�+�*��8�

&��'(�)%*+%,�� ��),,-��� ./%�0'.,�12345412223674841 9����#�"�9���"�% ��� �� ��-2

Page 38: HTML5 CSS3 by Examples Chapter1

� �������������� �������������

�� ����� ������������������������������� � ����

�� ���� ������ � �� � ���� �� ������ �������� ��� ��

������ �� ����� �� ��� ���� ��� �� ������ �� ����

!������ ����� ���"����!������ ���������� ����� �����������#���#������

�����$������� � #��� ����� ��!��� !"%& ���� �

�������������� �� �������� �������� �� ������������

���������������� ������������

��� ���������� ��!������"�#����� ���$ ���%&&�'�()&���'����

����'���� ��� ������'���*��$ ���

��������(&�$�+�&$���&$ �������������,� �������� '���

������� ������ �������$ ���*&�'�(&��,� �����()���'�����

-�

��������� .�����

������'�����/������0�12 �������2 ���� �����3��(��*4�����/���� �(5���$����������������

������'�����6�����7+7�7��$ ���� .������

������'�����/������0�12 �������2 ���� �����3��(��*4�����/���� �(5���$������������������

������'��� ��8 ����$ �������� �������� ��������

������'� ����1��*7+1��*7��*7&72 ���8#3*7� ����$ ����9������������

������'�������$ ���� .��������

������������� ���.���������&�$�+1���$ ���� ���� ������� ���

����-����������1����-�$ �����'���.�

-�

�������� ��� ������ ������ ��� ��������

��� .��$ ���������� �

����6�,����:��� ���;� ��� ��� ���$ ������������

-�

.��.���6�,����:��� ���;� ������������������ ��������������.����<��

���������.��.���,����:��� ���;� ����������== ������������� ��� �9�

���������.��.��>6�,����:��� ���;� �������== ����������� ������

���������.��.�.��9��6�,����:��� ���;� ����$ ���������� ����������

�������������������� ��� �9���.��.����?������� ��� �97�(&&&����5&��-$���������

-���$ ���

.��.��� ��������$ ���

��6�,����:��� ���;� ��� ��� ���$ ����� �����,����� ��� ����

�����������������������

'()*��+,�&����&&-�� ./�(%).&012�3�0111245�6�0 7�������$7����$����� ����-2

Page 39: HTML5 CSS3 by Examples Chapter1

� �������������� ������89(:�

�� ����� ������������������������������� � ����

�� ���� ������ � �� � ���� �� ������ �������� ��� ��

������ �� ����� �� ��� ���� ��� �� ������ �� ����

!�� ����� ��!������ � ��� ������ �

��������

�����

������ ����� ������� �������������������� �����

�������

�������

��� �����

� � � �!""#��� ��$"�# ���� ���� ��

� ��������"�%� �"�%���"�# �������� ��&���� ����� � ���

� � ��� � ��������# ����"� ��"���� ���'�$��� ���(�

� ������� ��������# ���

)'�������(� ��'&�������'(�* ���+���&� �,-.�����/�

� +'(�# ���� ����,-.��������

0(#�

&�������� +'(�* ������� +�

����� ������)'1��������������������2&� �#��1(# ���� ������+����&� ��� ����

���)'�����������(�����'�� ���(# ����������+��� �������

������3��4�.���&��� '.��� ���'(�5��6�����6�(���7� ��/'�6(�# ��� �������� �

����� �������'*���&�2�� ��%����2����� % ������/������������

����������������+���2� ��%����/��2�� % ������/����8��

������������������9/ ���:��� 2������0(# ������/������ �

����&�' ��� � (�*� �"�#��4���# ��������/��� � �����

���0������*� �4�� �0�#�����������������

����&�'������� �(�*����;������'� +�%��""��(�0�# ������� ������������� �

0#�

���� ��������������������

'()*��+,�&����&&-�� ./�(%).&012�3�0111245�6�0 7�������$7����$����� ����-0

Page 40: HTML5 CSS3 by Examples Chapter1

� ���������������� �����������

���� ��� ���������������������� ���� �������� ����������

������� ����� � �� ��� �� ����� ���� � ����� �� ���!����

"���� �#� ��$�� ������ �$�����������"���������%�� �

�������& ���������&�� �� �����������%�� �

��������

�������

��� �����

� � � �!""#��� ��$"�# ���� ���� ��

� ��������"�%� �"�%���"�# �������� ��&���� ����� � ���

� � ��� � ��������# ����"� ��"���� ���'�$��� ���(�

� ������� ��������# ���

+���+��������&�������'(�* ���+���&� �,-.�����/�

�� +'(�# ���� ����,-.��������

0#�

&�������� +'(�* ������� +�

������3�4.���&��� '.��� ���'(�5�'����<(�(���7� ��/'�6(# ��� �������� �

���� ��������������� ���=������'����(�# �����+����&� � ����

�������������������:���'� ���(# ���������� �

���� �������������/�������4��� ��#� ������/����&� ����

���� ����������+������ �4��� ��# ���+����&� � ����

���� ������������&���� �# ����� ����������

���� ������������������# ����

���� ������������9/ ���:��� �����# ����������� �&� � ����

���� ����������������������������# �����������

����&�' ��� � (�*� �"�#��4���# ��������/��� � �����

���0������*� �4�� �0�#�����������������

����&�'������� �(�*����;������'� +�%��""��(�0�# ������� ������������� �

0#�

���� ��������������������

'��()�*#+,#-�����*--.��� /0#�1(/-�234!5!2333467!8!2 9����" :�9�� :�#�������� �85

Page 41: HTML5 CSS3 by Examples Chapter1

� ��������������� �����������������������������������

��� ���� ��� �� ���� �� �������������� �� �� ����

����� � ��������� ����� �������� ��

������� �������������!��������� ���� ����

�"���������!��������� ���� �����!�#������!��

������� ���� ��������������� ������ � ��������

��������� �

�������������� �� �������� ����������������������������� �� ���

���������

������������� �! ���"�"������

�� ��� �����������#���$������%�&����� ��� ' �������� ���()*��+����

�� ����,���� ��#�������,���-� ' ���

�� ������.��'�� ��������-�' ����������/��

���,#����0�,����1�,�23344%%��2555555��6�7��6�--� ��' ���

������ ��+����'�+����'�+88 �! �����������

�������� �������'�����9'��88 �! ���9�����

����� ���������-��,��* ��#�����* ��#� ��� �:�-99� � �' ���� �������

����� ������������-��,��* ��#�����* ��#� ��� �:�-99� � �' ���� ���������

����� �����������-��,��* ��#�����* ��#� ��� �:�-99� � �' ���� ��������

��������+��; �! ������-��� ������

�������������� �!�����������'��������������'�������������<�' ������������������

�������������7 �!�����������'��������������'�������������<�' ������=����������

�������������- �!�����������'��������������'�������������<�' ���������������������

�������������> �!�����������'��������������'�������������<�' ��� �="���������������

�������������; �!�����������'��������������'�������������<�' ��� ?� ����������

����<�

��������+��9 �! ������� ������

�������������� �!�����������'��������������'�������������<�' ������-99�����

�������������7 �!�����������'��������������'�������������<�' �����������-99���

�������������- �!�����������'��������������'�������������<�' ������������-99�

�������������> �!�����������'��������������'�������������<�' ���������-99�-99�-99�

�������������; �!�����������'��������������'�������������<�' ����� �=�������

����<�

����� ����,����2�8�����8��������8������' �����,�

������,#����@���������,�' ����������������

������,#����3������:��6�+:��6��6��� ' ���� �������

$%&'��()*(+������++,�!- ./(%0&.+�1234�412223564741 ���8�������������(���� �����75

Page 42: HTML5 CSS3 by Examples Chapter1

���������������� ����� � �����������������

������������������������ � ���������� � �������������� �����!�"� ���

����#�������������������������������� ������������$��������

������������������%��&�'���������()"��������� �����!�(*�"� ���

��+�

�+�

+�

������,�����!�����"�- ������������,������()"�

��#�����&������ ** �� �������%��&�'��������()"�

�������������.��*����//���0��(1"����-���&������ * ������,������()"�+ ���

����&��������.��()���//���0��!11"���-���&���������,������()"�+ ���

�����������&����

+�

�����"�� �������&���%��

0�&���%�.�0��,�.�0���$�.�

$%&'��()*(+������++,�!- ./(%0&.+�1234�412223564741 ���8�������������(���� �����76

Page 43: HTML5 CSS3 by Examples Chapter1

� �������������� ��������������������

��� ���� ��� �� ���� �� ������������ �������� �� �� ������

������ ��� ��� ������� ������ � ����� ���� ����� �� ��� �����

���� ����������������

��������������� ��� ��������� ������������

�������� !"# �� !$ %�� !$ %�� !�$ ��

������������� ���������� ������������������������������� �����

���������

�� ���� �� �� !�" ��#�#�� ���

���� ��������� �$���%���� �&' ���� ��!( ���)���*�+�����*����

����*����� �$����� ��*� �,�!( ���

�� �����+���(�*��,���(���,���( ��������� �����������������

������ � � ��(� ����(� #�+��!�" ����������� �

�������*$���� -��� !�( ���������������������������

�������*$����.�/�����0��� 0�12���$����� 2���$�� �� !3)��!1�04�+��54���5�!0�(�

�����������2���$����� 2���$�� �� !3)��!�( ����� ��������#)���

�������������� ���2���$����� 2���$�� �� !3+��!�( ����� ������������ ��#+��5�

���������� ������2���$����� 2���$�� �� !3+��!�( ����� �������� �����#+��5�

�������������2���$�� �� !�( ����� ����������

�������*$����/�����0���� 0��1���1��040�1��������� 1�0540�1����� ���1�0540�1�����1�0!0�(�

�������*$�� �6������ �+��( ����� ����7��

�������*$��� �*�4�1 4� 4��42���$-'3,4�������!�( ����.������������

�������*$����.� !�( ��������������� �

�������*$���� !�( ��������������� �

��8��

8�

� �� !( ��������� ��

����������������������

&'()��*+,*-������--"��� ./*'0(.-�123! !12223$4!5!1 6���������6�7����*��7� �����5"

Page 44: HTML5 CSS3 by Examples Chapter1

� ���������������

������������� ��� ��������� ������� ��������������������������� ���� ����

��� �!�"�������������� ���� � ����#������ ���� �� ���������$����� ���� �����!�

� ������������������

"��������� ��������������%�� ������ !�

� ���������������������������

�������������������&�����������'#��()� ��&������� ��'�()!�* �� ����

�������������������������(�� �� ���� !�

� �����������������������������������

+��%������,����,�����������,���,��&�������%������������ !�

� ����-�����.�#��/�0���! ����')1�

� ���2�!�� ��"�%���-�3���'3�.�����.�3����(����()31�

450���67897"�����6""���% :;70<�:"�=>?���=>>>?#��$�= � ��������������7���������$$

Page 45: HTML5 CSS3 by Examples Chapter1

� ������������������� ����������������������'6��@��)

5��� ����� ��� �� ����� ����� � �� &���� ����

� �������'���������� ���������������)!�4������

��� � �� �� �� � �� ��� ��!� "��� ����� ��� ���

� ���(���#��(!������������������ ���(�

��#��(!�5���� ��� �����������&� &��� ��

��2��!�

�������������� �� �������� ����������������������������� �� ���

���������

������������� �! ���"�"������

�� ��� �����������#���$������%�&����� ��� ' �������� ���()*��+����

�� ����,���� ��#�������,���-� ' ���

�� ������.��'�� ��������-�' ����������/��

���,#����0�,����123��"4��5�"6��75�"6��7 �1���2 ��� ����3���������5�8�5�-8� �'�

������ ��+����'�+����'�+99 �! �����������

�������� �������'�����8'��99 �! ���8�����

����� ���������* ��#�����* ��#� ��� �:�4��� ��' ���� ��������

����� ��� �����* ��#�����* ��#� ��� �:�6��� �' ���� ���� ��� ����

����� �����������* ��#�����* ��#� ��� �:�6��� ��' ���� �������������

��������+��; �! ������-��� ������

�������������� �!�����������'�� �����8����'����������8����<�' ����

�������������6 �!�����������'�� �����8����'����������-8���<�' ����

�������������- �!�����������'�� �����8����'����������=8���<�' ����

�������������4 �!�����������'�� �����6����'����������8����<�' ����

�������������; �!�����������'�� �����6����'����������-8���<�' ����

����<�

��������+��8 �! ������� ������

�������������� �!��������6.���'�� �����8����'����������8����<�' ����

�������������6 �!��������6.���'�� �����8����'����������-8���<�' ����

�������������- �!��������6.���'�� �����8����'����������=8���<�' ����

�������������4 �!��������6.���'�� �����6����'����������8����<�' ����

�������������; �!��������6.���'�� �����6����'����������-8���<�' ����

����<�

����� ��������������9������9�5�9�� ���9�75���9�������9�7 �' �����,�

������,#����2�����������' ����������������

������,#����>������:��5�+:��5��5��� ' ���� �������

������,#����2�������� �?�' ���� ����,����,�

450���67897"�����6""���% :;70<�:"�=>?���=>>>?#��$�= � ��������������7���������$�

Page 46: HTML5 CSS3 by Examples Chapter1

����������������� ����������������������������������������������� ���

����

���

��

���� �� �� ���!������� ���" ����"�#��

$���"�#�%�$�& �'%�$���(�%�

������������ ��������� �������������������������� ���� !"#$���%&#$�� !%�'!( #��)

Page 47: HTML5 CSS3 by Examples Chapter1

� �������������� �������������������

�� � ��� ��� ��� ��� ��� ����� ������ �������� ���� �������

���������������� ��������� �������!�������"�����������

�������

��������

�����

������ ����� ��������������������������������������� �������� �������������� �����

�������

�������

��� �����

� �� �! "�� �! "�#���$ "�����$ %������& �% ���� ���� ��

'(�������)� ��(*�������()�+ ���#���*� �,-.�������

�*� (�����%����� �%���/��#�)�+ �������� �#�

���� ������'(0���������������������*���%��0)% ���� ������#����*� ��� ����

��'(�����������)�����(�� ���)% ����������#��� �������

������.���*��� (.��� ���()�1�� �)�% ���2���

������.���*��� (.��� ���()�1�� �)�% ���.�����

������.���*��� (.��� ���()�1�� �)�% ���3����#�

��4���.���*��� (.��� ���()�1�� �)�% �����4�

������ ���0���4(0�5�5�06"0�5�5�06"0�5�5�06"0�545�06)0�% ������4����� ��������

������ ���0���(0�5.���*��� (.��� ���()1$7 )5�0"�� 6"�& 6�)0�% ��� �������� �

���� ������ (+���0�� 08)����(+���*����� /��!��"���������� �" �������������������

����������������������������������#��������"�����������" �����������9��

������������������������������������4� ���2��� ������ ����" ������������� �

������������������������������������ � :�������!�����8)% ����4������ ���������

��8����*� ���

8)%�

���� ��������������������

#�$%�&'()'*� �!�&**+� � ,-'�.$,*�/01232/000145262/ 7� ����8�7 ���8�'��� ������60

Page 48: HTML5 CSS3 by Examples Chapter1

� ������������� ���������������

��� ���� ��� �� ���� �� �� �������� ��� �������� �� �� �������

���� ����� ���� ������������ ������� ���� �� ������ ���� ����� ��

������ ������ �����������

������������� ���������� ������������������������������ �����

���������

�� ���� �� ��� �! ��"�"�� ���

��� ������ �#���$���� �%&����� � ' ���(���)�*�����)����

���)����� #����� ��)���+� ' ���

� �����*,�'� ��� ����������������

�)���� #�����+�'����� #�������+�' ����� ��������� ����

����*���'���+��'�� ������' ����������������

����� �' ���

-�

�� ���� ����� �! ���"�"�����

�������� ��'� ��� ���'� ..� �! ����������������� �

������)#���� /���� ' ��������������������������

��������)��0���#������0���#�� ��� 1��� #����"+1� �.��' ����� ���)�

����������0���#������0���#�� ��� 1��� #������"+1� �.���' ����� ����

�������������2�.0���#������0���#�� ��� �1��*��+3 � #��4��� ��*, ��' ����� ���������

������)#����5�4��������' ���

������)#����4�������' ���

������)#�� �6������(�'���� ���

������)#�����)7�7��7��7�0���#/&1+7����� ' ����5������������

������)#����8���)�7�� �' ����5������� ��

������)#�� �8���)��7��� �' ����

������)#����� '� ���

������)#����5�� ' ���

����� ����.��+�1��0���#/&��� ���' ��� �)��� ���

��-��

-�

� ��� ' ��������� ��

����������������������

��� ��!"#!$������$$%��& �'!�(��$�)*+,-,)***+./,0,) 1��2����3�1����3�!���� �����0+

Page 49: HTML5 CSS3 by Examples Chapter1

� ������������� ��������������

�� � ��� ��� ��� ��� ��� � �������� ��� �������� ���� � �����

��� ������ ��� ������� ���� �������� ��� ����������� ������ ���

��� � ��� ������ !�� ������ ���� � �� �� ����� ��� �����������

������ ��� ��� ���� �� ���� ��� ����� ��� ��� ��� � ��

�� ����� ����������� ������ ��� ��� � �� ��� ���� ���

���������������� �������������������������������

��������

�����

��� ����� ��������������������������������������� �������� �������������� �����

�������

�������

��� �����

� ������ !�� �� �" !�#�����$ !���������% �& ���� ���� ��

'(�������)� ��(*�������()�+ ���#���*� �,-.�������

�*� (�� &���������&��//�)�+ �������� �#�

����� ������'(0���������������������*���&��0)& ��� ������#����1��� ����

���'(�����������)�����(�� ���)& ����������#��� �������

������2��/�.���*��� (.��� ���()�3��$444"�$�)���5� ���(�$)�&�

������.���*��� (.��� ���()3���)�/�� �& ��� �����6���������

������.���*��� (.��� ���()3���)�/�� �& ��� �����6���������

������.���*��� (.��� ���()3" )�/�� �& ��� ������7��" 6% �

����� ������ (+���0�� 08)����(+���*�������!�����������! ������������������

����������������������������9� ���:��� �������! ������������� �

����������������������������������#�����#��!�����������! �����������7��

������������������������������������ � ;�����#�" ! ����9������ ���������

���8)&�

����������'(0���������������������*���&��0)& ��� ������#����1��� ����

���'(�����������)�����(����)& ����������#��� �������

������������.����� �((� 6�)3(� 6�)�/�(� 6�)3(� 6�))/" & ����������* ���� �����

�����������.�����"(��6�� !���6�� )�3��< ���.���=>& ����������� ����������

���� ��*� ����0 ����(0�/����/�0��)0�& ��� ������������

"�#$�%�&'�(� ���%(()��* +,��-#+(�./0121.///034151. 6� ���7�6 ���7����� ������5.

Page 50: HTML5 CSS3 by Examples Chapter1

�������������� ��������������� �������������������

���������������� ������������� �������������� ���

��������������� �������������� ������������� ���

���������������� ������ ��� �������������������� ��

������������ ��� � �!�� ���"�#������#�������������

������������$��#��%��&��� ������� ���������������

������������������"'���� �(��)��*(�� �������%���+�*�

������������������" �������"�� ���������"'�����

�������$#���������"������� �(��)��*(�� ����������,��

�������$#���������"� �������"� ����� ����"����

������-

������������

��-�

�������.���$���.��� �"�.�

"�#$�%�&'�(� ���%(()��* +,��-#+(�./0121.///034151. 6� ���7�6 ���7����� ������$2

Page 51: HTML5 CSS3 by Examples Chapter1

� ���������������� �������������

��� ���� ��� �� ���� �� �� ����� ��� ��������� ����� ������� ���� ��

������ ��������� �� ������ ������ ���������

������������� ���������� ������������������������������� �����

���������

�� ���� �� ��� �! ��"�"�� ���

��� ��������� �#���$���� �%&����� �� ' ���(���)�*�����)����

���)����� �#����� ��)���+� ' ���

� �����*,�'�)��+���'���+���' ��������� �����������������

����*���'���*��'�� ������' ����������������

����� �' ���

-�

�� ���� ����� �! ���"�"�����

�������� ��'� ��� ���'� ..� �! ����������������� �

������)#���� /���� ' ���������������������������

����)��)��.����0*#� �0�1���#����� ��� �' ���������� ����� ��������

��������.����0*#� �0�1���#�� �� ��� �' ���

������)#����2�3�����������'� ���

������)#�����)4�4��4��4�1���#/&0+4����� �' ����2������������

������)#����5���)��4��� �' ����2������� ��

������)#�� �5���)4�� �' ��������������� ����

������)#�� �5��)"�01���#����� ��� 4"�01���#�� �� ��� ' �����������������

������)#����2�� ' ��������������

����� ����.��+�0��1���#/&��� ���' ��� �)��� ���

���-��

-�

� ��� ' ��������� ��

����������������������

� � ���� ���� ��� ���� ��� ����� ����� ��� �� ��������� �� ���� ���� �������� �� ���� ��

����� ������������� �������

��� ���������� !���!������"�# ������"�#����� � �����!��$�%� ��&'��������(�

)%*+���,-�.������../�0� �1�%&*�.�2345!5233346$5752 8���������8����������� �����+6

Page 52: HTML5 CSS3 by Examples Chapter1

� ���������������� ������������

�� � ��� ��� ��� ��� ��� � ����� ��� ��������� � �� ������� �� �

�����������������������������������������

��������

�����

������ ����� ��������������������������������������� �������� �������������� �����

�������

�������

��� �����

� ������ !�� �� �" !�� ����� !�#�����$ �% ���� ���� ��

� ������������ %�

&'�������(� ��')�������'(�* ���#���)� �+,-�������

�)� '�� %���������%��..�(�* �������� �#�

����� ������&'/���������������������)���%��/(% ��� ������#����0��� ����

���&'�����������(�����'�� ���(% ����������#��� �������

������1��.�-���)��� '-��� ���'(�2��3444"�3�(���5� ���'�3(�%�

������� �.���6�2�� ����2�-������'����(�% ������������ ������ ����

������� �.��� �2�� ����2�-������'����(�% ���

����� ������ '*���/�� /7(����'*���)�������!�����������! ������������������

����������������������������8� ���9��� �������! ������������� �

����������������������������������#�����#��!�����������! �����������:��

������������������������������������ � ;�����#�" ! ����8������ ���������

���7(%�

��������.��"�2��-���<=�������% �������������

����������&'/���������������������)���%��/(% ��� ������#����0��� ����

���&'�����������(�����'����(% ����������#��� �������

������������-����� �''� >�(2'� >�(�.�'� >�(2'� >�((�.� % ����������) ���� �����

������������-�����"'��>�� !���>�� (�2��? ���-���<=% ����������� ����������

���� ��)� ����/ ����'/�.�����.�/��(/�% ��� ������������

�������� �!� �"��!!#�$% �&��'��!�()*+,+()))*-.+/+( 0� 1���2�0 3��2����3 �������.

Page 53: HTML5 CSS3 by Examples Chapter1

�������������� ��������������� �������������������

���������������� ������������� �� ������������

��������������� ��������� � ������������

����������������� ����������� � �����������������������

������������������ ���������� � ����� ������ �������������

������������!�� ��"��#��� �� � ���������������

�������������������$������ �%��&��'%�� �������"���(�'�

������������������� ����������������� �����������

����$��! ��$�������$������ �%��&��'%�� ���������)������������

����$��! ��$�������� ��������� ��������"�������������

������*

������������

��*�

+������,�+�!���,�+�����,�

�������� �!� �"��!!#�$% �&��'��!�()*+,+()))*-.+/+( 0� 1���2�0 3��2����3 �������#

Page 54: HTML5 CSS3 by Examples Chapter1

� ������������������ �4 ���

��� ������������ �������1�"���5�$�5������� �4 ��� ���

������������� ���������� ������������������������������� �����

���������

�� ���� �� ��� �! ��"�"�� ���

��� ��������� �#���$���� �%&����� �� ' ���(���)�*�����)����

���)����� �#����� ��)���+� ' ���

� �����+���'�)��),���+���'���,���+���' ��������� �����������������

����*�'�����'�� ������' ����������������

����� �' ���

-�

�� ���� ����� �! ���"�"�����

���������� ��'� ��� ���'� ..� �! ����������������� �

�������)��)��.����/�0���#����� ��� �' ���������� ����� ��������

�����������.����/�0���#�� �� ��� �' ���

������������1�.0���#������0���#�� ��� �/�*2333+*2� #��4��� ��*2 ��'�

���������)#����5�4��������' ���

���������)#����4��������' ���

���������)#���� 6���� ' ���

���������)#�����)77��7��70���#6&/+7����� ' ����5������������

���������)#����� ' ����������

���������)#����8��),��7,�� �' ��������� �������� �����

���������)#�� �8��)7 �' ��������� �������� �����

���������)#����5�� ' ���

�������),�����)�'�,������' �������������� ��

�������� ����.���#*�/��0���#6&��' ��� �)��� ����

����������.��*' ���� ����� ��������

����-��

-�

� ��� ' ��������� ��

����������������������

�������� �!� �"��!!#�$% �&��'��!�()*+,+()))*-.+/+( 0� 1���2�0 3��2����3 �������/

Page 55: HTML5 CSS3 by Examples Chapter1

� ������������������������

��� ������������ �������1�"���5�$�5���������+$ ��"�

�� 1�����

�������������

�����������������9���:�)#����������#�����:�)������:;����*�:;���#�� #:�������������

���������������������

���� ���*��7�)����+��7�������*�7�������*��' ��������������

����� ����� ���)��'�

����)����)��.�������/�0���#����� �' �������� ��),���

����������.�������/�0���#�� �� �' ���

<������ � #������ ���� � �! ������������=>0����� ��

��������'����� ���'��..� �! ������������

������������<�?������������������ 9��)�'��? ' ��������� ������@��������

���<������ �#�� #���� ������� ' ������� � �������������

������1��.�0���#������0���#�� ��� �/�*2333+*2� #��4��� ��*2 �'�

���)��)��.������..�/�0���#����� ��� �' ���������� ����� ��������

�������.���������/�0���#�� �� ��� �' ���

���������#�����!�9�?���?- #����!�����9��)��7����9�����7 �������� �������� �

�����������������������������5���� �����9������7 �������� �������

��������������������������������������9����7�������9���7 �������� ���A��

���������������������������������������B����9���+ 7 �����5� ���������������

���- '�

���� ����.���#*�/��0���#6&��' ��� �)��� ����

����� ����<�?������������������ 9��)�'��? ' ��������� ������@��������

���<������ �#�� #���� ��� � ' ������� � �������������

����� ������0���#�;����)��") /�)��") �.����" /���" �' ������� ������������� �

���� ���)����0���#��� +��"���7�)�"�)�� �/�*C����0���#6&' ���� ���������������� ��

������ ��������?�������?�.� ���).�?�� ?�' ���������� �� ����

�������� �!� �"��!!#�$% �&��'��!�()*+,+()))*-.+/+( 0� 1���2�0 3��2����3 ��������

Page 56: HTML5 CSS3 by Examples Chapter1

�������������� ��������������� �������������������

���������������� ��������������� �� ������������

��������������� ����������� � ������������

����������������� ����������� � �����������������������

������������������ ���������� � ��������������������������

������������ �����!��"��� �� � ���������������

�������������������#������ �$%�&%%'$�� �������!���(%'�

������������������� ��������� � ����������

����#�� ���#�������#������ �$%�&%%'$�� ���������)������������

����#�� ���#�������� ��������� ��������!�������������

������*

��������+���*������+���* ���

������������

��*�

,������-�,� ���-�,�����-�

������������ ��������� �������������������������� ���� !"#$���%&#$�� !%�'!( #��)

Page 57: HTML5 CSS3 by Examples Chapter1

� ����������������������������

��� ������� ������ �������������������� ��������������� ��

��� ������� � ��� ���� �� ��� ��� ����������� ��������� ���

������� ����������� ������� ���� ��� ����� ������ ��� ���

������������

��������������������

�����

�� ����������

������������������������������������������������������������� ���� !��"#�

�� ����������

�����$� ��������������������������������������������������������%�� ���� !%"#�

&�

�'��������'����

� ������(���)*��+�(*�������)* ��*�$���)* ��*��'��(���

���������

,�������������"�� ''���������

����(�)��������-���.������/�0�*��+�(*"# ''�1�����! ���������

������)���(-���+�������*2*"# ''�

������)�3#���)2 ��#���)2 ��# ''��������� ����,���������

���)!���#��)2��#�����)��# ''�������������

���$�"# ''�

&�

,���������$�"�� ''������$�

����,������)�#���������#��44�"�� ''� �������������

����������- ����5���"# ''������������������������

��������)����4���6!-�"�6�7��-��������"�# ''����������������������

��������)����4���6!-�"�6�7��-��������"�# ''�

����������-,���8����)* ���*#� ''�

����������-��������������7��-5062�,���"# ''���������������

����������-,����"# ''��$�,���������

��������,���������"�� ''������,���������

������������- ����5���"# ''�

�� !��"#$"%������%%&��� '("�) '%�*+,-.-*+++,/0-1-* 2�������3�2����3�"���� �����!+

Page 58: HTML5 CSS3 by Examples Chapter1

����������)����4���6�7��-���������4�7��-50�6���6��-�! "�# ''�2�����������������

����������)����4���6�7��-���������4�7��-50�6���6��-�! "�# ''�

������������-,���8����)*$����*# ''�,����(������������

������������-��������������7��-5062�,���"# ''���������������

������������-,����"# ''�2�����������������

�������&�

������������4)�2�6��7��-50�'�����# ''�����������

����&��

&�

�����"# ''���������

�'��������' ����'������

�� !��"#$"%������%%&��� '("�) '%�*+,-.-*+++,/0-1-* 2�������3�2����3�"���� �����!,

Page 59: HTML5 CSS3 by Examples Chapter1

� ���������������������������

��� ������������ ���� ������� �������������������������

�� ��������� ��� ��� ��� ��� ���� ����� ����� ��������� ��

������� ����� ����� ������� �� ��� � ��� ������ �� ���

� �� �������

��������������������

�����

�� ����������

�������������������������������������������������������������� ���� !��"#�

�� ����������

�����$� ���������������������������������������������������������%�� ���� !%"#�

&�

�'�������

�����������()�����''*�+���������+���'*�'�� �'*,����'!'*,����+���+*�)��'��������

�'����� �������������

-�����(.����(��(/������ ��(!����$(�(�(0��# ''����������

-������(�����(�#�

-�����(����1��� ���2�3��+�����"�# ''����������������������

-�����(����1��� ���2�3��+�����"�# ''�

4��������"+����5��������"�� ''�$���5���673�������

�5����(�#���������#��11�"�� ''��������$�

����������(�4�8��-������()����������5���#)�8"# ''���������$��-�5����������

���4��������+ ��"+�����������"# ''��������$���������-�

����(����1��� ���2�3��+��������"�# ''����������������������

����(����1��� �����2�3��+��������"�# ''�

���������+��������8���8&"+��������5�������������������� ''�����������������

�������������������������� �������9������8 ���8����� ''�������������

����������������������������������$�����$��������������� ''���������:��

���������������������������������� ����;�����$'/ � ''�������������������

���&"#�

����5���������"�� ''�5���/�������

����������/�(�4�8��-������()����������5���#)�8"# ''���������$��-�5����������

����4��������+ ��"+�����������/"# ''��������$���������-�

!�"#�$%&'%(� ���$(()��� *+%�,"*(�-./010-.../23040- 5� ����6�5 ���6�%��� ������#-

Page 60: HTML5 CSS3 by Examples Chapter1

�����(����1��� ���2�3��+���������1�3��+<=�2���2��+�!�"�# ''����������������������

�����(����1��� ���2�3��+���������1�3��+<=�2���2��+�!�"�# ''�

����������/+��������8���/8&"+��������5�������������������� ''�����������������

�������������������������� �������9������8$����8����� ''�������������

����������������������������������$�����$��������������� ''���������:��

���������������������������������� ����;�����$'/ � ''�������������������

���&"#

����&��''��5�

��������1(�/�2��3��+<=�'�����# ''����������

��&�''�5�����

&"#�

�'���������' �����'������

!�"#�$%&'%(� ���$(()��� *+%�,"*(�-./010-.../23040- 5� ����6�5 ���6�%��� ������71

Page 61: HTML5 CSS3 by Examples Chapter1

� �������������������� �������������������������

���� ���������� ��������������� �������� �������

�������������� �����������������������������������

����� ��� ������ ��������!� "����"#� $����� ���������

��� ����� ��� ������ ��������� ��� ���� ��%� ��� �������

�� ����� &'()� �����#� *�� ���� "! ����"� ��� ��� ���

���������������"����������"�� �������������������� ���

������� �� ���� ���� �������������#�'��� �� �� �� ������

��������� ��������� �� � ������ %+� ������� ���� ��+�� ��

���%������#�#����������������������������,��������! �������������#�

'������������� ����� ���%��������������������������"!%�����"������� �������#�'���

"�������"� ���%������������������ ����� ������#�'���- ���.������� ��� /������������

� ����%�������������#�

��������������������

�����

���������������������������������

�������������

�������������������������� !���"������������"�����������#!��"������$���%��

�������������

��������������������������������� !���"������������"�����������#!&"������$�&%��

�������������'��$����$�����

(�

���)������

�����������**� +,�������������� ,+�

������������������� +, ,+�

������������������������������ +, ,+��

������������ +, ,+�

������������������������� ���"������������"�����������#!��"����$���%��

������������ +, ,+�

�������������������������������� ���"������������"�����������#!&"����$�&%��

�������������'��$����$���� +, ,+�

(�

-���������� +,����������./0�������� ,+�

�����������������1�� +,�)��������� ,+�

��������2$��� +,��������� ,+�

����)����2$��� +, ,+�

�������������� +,���'� ,+�

���������������� +, ,+�

�����������������&� +,����������� ,+�

&'()0��1231�� ��������%+ 451($)4��678 9 67778/: ; 6 �� ������� �����1�� �����</

Page 62: HTML5 CSS3 by Examples Chapter1

������������� ��� ���������� �� ���

��

���������������� �������������� ���

������������ ������� ������ ���

�����!�!������� ��� �� ���

�������"#�$� ������!�!� ���

�� �����"%#�$� �� ���

��&!�����'((�$� ����!)� ���

����!�����'((�$� �� ���

��������"���!���'((*� ��������������!�� � ���

������������&�!��� �������������� �� ���

��

����������������� ���!���������� ���

���������� �� ���+,-����� ���������!���� ���

�����!�!������� ��� �� ���

�������.#�$� ������!�!� ���

�� �����##�$� �� ���

��&!�����'-#�$� ����!)� ���

����!�����'-#�$� �� ���

��������"���!���'((*� ���������!�� � ���

��)"!��$���"'�� ������������!����� ���

������������ !���"����!�������/� � �&�� ���01'( ���

������������"&���!�" !���"����!�������/� � �&�� ���2������3����! ���

��

4��� �5�4�����5�

&'()0��1231�� ��������%+ 451($)4��678 9 67778/: ; 6 �� ������� �����1�� �����<:

Page 63: HTML5 CSS3 by Examples Chapter1

� ��������������������� �������������

��� � ����� �� ����� ��� ����� ���

� ������������������� ����������

������ �������������� � �!����

�"� �� ���� �� �!�#� � �����$ �� � ��� ��� ��� !�"�� ��� �� ��� ������� � ���!��

%&���!� ��������"���������� ��������������'� �������������������������������

� �����(�������! �������� ���� ������ ����������)���)*� �������������'

���+���+����� +!�"�������������

��������������������

������������ �� ���

�������������������������� �� ���

���� ���!��"����������������� ���� ��������� �� ������ ���

��!���#��!� ���!��"������������������ ������������ �� ��� ���

�����#�� "$���� �� ���

%�

&"������������� �� ���

��������'�������������'���� �� ���

�����#�� "$����� �� ���

���� ���!��"���'�������������� ���� ���!� �!����!��"� ���

��!���#��!� ���!��"���'�������������� ���� �������� ���

���� ���� $���� �"����������������� ���(���� �� ���

%�

�"���� �� ���

��������'�������������'���� �� ���

�����#�� "$����� �� ���

���� ���!��"���'��������'������ ���� ����� �� ��� ���

��!���#��!� ���!��"���'��������'�������� ���� �!������ �� �!������ ���

���� ���� $���� �"����������(������� ���(���� �� ���

%�

�������� �� ���

�������������������� �����)�*��"���� ���!��"� ���

���� ���!� �������� ������ ���� � ���

���� ���!������������ �����"�� �������� ���

���� ���!� �� �������� ��� �$��� ���� �� � ���

���� ���!����������� ������� �� ������� ���

���� ���!��"�������� �� ���

��!���#��!� ���!��"�������� �� ���

���� ���� $���� �"����������(+������ ���(���� �� ���

��!���#��!��$�� ����� ���,'���-�� ���� ����'������� ���

�����$�� ����� ���,'���-�� �� ���

%�

���$�� �� ���

�������,(-,�� ���������. $/,�0�$��123'*'1222345'6'1 7� ���8�7 ��8�,� �����9�

Page 64: HTML5 CSS3 by Examples Chapter1

������������������ � ������ ��

�������������������������� � ���� ��

������������������������������������ � ����������� ��

�������������������������������� � ������� ��

����������������������������� � ���� ��

��������������������� � ��

����� ��������������������� � ��

���������������������������!���������"��� � ��

#�

$��������% � ������ ��

������������������ � ���������������� ��

����������������������������� � ���� ��

������������������������������� � ������ ��

������������������������������������� � ������� ��

�������������������������� � ���� ��

���������������������������&���������"��� � ��

#�

'�����(�

'���('����(�

��'��)����*����+,��,�*(��'���)(�

��'��)����*-�����+,��,�*(��'���)(�

��'��)����*����*(��'���)(�

��'��)����*,��,�*(���'���)(�

��'��)����*��,���*(���'���)(�

��'��)����*�������*(���'���)(�

'�����(�

'�����(�

�������������� ��������� ������������������ �����������������������������������

������������������������������������������������� �� �������

������������ ������������

������������ �������������

� ��������������������������

�!�������������������������

�����������������

������������� ������ � ������� ��� ������� ��� ������ �

"����#�� ��$������������� ���������������������������������% #$���

��������������� �����������&�% #����������������� ������������&�% #��

�������������������������� ������������������������'������ �������������������

������&(� ���� �!�� ����������������������&(�� ���� ����� ����� ��� � � ����� �������

���������

)�����������������% #��% #�(�(�*�+)�� �������������)+�

,�-.%�/01203�����/33 ��4 560-7.53�89:�(�8999:���!�8 ;�� ����$�;����$�0���������<!

Page 65: HTML5 CSS3 by Examples Chapter1

����%�� ���������7������ ����������������&�����&(������������������&�% #��

=�������������4����>������>� �� ������������������������� ��������������������

���������� �����������4� ��� ������������������ ?�������� ?������������ ���� ��� � �

������ ��� ��� ������� ����� ��� ������������ ���� ���� ��� ����� ��� ��� ��������

3�������4$������������ �������������������� 4� ��� ���� ���� ����� ������ ��� ��� ������$�

��� ������4�����������7��������� �$������ �4���@�������������������� ������

������������������ �������������4������������!������������ ��������

�����$������ �4���� ���� ����� �� ?�������������% #������� ���� ����?�

���� ?�������������% #� ������ ���� ����?��3���/33��4����� ����� ���� ���� A������� ���

������������� ��

������������������������������������������������� �������������������

������������%����� �����7�����$��#�� ������������������ �� ��4�

����������������������������@���������������������������� �$������4�

���?����������&�% #����������?��B���������������� �� ����������������� ������

,�-.%�/01203�����/33 ��4 560-7.53�89:�(�8999:���!�8 ;�� ����$�;����$�0���������<%

Page 66: HTML5 CSS3 by Examples Chapter1

� ������������������� �������� ���������������

����� �� ��� �� ����� �����

�������� ������ �� �� ��� �����

������������� ��������������� ���

��������������������

����������������������������������� �� ���

����������������������������� �� ���

��� !"���#��!��������� �� ���

������ "��� �������#���$����$����$����$������%����%����&����&�����

��� �������#�������������'����'����'����'����&�'���&�'���(�'��(�'��

)�

�����������������������*����������+����������������(���������������,��)��

������ ������� �� ���

����!��������--�� ���������!������ ���

�������������� ���#���� �� ��

��������������������� �� ���

������������������������������ �� ���

���� !"���#����#������ �� ���

���� �������#��������������������� ��� ���������#�!���� ���

������� "������������������.&���/�� ���������&������� ���

�������������������.&���/�� �� ���

)��

������������ ��� ��������� ���

����!��������--�� �� ���

�������������� ���#���� �� ���

����������%��������0��� �� ���

����������������������������� �� ���

���� !"���#����#������ �� ���

)�

�����(�����������#���������������������#��������� �����

����� ���������������*����������+����������������+����������������++�)�

���� �����1� ������������!�����2�� ���#��������� ���

�������������� ���#��� �� ���

����!��������--� �� ��

����������������������� �������3������3� ��

���� �����������$������������������� �� ���

���� �����������$��������������������� ���

���� ����� ����������������� �#�� �� ���

������������������������ �� ���

)�

����������� ��� ������������� ���

� !"#��$%&$����������' ()$!*"(��+,-�.�+,,,-/0�1�+ 2������3�2���3�$�� ����44

Page 67: HTML5 CSS3 by Examples Chapter1

��� ����� ������$������������������� �� ���

��� �������������������� �#�� �� ���

����������������+���� �� ���

)�

����������������#��������������1�������&�����&�������� �����

����������������������*�����!�����2�� �� ���

�����������+����������������+����������������+$���� ���

)�

����� ����������!�����2�� ���&������������ ���

�������������� ���#��� �� ���

����!��������--� �� ���

����������������������������� �� ���

���� �������#����������������� �� ���

���� !"���#��� �#�� �� ���

������ "������������������.&���/� �� ���

�������������������.&���/� �� ���

����������+����� �� ���

)�

��������������!�����2�� ����&������������ ���

�������������� ���#��� �� ���

����!��������--� �� ���

����������������������������� �� ���

���� �������#����������������� �� ��

���� !"���#��� �#�� �� ���

������ "������������������.�&���/� �� ���

�������������������.�&���/� �� ���

����������0$����

)�

�������!��������#������������������!��!��1��������*����� �����

��!������!�����2���������������%���������������+���

�������������� ���#��� ����#����!��!�� ���

����!��������--� �� ���

����������������������������� �� ���

���� �������#���+������ �� ���

���� ������+��������� �#������ �� ���

����������$����������$���� �� ���

)�

��!�����������!�����2�� ����*����!������ ���

������������� ���#��� �� ���

���!��������--� �� ���

��� ��������������� �#�� �� ���

����������������������������� �� ���

���������$��������������� �� ���

)�

��!�� ����������!�����2�� �����*�����*����� ���

������������� ���#��� �� ���

� !"#��$%&$����������' ()$!*"(��+,-�.�+,,,-/0�1�+ 2������3�2���3�$�� ����4,

Page 68: HTML5 CSS3 by Examples Chapter1

���!��������--� �� ���

��� ����������+��������� �#�� �� ���

��� ������������+��������� �#�� �� ���

���������%�������������%����� �� ���

����� "������������������.�&���/��� �� ���

������������������.�&���/��� �� ���

�������������������$���� �� ���

)�

���������

����� ����

����*��3-���-��������*�����

����*��3- �����-����*�����

����*��3-���-�������*�����

����*��3-����-������*�����

����*��3-��!�-������*�����

�� ����

��������

��������������� ���������� ���������������������������������������������

������������� ����������������� �������������������� ���� �� ��� �

! ������������� ��� ��� ��� �����������������������

"�������#����������������$����%&'(�)'(*�����$�� ���%&'(�)'(*��������$�� ���

%&'(�+'(*���,�������$����%&'(�+'(*������ �"���$������������,�#���������

&'(���������,������-&����������������� �"���$��������������������������������

%+'(��������� ������)&��*����������������,�������������������������������

%)'(��������� �������'��*������������� ����������,�,��� �

! ������������� ���� ������ ������

"����������������.�������������������������/���������������$�� ���

�������������������������� ���������������� �"�����������������)&$

, ���������� �

! ���������������������������������������������������������

0��������������������,��� �����,������������� � �1������,��%����

��,�������*������������� �"�����������������$)&�, ���������� �

0"23&��4�54����,�������� 6742836��9:;$'$9:::;<-$)$9 ����������������4����������+;

Page 69: HTML5 CSS3 by Examples Chapter1

� ������������������ ��� ������������ �����������

�� �� � ��� ��� ����� ���� �������

����� � ��������� ������� � � �����

��� ��� ������� � � ����� ��� �� �

������������ � ���� ��� �� � � ������

����� ��������������������������������

�� � ���� ��� �� � �������� � � ����

�� ���������� ��� �� ���� � ��������

� ��� �� �� � ��������� ������ ����

������ �������� � ���� �������� �� �

� �� ���� � ������� ����� ��

����������������������� ����� � ����

����� �� � � ������ ������� � � � �� �

��� � ������ ���� ��� ! ���

� � ������� �� ����� "���� �� �

��� ��� �� ��� � ����� �������� �����# ���$���"��������� �������� ��������!��������

��������������������

�����

�� ��������������������������

�� ����������

����������������������������������������������������������� �� �����!� "��

�� ����������

�����#� ���������������������������������������������������������$�� �����!$"��

�� ����������%���&� ��&� ��

'�

��� �(������

�����������))� *+�������������� +*�

����������� ������� *+ +*�

��#����!&&&� ����������!&&&� �� *+ +*�

�� ������������������������� *+ +*�

�� ��������� *+ +*�

����������������������������������������������������������� ������!� "��

�� ��������� *+ +*�

����#� ����������������������������������������������������������$������!$"��

�� ����������%���&� ��&� � *+ +*�

'�

�*��������*����

� ������,���-.��/�,.�������-.�&&.�#���-.�&&.��*��,���

���������

(�������������"�� **���������

���,�-��������0���1������2�3�.��/�,."� **�4&&� �!�&��� ����

%�&'(��)*+),������,,-��� ./)&0'.,�123�4�1222356�7�1 8���������8�� ���)����������91

Page 70: HTML5 CSS3 by Examples Chapter1

�������������� ������������ ���

���������������������������� ���� ����������� �������� �

�������������!������������ ��������������� �

����"��� ���

#�

������ �����"���$ ���%�%����"�

����� ������������&��������'�������$ ������� �������� ��

��������������(��)��� ����� ������)�� ����� � ��

�������������'�����*�+��)� �������� ���, ��� ���� �����������

�������������'�����*�+��) ���������� ���

������ ��-���������.�.�.��'��.�.�.�/")���/.�/")���/.�/����/.������ ��� ��%�������

���������������.�.�.�.�*+��)(0.��� ������ ��� ��������������������

����������������� ���

��������� �� 1�2����+��)� �����*���������.��.����� ���� ����� ������� �

������������'����*��+��)(0�������� �������������

����#��

#�

������ �� ��-����������.��.��.���.��.��.���.��.��.������$ ���%�%����������������

��������� � �������������3�����4����������.��.��.���.��.������ ���

��������� � ����� � �5� ,����.������� ����������������

��������� � ����� � �5� ,����.������� ������� ��� ����� � ��

��������� � ����� � �5� ,����.������� ��� ������������

�����������5����������� � ��� ���

#�

������� ��� �������

&� ���,�6&�� ��6&�)���6�

%�&'(��)*+),������,,-��� ./)&0'.,�123�4�1222356�7�1 8���������8�� ���)����������24

Page 71: HTML5 CSS3 by Examples Chapter1

� ������������������ ��� ������������ ����������

� �� � �� ��� ����� ��� ������� ���� � ���������

����� � � � ���� ��� �� ������� � � ���� �� �� �

����������� � �� ��� �� � � ������ ��� �� � ������

��������� �������� ����� �� � ���� ��� �� � �������

! � ��� �� ����� ���� �� �� ���� � ��������

��� ���� ������������������ �����������! �

��� ������� �� � � �� ��� � ������ ����� ��

����������� ������ ������ ��� �� � � ��� ����� ��

� � �����������"� � � �� � ��� � ������ ���� ��

# ��� � � ������ � ����� $���� �� " � ��% �

�� �� �� � % � �� ��� ����� �� � & ���'� ��$� ����

���� ������ ����� ��#�������

��������������������

������

������������������������������

�������������������������� ������!" �����������#�"$��%�����%���� �

����������������������������� � �����!" �����������#�"$���������������

������������ ��������������������� �����!" ����������#�"$��%�����%��� �

��������������� ��������������������� �����!" ����������#�"$��������������

����������&���#�����#������

'�

�(�������

��������������)*�����((+�,���������,���(+�(�� �(+-����(#(+-����,���,+�*��(��������

�(����� �������������

.�����)/ ���)��)!�� ��� ��)#�� ��)�)�)0��� ((����������

.������)�����)���

.�����)����1��� ���2�3��,�����$�� ((����������������������

.�����)����1��� ���2�3��,�����$�� ((�

4��������$,����5��������$�� ((�����5���673�������

�5����)�!��������!�������1)�%��$�� ((����������

����������)�4�8��.������)*����������5����*�8$� ((������������.�5����������

���4��������, ��$,�����������$� ((������������������.�

����)����1��� ���2�3��,��������$�� ((����������������������

����)����1��� ���2�3��,��������$�� ((�

����5���.�����,��9���))�83������5��:��������;�������8$�� ((���<�9�������

(��)*�+,-.,/����+//0� � 12,�3)1/�456�7�4555689�:�4 ;���������;�� ���,��������58

Page 72: HTML5 CSS3 by Examples Chapter1

������������������������� ����������������������������������������� �������

���������� ����������!������� �������������������������������������������� ����"��

���������#���� �$�%���%��#���� ���&�$��'�����"($������� ������ ��("����"���

����������������������������! �"��$������� ������ ���"�"��

��������������������������������������$��������� ��$���� ������ ����)��

�����������������������������������"���*���$���+ � ����!�� ����������(��

�������

���� ������+�,��-��#./�������� �����'��� ��

�������&"��'�

����

0�����(�1�0��"�1�0�����1�

(��)*�+,-.,/����+//0� � 12,�3)1/�456�7�4555689�:�4 ;���������;�� ���,��������59

Page 73: HTML5 CSS3 by Examples Chapter1

� ��������������� �������������������������������

���� ����� �������������� ���� �����������

��������� � �� ����������������������� �������

������������ ������� � ��� ���� �������������

������������� ���� ��� ��������������

�� ������� ��� ����!����" �� � � ��� �����������

�������� ������� �����������������������

# � �� �� � ��� � ���� �$%&'($%&�)�

������������ �� � ��� ������� ���� ������ ��� �� �

������ �� # � ����� � �� � ����� ����� � ����� ���

������������������������������ ����������� ��������� �� �������� ���� ������� ����� �� ��

����� �����"(��� ���� �������

����������� �

������������������������������ �!���������

"#$���%$���&'() ��**���&'(

!����$��%�#��$�+,������$�-�.�'/����$/(0 ��

!��������$+,���%$����'/1�/(0 ��

!����$�����+��$'����+�.�23(0 ��45+2675"#��������891�%���%$�

!���%������+�%�'����+�.�23(0 ��45+6:5;

���+���$�����'155<155(0 ���%!���������$����%155<155

"%�'��50���920�==() ���$$���%%�

���+"�������'���� �=�<>5<5(0 ������#�*�>5

���+���$�"%��'�%�<*��$<��$<�%�<5<5(0 ���$����%�?�������%$0������@�

A

"%�'��50���230�==() ��%#����%%�

���+"�������'���� �=�<255<5(0 ������#�*�255

���+���$�"%��'�%�<��$<*��$<�%�<5<5(0 ����%�?&����������%$0������@�

A

A

���������

�������

�B%��%$�%�������&'(0��

���$!����������$�&������:55����,����:55������$!���

��B%���

�������

$%&*��+,-+.������..��/0 �1+%2&�.�345('(34445)�(6(3 7������� �7�� � �+����������4�

Page 74: HTML5 CSS3 by Examples Chapter1

� ��������������� ����������������������89%:�

� ����"��������� �� �������� ����� �������� �

89%(/�� ������������

������������

������������ C#���*2+;+1+��$+ ������������

��������B%�����������

!��$#��92<�5��5�155<%�B���255<&�����950 ������������

!���$,����$,����50 ��

D'�%�#��$�(+�����'"#$���%$'() ��&���"%�����%���$,

"%�'��50��$#�0�==() ���%%��%&

�������D'/���!��������%����%$8"����0��/(0 ��������$�&��!"%�������

D'�%�#��$�+B%��(+����$�'������(0 ������$�$�&��������!

���5=%�B��E����+�%�'�$,��(0 ������,$�%����%$��%#$�������

���5=%�B��E����+��$'�$,��(0 ��

�$,�����$,��E2:5�����+�.0 ���$,���%�%������$�

���$�"%���/�%����'/=�$,���=/��,(/0 ���%����%$�$,��

������+����')��8/���/A(+���')��"�8�<�%�8�< ������,$�%����%$

B��?,�%#$��%�%�8/����%&/< ������,$�%�%�

&����835<���,��815< ������,$��@�

���$�"%�����,�$8�5255F�< ����"�#��75F

���$�"%��8���$�"%��< �����$�"%��

&�B?�����$�"%�����,�$8�5255F�< ����%,�����!��$��$����$�

&�B?�����$�"%��8���$�"%�� ��,����"#���,������%$

A(+����'���� �=�(0

�$,��=�1E����+�.�$#�0 ��$����$,��

A��"%��

A(0

�����������B%����������

$%&*��+,-+.������..��/0 �1+%2&�.�345('(34445)�(6(3 7������� �7�� � �+����������46

Page 75: HTML5 CSS3 by Examples Chapter1

� ���������������� ����� �������������������

� ����"�������������� ������ ���� ���� ���������

������� ��� �� ���� ������ ���� ��������������� ��

����� �� � /������ ��� �� � � �� ��� ��������� ��� �� �

� �� ���� ������ ��� �� ���� ������ ���� ����������

����� �� ����� �� � ��� � ��� �� � � �� ��� ��������� ���

�� �� �� ������� ������ ��

��������������� �����

� ������

��������� ������ ��� �������������������� �� � � ����

������!����"����� ���

������!� ����������� ���

������! ������� �������� ���

������!#����$����� ���

������!����%���"&� ���

������! ��'�'� (�'�)��!$*�+�,�������� ���

������!�� �-���� ���

����� �� ��"'���������!��������..�� ���

���������!������ ���

���������!� ������ ��'�� ���

���������! �����)��!$*�,���������� ���

���������!����/����������0�1�'�'�� ���

���������! ���� ���� ���

���������! �����,+)��!$*���������!�������� ���

���2�

2�

����������������� �� � ��������

��� �����"��������!���3������4�*�5����5�� ���

������"����!���6�������5,5�� ���

�����!������� ���

�� ��,''�,''�7'�)��!$*�8#���,'������ 9� ��8�8:;*/3<�;�/*=;9�936:>*/?�8����

�����! ���� ���� ���

�� ��,''�,''�@''�)��!$*+,!''�8#���,'������ �� ��8��

8:;*/3<�9/�/39��6�A*B=>;*�8����

2�

���� �����������

�#�����A�"8������8���

����������"8����8�����"8(''8�������"8(''8���������

��#������������

$%&*��+,-+.������..��/0 �1+%2&�.�345('(34445)�(6(3 7������� �7�� � �+����������4*

Page 76: HTML5 CSS3 by Examples Chapter1

� ���������������� ����� �����������������

���� ��� �������������������� �� ����������

������� �� ���� ���� �� ������� ��� ���� ������ ��

� ��� � !"#$�%&#!�� ��� �� ����� ������ � �

������� ���� '� ����� �� � ��� ��� �� �����

������� ��������(')�����

�� � ������ � � *��� ������� ��� ������ +�+,��-���

������������������������� �./������������ ��

�*�������������������������0���������������� ��

�������

�����

��� �����

��������� ���� ��������������� �������� ������� �

��� ������������������������� !"��������������� !#�$���%��%�& ���

���� �� �'���(&�'�������������&�'))��� ���*��������

�������� ������������ �����������%��%��& ����������

����������������������� !"��������+������� �& ��������

�������� ���!������������,- �.(�)�%�/%�&� ��������������� ����

�������� ���!����������,- �.(�)�%�/%�& ���������� ��� ����

�������� ���!���0� � 1������,- �)�%�/%�& ����2���� ����

�������� ���!���0� � �%3.�/������%�)���& ����������� ��� ��� ����

�������� ���!���� ���4����������� �*(�)%�/%�& ���

�������� ���!���� ���#���������5�)%�/%�& ���

�������� ���!������������%0������%& �����/���

����� ������������������������ 6#74& ���

������ �� ���(&�������������&�))�� ���

�������������������� �����������%��%��& ����������

����������������������� !"��������+��������& ��������

�����������!���� ���4�����������)%�/%�& ���

�����������!���� ���#���������)%�/%�& ���

�����������!������������ �&� ��������������� ����

�����������!������������%0������%& �����/���

1��"2� !&3!4����� 445��� 67!�8"64�(9:)')(999:+;),)( <����� =�<�� =�!�������� �9>

Page 77: HTML5 CSS3 by Examples Chapter1

���������������� ����������������������� ���

���������������������� ����������������������� ���

����� �������� ��� !������"�� ���

���������������� ������������� ��#���� ����������$�� ���

���������������������� ����������� ��#���� ����������$�� ���

���������%�����&!�����&�� ��'�����#�����$�� �����������

���������� ((���)"��#����%$� ��� ((����

���������%������� ������������� ��#��������������$�� ���

���������%������������� ������������� ��#��������������$�� ���

���������%������*�+,��� !�-�.�� ���

��/�������� ���

�/

/�

0��&��(�1�

0�"� �1�

0������� ����� �#2���2�34��35 6�3��%��3��3�57�3�2���2��$��

���������������� �#2���%238��35 6�3��%��36�3����3�2�!�2�$��1�

0������������10�19:;�'<�:=�;�:>�>')9?;�@�0����1�

0�����������%�10�1)=,;A�?:;=�0����1�

0����1��

0�"��1�

1��"2� !&3!4����� 445��� 67!�8"64�(9:)')(999:+;),)( <����� =�<�� =�!�������� �99

Page 78: HTML5 CSS3 by Examples Chapter1

� ������������������������

��� ���� ��� �� ��������� �������� ��� ���

��������� �� �� ������� ������� ���� ������ ����

�������������� ������ ��� �������������� ���� ���

������������������������������� ����� ��������

�������������� ��

��������

����� �������� ������������ ����������������������������������

���� ����

���������������!���"�����#�$�%&��&'( ))�

�����*�����!���+���*�%&��&'(� ))�

��������( ))�����������

,��� �����%'�-� )).�.����%'�

����*!��� /��%'( ))���� /���

�����*���0��!����%'�1���!� ����( ))������*���

���������0��!����%'�1���!�� ����( ))� �����2�*�3�4��

���������0��!����%'�1����5����( ))�������� ���

����������0��!,����%0��!����%'1���'�( ))����������

����������0��!,����%0��!����%'1���'�( ))�����������

�����������0��!,����%0��!����%'1���'�( ))�����������

�������������%��5����5�6��5�����5�6��5�����5�'�( ))����%�.���6�.���6�.���'�

�����, ��+���������*!�����7� �8�� ��%*.�6�.�6�6�*6�6��'( ))��� ����� ���

��, ��+����!��+����9�� %��6���� ����'( ))� ����� ���

��, ��+����!��+����9�� %�36���'( ))�������������

����*!, ��9������, ��+����( ))�

����*!�����:� �����!2(� ))�� � ���

����*!��%�*6��6��6��6�0��!/$1�6�,���'( ))������ �����

����*!, ��%'( ))�, ���

����*!������;�*�%�556�*6��'( ))�������*��

<��

���$�����%�,��� �%'�-����%'�<�6�����'( ))�� ����

�)��� ����)������)������

!"#$��%&'%(������(()��� *+%",#*(�-./010-.../23040- �����������������%���� �����./

Page 79: HTML5 CSS3 by Examples Chapter1

� ����������������������

�� �� �� � � ��� ��������� �������� ��� ��

������� ����� ������� �� � ���� ����� � ��� ��

������ �� ������� �� ���!� � ���� � �

��!��!���"�� � ���������� �����#������

�����������������!������������ ���������

��� �� ��� ���$� �� ����� � �� �����

���������#������������������

��������������

����� �������� ��������� �����

������ ���������������

���������������������� ��������������������

�����!����������"���#��$%%��� �������&������������������

'�

�����������"������ ���(�(����"����

����� ����������)����*�������+�� +�� �������������� ����,����

�� �����-���)������-���)��������$.������/� ���������������

�� �����+0+���-���)�����-���)��������$�1%222�1%��)��3�����1%�� �������������

�� ��4���-���)������-���)��������$�/����������� ���������4�

�� ��5���-���)������-���)��������$�6����������� ���������5�

����� )��5��)������� ��������������������,7���

����� )��5��)�������� ���������������������,7���

����� )��5��),���8�����������+�4+� �������������

����� )��5��),�9������� ������������������,7���

����� )��5��),�9������+�����(�����������#�����#+��+�+�� ��������������

����� )��5��)�����:����4� ���������������������

����� )��5��)�����!���5� ��������������������

����� )��5��)���������+�,������+� �������������,�������

����� )��5��)�����5��);� ��������5�

���"��������������)����!�4�<��������� ����������4���,7���

����� )������"������"��������� ������������4���,7���

����������������)���*������=5>��+���+�� ��������4���������� �

���������),��5)�����=�������� #������� ��������������� �

'�

��������

�,��5��

����� ����?���?���5���+,�9�����&,����������&/����������&6���+���@�������A����� ��

��,��5����������

%��&'�() *)+�����(++,��� -.)�/&-+�012�3�0111245�6�0 7����� $�7�� $�)�������� �10

Page 80: HTML5 CSS3 by Examples Chapter1

� ��������������� ��(��!� ��

�� �� �� � � ��������/������ ������������ � �� �������� �� ������

�������

����������������������5���+��4��7� �����+���

����#��4#����� ��>���� ���

��4����#�5���/��� ��������������������

���4���1�#�����BB��� ����������������

������-���)@>$�)���� �������������

������������� �����������������

��������������� ���(�(������

��������������)���*������=5>��+�� +�� ��������� ���>��

���4�����)���"����4��+��+�� ��������(������4��

���4)����3�5���+��+�� �����������������

�������� �������

'�

������������������ ���(�(����������

�������>��� ������� ��>��� ���������������� ���

�������� ��>�������>��� ������#����� ���������������� ���

'�

�������������� ���(�(�����

�����4)���8����#�#��)�����#��)�������� ������������

��������������������

�����4),����@������ ����������������

���������������� �������������������

�����4)�� �!��4#5�� ���

�����4)��4#5#1�#������#�-���)@>�$���(������#�������� ����

�����4)����@������� ���

�����4)�������� ���

���������������������� ����������

��������-���)�,�����������-���)@>$�)1����������� ���������4�������������

����4�����4��� ����������������

�������������� �����������

'�

����������

����������

��,��5��������+������+���

������ ������+�� +�������+B��+��������+2��+������ �����

����,��5�����������

%��&'�() *)+�����(++,��� -.)�/&-+�012�3�0111245�6�0 7����� $�7�� $�)�������� �23

Page 81: HTML5 CSS3 by Examples Chapter1

� �������������� ���������

���� ��� ������������������������������ ��� ���������� ������

���������������� ���������������������� ������������������� �����

�� ����� ���� ���� �� ������ ���� � � ���� ����� ����� �� ���� ��� �

������������� ���!������� ������������������������

������������

��������

����� �� ���

��������������������� �� ���

�����������������������������

������������������������������������������ �� ���

���� �!"�������������������������������������� �� ���

#�

�$�������� �� ���

�������������!���%��� �� ���

��� �����&����� �� ���

�����������&����� �� ���

���!�������%�������� �� ���

���$�������$�'���(�����(�&����(����)� ���$�������� ���

���!$"���%��$����������� � �� ���

��� �!"������������������*����� ������������������� �� ���

���������������������*����� ������������������� �� ���

#�

�$���!���� �� ���

������������!���%��� �� ���

�� �����&����� �� ���

����������&����� �� ���

��!�������%�������� �� ���

��$�������$�'���(�&����(�&����(�����)�����$��������� ���

��!$"���%��$����������� � �� ���

�� �!"������������������*!���� ������������������ �� ����

��������������������*!���� ������������������� �� ���

#�

+� �!"���"���������������� �� ���

������,����������������# �� ���

���&��,����������������# �� ���

#�

+����"���������������� �� ���

������,���������������# �� ���

���&��,���������������# �� ���

"�#$%��&'(&����!������ ) *+&#�$*��,-.�/�,---.01�2�, 3����� 4�3�� 4�&�������� �.0

Page 82: HTML5 CSS3 by Examples Chapter1

��

����������� ��������������� �� ���

������������� ����� �� ��������� � �� ���

��!���������� ����� �� ����"!��� � �� ���

�#����������� ����� �� ��������� � �� ���

��

��������� ��������������� �� ���

������������ ����� �� ��������� $��� �� ���

��!��������� ����� �� ����"!��� $��� �� ���

�#���������� ����� �� ��������� $��� �� ���

��

����������� ��������������� �� ���

������������ ����� �� ��������� �� �� ���

�!���������� ����� �� ����#%!��� � �� ���

#����������� ����� �� ��������� �� �� ���

��

��������� ��������������� �� ���

������������ ����� �� ��������� $��� �� ���

��!��������� ����� �� ����#%!��� $�� �� ���

�#���������� ����� �� ��������� $��� �� ���

��

&�����'�

&�(���'��

&����'��

����&�)�*����+,��,'�

����������&�)�*����+,��*������,'&��)'�

����������&�)�*����+,��*������,'&��)'�

���&��)'�

&�����'�&�(��'��

"�#$%��&'(&����!������ ) *+&#�$*��,-.�/�,---.01�2�, 3����� 4�3�� 4�&�������� �.1

Page 83: HTML5 CSS3 by Examples Chapter1

� �������������� ���������

��� ������������ ���� �� �� ��������� �����������������������������

������������������������� ������� ������������������� �����������������

��� ������ �� ����� ��� !������ ��� ��� ���� ������ ��� �� ���� ���

��� ���������������"�������������� ������� �� ����������

������������

��� ����� ������������������ ���������� ���������������� �����

��������

������� �� ���

������������ ������� �� ���

����� ���!"�#��������$"�#�� �� ���

%�

���������&�������'���� �� ���

�������������'������� �� ���

���(�����)""�#� �� ���

������*����)""�#� �� ���

���'� � � �����$"�#� �� ���

���'�+* �������� �������(� �� ���

%�

����������� �� ���

��������� ���,"�#&�)""�#&�$"�#&�"�#-� ����������� ���

%�

������'���� �� ���

�������� ���,$"�#&�)""�#&�)""�#&�"�#-�� ��������'����� ���

%�

���������

��� �����

������!"����*�����������*���)�� ���� ���� ��

., �������,-� ���

� �����������(��*,-��� ������������(��*�

�����.,�����������-����,���/�'+��0 �� � ���1 ����,1�2���*�2�1�*-1�%-��

�����.,�������'���-����,���/�'+��0 �� � ���1 ����,1�2���*�2�1�*-1�%-��

���.,�����������-����,���� �� � ���1 ����,1�2���*�2�1�*-1�%-��

���.,�������'���-����,���� �� � ���1 ����,1�2���*�2�1�*-1�%-��

����*�2���*���

���� �,��*���"�33��*��������-��*�����)�� �����**���*�������

%�

� �������������*,-��� �������������*�

#�$%�&'()'*� �"�&**+�!, -.'��$-*�/01�2�/000134�5�/ 6� ����7�6 ���7�'��� ������1+

Page 84: HTML5 CSS3 by Examples Chapter1

���������������� � ������������ ��������� �������������������������

���� ������������ ������������������ �����������

��

������������ ��!��"� ��� ���������� ����� ���#�#��� ��

���������� ��� ��$$���� ���"������������

��� ������������

%�����&��

%�"���&��

%'��(���)������� ���&��

����%����������������&�

����������%���������������#����&%����&�

����������%���������������#'���&%����&�

���%����&�

%�'��(&�%�"���&��

#�$%�&'()'*� �"�&**+�!, -.'��$-*�/01�2�/000134�5�/ 6� ����7�6 ���7�'��� ������15

Page 85: HTML5 CSS3 by Examples Chapter1

� ���������������������

�� � ��� ��� ��� ��� ��� � ��������� ��� ��� ���

������ ��� � ������ � ����� �� ����� ����������

��� ����� � ������ ��� ������� ��� �������� ���

�������������������

��������

�����

������ ����� ������� �������������������� �����

�������

�������

��� �����

� �������!� �� "������� !�# ���$���"� �%&'�����(�

$���� )*+��,,+��,,+���-+��+�( ����+,+,�!. �������$�����

$���� �)+�*,,+��,,+���-+�-+� ����+�+,�!. ������$�����

$���� �/+�),,+��,,+��-,+�-+�������+�+,�!. ���0 �$�����

"��������$���� ���+1,+�,+� ���+�$+�+���� +�(��!�# �������$�����

����� ������� 2��3�����������������4�������.��2!. ��� ������$��3�*��� ����

����"� ���� !�� �����������!����� �� ���!. ����������$��� �����3�

����� ������ #�4�2�� 25!���� #� ���

��������������"�4��1,�� �����,��+����4�����,�� ����0�+ ������(�����������

�������������� � 4���,�1��������6���+��� ���

������������$���4�� ���7���,��+����(��4�� ���7���,�+ ������(����8��

�������������� � 9���4�� ���7�+ ����:��(��� ���������

���5!.�

�"� ��,.���������.��66�!�# �������� �$�

���1��1,�6�� ����7�'������ �(��!�. ������������ ������ ����

�������,�6�� ����7�'������ �(��!�. ���

����(���6����7��'���;<�������. �����1���(���

����������� 2��3�����������������4"�1�.��2!. ��� ������$��3�*��� ����

���� �����������!����� ����!. ����������$��� �����3�

������(�����'����� � 1,�1!7 1,�1!�6� �,��!7 �,��!!�6�,,. ����������" ���� �(���

����(��1����'������ �����,+�1���1,!�7��/,���'���;<. ����(������ ����������

���� ��"� ����2 ���� 2�6�(��16�2�(!2�. ��� ��������(���

���������� #�4�2����25!���� #� ������(�����������

��������������"�4��1,��������� +� ����""����1�

�!"�#$%&$'� ���#''(��) *+$�,!*'�-./010-.../23040- 5� ������5 �����$��� ������/"

Page 86: HTML5 CSS3 by Examples Chapter1

������������������������� � ��������

������������ ���������������� � ��������������������

�������������������� �������� � ������������������������

������������������������������ � ��������������

������������������������������������ ��� ��������!� �

��������������������������������������� ����������

����� ������������������������������ ��� ����������"��

����� �������������������������� �������������

����#$%

��#�����&�

#����������

#$%�

'������(�'����(�'����(�

������������ ��������� �������������������������� ���� !"#$���%&#$�� !%�'!( #��)

Page 87: HTML5 CSS3 by Examples Chapter1

� �������������� �����������

��� ���� ��� �� ���� �� ������� ������� �� �� ���

���������� �������� �������������������������

������ ��� ������ ���� ������ �� ����� ���� �� ��

����� !��� ���� �� ������ ��� ������� �����������

����� ��� �� �������"� ��� ��� ��#����� �!� ���

������������������������ �����������

�������

�����

�� �� �������� ����������� ��������� �������������������� ����

�!� �� ���

�����"���

�� ��� �����������#���$������%�&'(��� �()* !!�

�� ����+���� ��#�������+�'(�()* !!�

�� ����,-���* !!���������� ����

.�������� �')�/ !!�0�0�� ��

�����+#�����1 ��')* !!�

����,+���� ��#�������2�3 ��#� ��')* !!���4����������,�

����,����� ��#�������2�3 ��#� ��')* !!���4����������

�����+���� ��#�������2�3 ��#� ��')* !!���4������������

���������� ��#�������2�3 ��#� ��')* !!���4����������

���+������ ��#�����2�3 ��#� ��')* !!�� ���"����

���������� ��#�������2�3 ��#� ��')* !!��

���+,����� ��#�����!���* !!���0�"����

����,����� ��#�������!���* !!��

�����+#���5'�+,�6��,�)�* !!��� ������"����

�����+#��4��������5'��,+6�,�6���+6���6�+6��)* !!���4����������

�����+#����1 ��')* !!�.�����"

�����+#����7������3 ��#� ��')�2���* !!�

�����+#�����8�������(���'(�9�3 ��#� ��')2:;���9�(6�-�<6�-�<)(* !!�

�����+#�� �������(�����(* !!�

�����+#�� �%������3 ��#� ��')2-��* !!�

�����+#�����')* !!�

�����+#�����=���'�,+6�,�6,6,)* !!�"���������"����,�

�����+#�����=���'��+6���6�6�)* !!�"���������"������

�>�

� �')*�

���&����� �'� �6��)* !!�������

$%&����'(�)������))*�+� ,-�%.&,)�/012�2/000134252/ 6�������"�6����"������ �����10

Page 88: HTML5 CSS3 by Examples Chapter1

!!��.�� ���������� +�����.�,���� "���

���&����� �'.������')/���+#��� �=���'�6�6�� ��#����6�� ��#������)>6,�2�)*�

�!����"���

�!����

�!������

$%&����'(�)������))*�+� ,-�%.&,)�/012�2/000134252/ 6�������"�6����"������ �����11