انت هنا الان : شبكة جامعة بابل > موقع الكلية > نظام التعليم الالكتروني > مشاهدة المحاضرة

Dynamic HTML #9: CSS - Part III

Share |
الكلية كلية تكنولوجيا المعلومات     القسم قسم شبكات المعلومات     المرحلة 2
أستاذ المادة حيدر محمد حبيب الخميس       26/11/2012 17:04:04
CSS Links:
Links can be styled in different ways.

Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
Special for links are that they can be styled differently depending on what state they are in.
The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouse over it
• a:active - a link the moment it is clicked

When setting the style for several link states, there are some order rules:
• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover

Common Link Styles
In the example above the link changes color depending on what state it is in. Let’s go through some of the other common ways to style links:

Text Decoration
The text-decoration property is mostly used to remove underlines from links:

Background Color
The background-color property specifies the background color for links:

CSS Tables

The look of an HTML table can be greatly improved with CSS. As long as the tables have tags elements, so we can apply the properties to the tables.

Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th, and td elements:

Notice that the table in the example above has double borders. This is because both the table, th, and td elements have separate borders.
To display a single border for the table, use the border-collapse property.

Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or separated:

Table Width and Height
Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the th elements to 50px:
Table Text Alignment
The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:

The vertical-align property sets the vertical alignment, like top, bottom, or middle:

Table Padding
To control the space between the border and content in a table, use the padding property on td and th elements:

You can specify the fourth sides of the border by assign four values to padding property (top, right, bottom, left)

Or you can use other properties as shown in the following example:

Table Color
The example below specifies the color of the borders, and the text and background color of th elements:


المادة المعروضة اعلاه هي مدخل الى المحاضرة المرفوعة بواسطة استاذ(ة) المادة . وقد تبدو لك غير متكاملة . حيث يضع استاذ المادة في بعض الاحيان فقط الجزء الاول من المحاضرة من اجل الاطلاع على ما ستقوم بتحميله لاحقا . في نظام التعليم الالكتروني نوفر هذه الخدمة لكي نبقيك على اطلاع حول محتوى الملف الذي ستقوم بتحميله .
download lecture file topic