ist 561 session 3, feb 9, 2009--xhmtl and css basics

Post on 03-Sep-2014

1.249 Views

Category:

Technology

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

The presentation from the Feb 9, 2009 class which covered basics for using CSS (cascading style sheets) with XHTML pages.

TRANSCRIPT

1

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

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

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

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

� +��,"''���-��.� �/���-�'��"����&����'���/�����&��*���"���*�"������/��+��

� �-����(����&���"�(�����"�(����'���/����

� ��'������+�����(��

� �����"�(����'���/������/������&"(������**�����'��������0���������"��

� ���'�"�(�"�'"������'��

� ��"�(��*��������0�����'����'���/����

� �����"�(�����'�������"���'������

� -�'"��"�(���

2

2

3

CSS AdvantagesCSS Advantages

� %�����������(���/�������(��'������������'

� ���'��"�����������&��*����������

� ���'����������������"����������������*�������'"� �����&��*��/��,�����(�

� 1�����"�''���*�''������*����

� 2��"����"���*�"��������

4

3

��'"������'����'"������'��

� ��&"(����"���/�������&��/��+�����(��

�3����/�����'������"������&������������(

�#��'����'������/������"&"���'�*���

5

2*�������'��2*�������'��

� ��&"(����"���/��/���������"����&���+�����(�$�

�3����/��������4���'�5��'�*���

�#��'������/�����"���+�����(�����*���

4

20�����'����'��20�����'����'��

� ��&"(����"���������������0��&"'��,"�/�$����&"'���0����"��

� �/��������4'"� �65��'�*����"���/��/���������"����&���+�����(�������"�����"��,"�/��/��$����&"'�

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

� �"*"'������20�����'����'��

8

5

9

��������0���������0���*�'���*�'�

��&"(������+�����(�����"��'����'�����0�������''�,���� (����$

body { color: blue;background-color: yellow; }

�/"�����'��'������,�"�������"�(�/�0���"*�'���'���-�'��������/�,����'�,$

body { color: #0000FF;background-color: #FFFF00; }

10

6

11

12

7

13

14

8

9

��&"(��"�(��'���,"�/���&"(��"�(��'���,"�/���'"�������'"�����

� �/�����'��#���"����

� 7�'��.��������*�������'����'����"���������������-�'�����"��

20�*�'�.����&"(���������'�����0��"�����4/�5��'�*���.<h1 style="color:#ff0000">Heading text is red</h1>

20�*�'���.����&"(�����/�������0��"���/��/��"�(����������&"(������(������� (�����"���/��/��"�(

������������'����'����'����"����,"�/�8

<h1 style="color:#FF0000;background-color:#cccccc">This is displayed as a red heading with gray background</h1>

17

18

<style type ="text/css">body { background-color: #000000;

color: #FFFFFF;}</style>

10

���2*�������'�����2*�������'��

<style type="text/css">body { background-color: #E6E6FA;

color: #191970;}h1 { background-color: #191970;

color: #E6E6FA;}h2 { background-color: #AEAED4;

color: #191970;}</style>

•�/��������'������������/��('���'����'����'���&����/�����"�����(�$

•�/����('���'���'��������-���"���&���4/�5����4/�5��'�*���������/��/�����/�����'����'��$

9�-"�,9�-"�,

�$ �������'"����/���������������������������+�����(�:

�$�+/�����"(�"�(�����(���/����������'������/����/����/���&��'����'����&�����0�������� (�������,/��"��"����(����������������&"(�������'����'���&������/���0����'��������� (�������'��:

;$������������"��������-����(�������"�(��*�������'���"�������&�"�'"������'��:

11

��&"(��"�(���0��,"�/�����&"(��"�(���0��,"�/���

� ����������"���&������&"(��"�(���0�.

� &���<,�"(/�

� ��&"(������/����'������&���0�

� &���<���'�

� ��&"(�������0��������"��'"�����'�

� &���<�"=�

� ��&"(������/���"=���&��/����0�

� &���<&�*"'�

� ��&"(������/��&��������&�����&��/����0�

12

p {font-family: Arial,Verdana, sans-serif;}

2*�������'���2*�������'���20�*�'�20�*�'�

<style type="text/css">body { background-color: #E6E6FA;

color: #191970;font-family: Arial, Verdana, sans-serif; }

h1 { background-color: #191970; color: #E6E6FA;line-height: 200%;font-family: Georgia, "Times New Roman", serif; }

h2 { background-color: #AEAED4;color: #191970;font-family: Georgia, "Times New Roman", serif; }

p {font-size: .90em; }ul {font-weight: bold; }</style>

13

26

<style type="text/css">.new { color: #FF0000;

font-style: italic;}

</style>

<p class=“new”>This is text is red and in italics</p>

14

<p id=“new”>This is text is red, large, and in italics</p>

27

<style type="text/css">#new { color: #FF0000;

font-size:2em; font-style: italic;

}</style>

28

15

������4������4"-5�2'�*����20�*�'�"-5�2'�*����20�*�'�

� ��&"(��������(��&����������

� 2*������.

<style type="text/css">.footer { font-size: small;

text-align: center; }</style>

� XHTML:<div class=“footer">Copyright &copy; 2009</div>

29

30

16

������4������4����5�2'�*����20�*�'������5�2'�*����20�*�'��

� 2*������.

<style type="text/css">.companyname { font-weight: bold;font-family: Georgia, "Times New Roman", serif;font-size: 1.25em;}</style>

� �����.<p>Your needs are important to us at <span

class=“companyname">Acme Web Design</span>.We will work with you to build your Web site.</p>

31

body {background-color:#E6E6FA;color:#000000;font-family:Arial, sans-serif;font-size:90%; }

h2 { color: #003366; }.nav { font-size: 16px;

font-weight: bold; }

body {background-color:#E6E6FA;color:#000000;font-family:Arial, sans-serif;font-size:90%; }

h2 { color: #003366; }.nav { font-size: 16px;

font-weight: bold; }

20�����'����'���/����20�����'����'���/����

� Multiple web pages can associate with the same external style sheet file.

32

site.cssindex.htm

clients.htm

about.htm

etc…

17

33

<link rel="stylesheet" href="color.css" type="text/css" />

3�"�(�3�"�(���20�����'��20�����'���'���/������'���/���

To link to the external style sheet called color.css, the XHTML code placed in the header section is:

<link rel="stylesheet" href="color.css" type="text/css" />

body { background-color: #0000FF;color: #FFFFFF;

}

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

18

9�-"�,9�-"�,

1. Can you provide a reason to use embedded styles? Where are embedded styles placed on a web page?

2. Can you describe a reason to use external styles? Where are external styles laced and how do web pages indicate they are using external styles?

3. Can you write the code to configure a web page to use an external style sheet called “mystyles.css”?

35

�����"�(�1�(�������"�(�1�(���������,"�/��������,"�/�����

#container { margin-left: auto;margin-right: auto;width:80%; }

19

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

�/���.66>"(��,$,;$��(6���<-�'"����6

%�"�'"�������(���"�(��������,"�/����%�"�'"�������(���"�(��������,"�/����

� 9�-"�,��/����"(���&��/����(�

� ��&"(����('���'�&���������'����������"���&����/��������'�����

� ����"&�����"��'��'�*�����?���/����4/�5��4/;5����������@������'�������'����'���&����/����"&�����$

� ����"&����(�����������/����'�(�����-"(��"����&����������������A���&"(��������������"�����'�������"�&������/$�

� ����������������������(���/��������"���*�����&��/���'�*����������'�����������������$

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

� )�����������"(��"������A *�-�����'����������0�����'�$���&"'�

� 1'���"�(��������"�(������"*�����������"-"�"���,/�����"(�"�(���+����"��

20

��������'��/���"�(��"����������'��/���"�(��"��� 7��"&������������"�(��/��.����8���*��'��"���/���"(/���������/������������������&���$

� /�� ��/�����������������"�(�B��"(���"�������&�.����,�������/�������������"���-�'��$

� 7��"&���/����/��C����D���*��'������������'���'���

� /�� ��/�������0��&��������'���������/�"���������"����������������-�'����&��������������(�$

� �&�������&���������,�� ���������������E�.� 9�-"�,��������

� !����*"����/��&"������'���/���"���������'"�$�)&�����/��������"��"���/����'�����-���/����'���/���"���������'"�$

� 7�'"���������������/���.66>"(��,$,;$��(6���<-�'"����

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

� "�������"����������"�(����'���/����9�'��������"����,"�/���'��������0�����,�����(���

� �-����"�'"������'�����*�������'��������0�����'����'��$

� �-����������'�����������������'��������"���'������$

� ��������"������7�'"��"���-"��/���.66>"(��,$,;$��(6���<-�'"����

40

21

top related