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

Dynamic HTML #7: CSS - Part II

الكلية كلية تكنولوجيا المعلومات     القسم قسم شبكات المعلومات     المرحلة 2
أستاذ المادة حيدر محمد حبيب الخميس       19/11/2012 12:17:09
CSS Backgrounds
CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Use Color and Background Properties
As you might imagine from the name, color and background properties enable you to control the display of background images and colors. These properties work much the same way as the bgcolor and background attributes but give you many more options to work with. The color and background properties are as follows:

• Background-color With HTML you were able to set the background color only for an entire page or individual table cells. The CSS background-color property enables you to set a background color for any element.
• Background-image With this property you can set a background image for any element; not just for a page.
• Background-repeat This property allows you a much greater range of choices in how a background image repeats on your page. You can choose to have the image repeat (tile) through the entire page, repeat horizontally or vertically, or not at all. The values are repeat, repeat-x (horizontal), repeat-y (vertical), and no-repeat.
• Background-attachment To create a watermark effect with a fixed background image that allows content to scroll, you can use the background-attachment property. Your options are scroll or fixed.
• Background-position With the background-position property you can specify where an image occurs in an element. You can describe the position in terms of top/center/bottom and left/center/right. In other words, you can specify an image to show up in the top right, center center, bottom left, and so on.

CSS Text
The text properties enable you to arrange your page with far greater precision than you ever could with HTML. For example, you can specify details such as the following:
• Text Color
• Text Alignment
• Text Decoration
• Text Transformation
• Text Indentation

Text Color
The color property is used to set the color of the text. The color can be specified by:
• name - a color name, like "red"
• RGB - an RGB value, like "rgb(255,0,0)"
• Hex - a hex value, like "#ff0000"
The default color for a page is defined in the body selector.

Note: For W3C compliant CSS: If you define the color property, you must also define the background-color property.

Text Alignment
The text-align property is used to set the horizontal alignment of a text. It can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

Text Decoration
The text-decoration property is used to set or remove decorations from text. This is mostly used to remove underlines from links for design purposes:

It can also be used to decorate text:

Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.
Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.

CSS Fonts:
CSS font properties define the font family, boldness, size, and the style of a text.

Use Font Properties for Controlling Font Display
Font properties enable you to apply styles to the fonts on your page. With these properties you can specify different fonts: their sizes, styles, weights, and so on.

CSS Font Families
In CSS, there are two types of font family names:
• generic family - a group of font families with a similar look (like "Serif" or "Monospace")
• font family - a specific font family (like "Times New Roman" or "Arial")

Font Family
The font family of a text is set with the font-family property. Its property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. So, start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman".

• Font-family Allows you to specify the font you want to display. Although you can choose any font you’d like, remember that if the font is not on your visitor’s system, the browser will substitute a default font. Generic values for font-family are serif, sans-serif, monospaced, cursive, and fantasy.
• Font-style Basically toggles between normal and italic fonts. A third possible value is oblique, but this generally displays as italic.
• Font-variant Enables you to display a font as small caps. The possible values to choose from are, as you would expect, normal and small caps.
• Font-weight Offers a greater range of choices than HTML’s bold, , element. You can specify values by descriptive terms such as normal, bold, lighter, and bolder, or with a numerical value of 100 through 900 (in increments of 100).
• Font-size This property enables you to specify font sizes with nine different measurements: inches (in), millimeters (mm), centimeters (cm), points (pt), picas (pc), pixels (px), ems (em), exs (ex), and percentages (#%).
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like

-

for headings and

for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
• Absolute size is useful when the physical size of the output is known
Relative size:
• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

Set Font Size With Pixels
Setting the text size with pixels, gives you full control over the text size:

The example above allows Firefox, Chrome, and Safari to resize the text, but not Internet Explorer.

Set Font Size With Em
To avoid the resizing problem with Internet Explorer, many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em

In the example above, the text size in em is the same as the previous example in pixels. However, with the em size, it is possible to adjust the text size in all browsers.
Unfortunately, there is still a problem with IE. When resizing the text, it becomes larger than it should when made larger, and smaller than it should when made smaller.

Use a Combination of Percent and Em
The solution that works in all browsers, is to set a default font-size in percent for the body element:
Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text!
• Color Enables you to choose colors for your fonts by using color names, or their hexadecimal or RGB values.


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