C ASCADING S TYLE S HEETS ™ (CSS) الأنماط المتتالية صفائح ™ (CSS)

CASCADING STYLE SHEETS™ (CSS)( ™ صفائح المتتالية (CSSاألنماط

CSS DECLARATION

The selector is normally the HTML element you want to style.Each declaration consists of a property and a value.The property is the style attribute you want to change. Each property has a value.

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:

p {color:red;text-align:center;}

إعالنCSS يكون محدد ما . HTMLعنصر عادة أسلوب تريد إعالن كل وقيمة. الملكيةويتكون . . قيمة له عقار كل تغييره تريد الذي النمط السمة هي الممتلكات

إعالنCSS مع دائما مجموعة فاصلةينتهي وحاصرت منقوطة،األقواس:إعالن

} : : مركز؛ } النصوص مواءمة األحمر؛ اللون ص

الرسمه : ترجمهselectorمنتقى :

:Propertyممتلكات :valueالقيمه

:Declarationبيان

CSS COMMENTS

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.

A CSS comment begins with "/*", and ends with "*/", like this:

/*This is a comment*/p{text-align:center;/*This is another comment*/color:black;font-family:arial;}

CSS تعليقات

بك، • الخاصة البرمجية التعليمات لشرح التعليقات استخدام يتموقت في المصدر البرمجية التعليمات تحرير عند تساعدك أن ويمكن

. المتصفحات. من التعليقات تجاهل يتم الحق: CSSتعليق • هذه "/ *" "* /" مثل ، مع وينتهي ، ب يبدأ

/ * * /التعليق هو هذا ص

{ :- المركز؛ النص محاذاة

آخر/ * * / تعليق هذاأسود؛: اللون

ارييل؛-: fontاألسرة }

THREE WAYS TO INSERT CSSإلدراج طرق CSS ثالث

There are three ways of inserting a style sheet:

External style sheetInternal style sheetInline style

: أنماط ورقة إلدراج طرق ثالث هناك خارجية نمط ورقة الداخلية نمط ورقة المضمن النمط

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

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

خارجية نمط ورقة

على • النمط تطبيق يتم عندما مثالية خارجية نمط ورقةمن يمكنك الصفحات.العديد خارجية، نمط ورقة مع

ملف تغيير طريق عن بأكمله ويب موقع شكل تغييراألنماط. ورقة يرتبط أن يجب صفحة كل واحد

. > العالمة > صلة < باستخدام يذهب> العالمة صلة و الرأس: القسم داخل

•> رئيس>" االرتباط> / " = " المغلق = " النص نوع األنماط يختلط </ "href = "mystyle.cssأ

</ head>

link element Uses rel attribute to specify a relationship

between two documents rel attribute declares the linked document to be

a stylesheet for the document type attribute specifies the type of the

related document

href attribute provides the URL for the document containing the style sheet

صلة عنصر•وثيقتين السمة يختلطيستخدم • بين العالقة لتحديدورقة يختلطسمة • لتكون المرتبط المستند تعلن

للمستند أنماطالصلة السمة نوعتحدد • ذات الوثيقة نوعيحتوي URLعنوان href الخاصيةتوفر • الذي للمستند

نمط ورقة على

An external style sheet can be written in any text editor.

The file should not contain any html tags. Your style sheet should be saved with a .css

extension. An example of a style sheet file is shown below: hr {color:sienna;}

p {margin-left:20px;}body {background-image:url("images/back40.gif");}

Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "margin-left:20px") will work in IE, but not in Firefox or Opera.

في • خارجية نمط ورقة كتابة . أييمكن نصوص محررعالمات • أية على الملف يحتوي ال أن . HTMLيجبمع • أسلوبك ورقة حفظ .يجب المغلق التمديد• : أدناه أنماط ورقة ملف على مثال يظهر•} : سيينا؛ } لون ساعة

: اليسار } هامش ؛{20pxصصورة } صور )" / -:backgroundهيئة رابطback40.gif} ؛"(

• " ! هامش والوحدات العقار قيمة بين فراغات تترك ال: 20اليسار: " ( " اليسار هامش من بدال "( 20pxبيكسل

في . IEستعمل أوبرا أو فايرفوكس في ليس ولكن ،

INTERNAL STYLE SHEETالداخلية نمط ورقة

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

تستخدم • أن يجب الداخلية نمط من ورقة فريد وأسلوب واحدة وثيقة يكون عندماالداخلية نوعه. األنماط تحديد باستخدام HTMLصفحة رأسقسم فييمكنك ،

> العالمة،> : نمط هذا مثل

<head><style type="text/css">hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>

INLINE STYLES

Inline Styles An inline style loses many of the advantages

of style sheets by mixing content with presentation. Use this method sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

مضمنة أنماط

مضمنة نماطاألنماط • لألوراق المزايا من العديد يفقد مضمن طريق عننمط

. خلط العرض مع األسلوب المحتوى هذا لماما!استخداماستخدام • المضمنة أساليب في الستخدام النمط عالمة السمة

. الصلة نمط ذات سمة تحتوي أن يظهر .CSSممتلكات أييمكن: الفقرة من األيسر والهامش لون تغيير كيفية المثال

• : : اليسار. > = " هامش سيينا؛ اللون النمط هو"< 20pxع هذا>/pالفقرة >

1 <?xml version = "1.0" encoding = "utf-8"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4

5 

6 

7 <html xmlns = "http://www.w3.org/1999/xhtml">

8 <head>

9 <title>Inline Styles</title>

10 </head>

11 <body>

12 <p>This text does not have any style applied to it.</p>

13

14 

15 

16 

17 <p style = "font-size: 20pt">This text has the

18 <em>font-size</em> style applied to it, making it 20pt.

19 </p>

20

21 <p style = "font-size: 20pt; color: #6666ff">

22 This text has the <em>font-size</em> and

23 <em>color</em> styles applied to it, making it

24 20pt. and light blue.</p>

25 </body>

26 </html>

FIG. 5.1 | USING INLINE STYLESباستخدام | 5.1 تين. مضمنة األنماط

CASCADING ORDER

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

1. Browser default2. External style sheet3. Internal style sheet (in the head section)4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

المتتالية ترتيب

واحد نمط من أكثر هناك يكون عندما تستخدم سوف النمط هو مالعنصر ؟HTMLمحدد

القول • يمكن عامة " جميع أنوبصفة تعاقب " وسوف األساليب " التالية، " للقواعد وفقا غرار على جديدة صفحة افتراضية إلى

أربعة رقم : حيث قصوى أولوية لديهاالفتراضي 1. المتصفحخارجية 2. نمط ورقة.3 ) الرأس ) قسم في الداخلي نمط ورقةعنصر ) 4. داخل المضمن ( HTMLالنمط

عنصر ) وهو لذلك،• داخل المضمن له( HTMLالنمطمحددة األولوية أسلوب ستتجاوز أنها يعني الذي األمر العليا،

متصفح< headداخل > في أو خارجية، نمط ورقة في أو العالمة، .) افتراضية) قيمة

Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

نمط مالحظة: ورقة إلى وصلة وضعت إذافي بعد خارجية الداخلية األنماط ورقة HTML

<head>، األنماط فإن ورقة تتجاوز خارجية نمط ورقة!الداخلية

EXAMPLE MULTIPLE STYLE SHEETS

An external style sheet has these properties for the h3 selector: h3

{color:red;text-align:left;font-size:8pt;}

And an internal style sheet has these properties for the h3 selector: h3

{text-align:right;font-size:20pt;}

If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:

color:red;text-align:right;font-size:20pt;

ستايل متعددة أوراق المثال

لمحدد ورقة الخصائص هذه لديها خارجية H3: H3نمط{

األحمر؛: اللوناليسار؛: النص- محاذاة

FONT-SIZE: 8pt؛ لمحدد الداخليةنمط ورقة { الخصائص هذه H3: H3لديها{

الحق؛: النص- محاذاةFONT-SIZE: 20pt؛

إلى { أيضا يربط الداخلية األنماط ورقة مع الصفحة كانت إذاخصائص خارجية نمط : H3ورقة األحمر؛: سيكون اللون

الحق؛: النص- محاذاةFONT-SIZE: 20pt؛

The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.

محاذاة والنص خارجية نمط ورقة من اللون ورثتاألنماط ورقة طريق عن الخط حجم استبدال ويتم

الداخلية.

CSS BACKGROUND

CSS الخلفية

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

الخلفية خصائص استخدام خلفية CSSيتم اآلثار لتحديد:CSSخصائص عنصر. الخلفية لتأثيرات المستخدمة

الخلفية • لونالخلفية • الصورةتكرار • الخلفيةالتعلق • خلفيةموقف • خلفية

BACKGROUND COLOR

The background-color property specifies the background color of an element.

The background color of a page is defined in the body selector:

Example

body {background-color:#b0c4de;}

With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“ Example h1 {background-color:#6495ed;}

p {background-color:#e0ffff;}

الخلفية لون

.background-colorوخاصية • عنصر خلفية لون تحددصفحة • الخلفية لون : ويعرف الجسم محدد في مثال•

# : الخلفية } لون ؛{B0C4DEهيئة:CSSمع • طريق عن اللون تحديد ما وغالبا ، “FF0000مثل - "# HEXقيمة •rgb(255,0,0)مثل - " “RGBقيمة ••" األحمر - " مثل اللون اسم مثال••}H1 # : الخلفية ؛}6495edلون

# : الخلفية } لون ؛}e0ffffص

BACKGROUND IMAGEالخلفية الصورة

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

Example body {background-image:url('paper.gif');}

•. للعنصر كخلفية الستخدامها صورة صورة خلفية الخاصية تحدد.افتراضيا،• بالكامل العنصر تغطي أنها بحيث الصورة تكرار يتم مثال•صورة } • }paper.gifرابط-: )'backgroundهيئة ؛'(

BACKGROUND IMAGE - REPEAT HORIZONTALLY OR VERTICALLY By default, the background-image property repeats an image both

horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange,

If the image is repeated only horizontally (repeat-x), the background will look better:

Example

body{background-image:url('gradient2.png');background-repeat:repeat-x;}

عموديا - أو أفقيا كرر الخلفية صورة

• . وعموديا أفقيا صورة تتكرر الصورة خلفية الخاصية افتراضيا،ستبدو • أنها أو فقط، عموديا أو أفقيا الصور بعض تكرار وينبغي

غريبة،

• ) - تبدو ) سوف الخلفية ، خ اكرر فقط أفقيا الصورة تكرار تم إذاأفضل:

مثال• الجسم

{'( : رابط الصورة ؛'( gradient2.pngخلفية

- : تكرار تكرار ؛ Xالخلفية }

BACKGROUND IMAGE - SET POSITION AND NO-REPEAT

When using a background image, use an image that does not disturb the text.

Showing the image only once is specified by the background-repeat property:

Example body

{background-image:url('img_tree.png');background-repeat:no-repeat;}

In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.

The position of the image is specified by the background-position property:

تكرار - وعدم الموقف ضبط الخلفية صورة

تخل ال التي الصورة استخدم خلفية، صورة استخدام عندالنص.

الملكية قبل من تعيينه تم فقط واحدة مرة الصورة عرض: تكرار الخلفية

مثال الجسم

{؛'( img_tree.pngرابط-: )‘backgroundصورة . repeatال-: -backgroundتكرار

} نفس في الخلفية صورة عرض يتم أعاله، المثال في

. ال بحيث الصورة، موضع لتغيير نريد نحن النص في المكان. كثيرا النص تخل

: موقف خلفية الخاصية بواسطة الصورة موضع تحديد يتم

Example body

{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top;}

مثال الجسم

{؛'( img_tree.pngرابط-: )‘backgroundصورة . repeatال-: -backgroundتكرار

. backgroundموقف اليمنى-: أعلى }

CSS BACKGROUND-ATTACHMENT PROPERTYCSS الملكية مرفق خلفية

CSS background-attachment may be fixed or scroll body

{ background-image:url('smiley.gif');background-repeat:no-repeat;background-attachment:fixed;}

CSS التمرير أو ثابتة تكون قد التعلق خلفية الجسم

{؛'( smiley.gifرابط-: )‘backgroundصورة . repeatال-: -backgroundتكرار الثابتة؛-: backgroundمرفق

}

BACKGROUND - SHORTHAND PROPERTY

As you can see from the examples before, there are many properties to consider when dealing with backgrounds.

To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.

The shorthand property for background is simply "background":

Example body {background:#ffffff url('img_tree.png')

no-repeat right top;}

إختزال - خاصية الخلفية

الخصائص من العديد وهناك قبل، األمثلة من ترون وكما. الخلفيات مع التعامل عند مراعاتها يجب التي

الخصائص كافة لتحديد أيضا الممكن فمن رمز، لتقصير. . االختزال خاصية يسمى ما وهذا واحدة واحدة خاصية في

:" الخلفية " ببساطة هي اللخلفية االختزال خاصيةمثال # : خلفية } عدم'( img_tree.pngرابط )'FFFFFFهيئة

} اليمين؛ أعلى تكرار

When using the shorthand property the order of the property values are:

background-color background-image background-repeat background-attachment background-position

It does not matter if one of the property values is missing, as long as the ones that are present are in this order.

هي الخصائص قيم ترتيب االختزال خاصية استخدام :عندالخلفية • لونالخلفية • الصورةتكرار • الخلفيةالتعلق • خلفيةموقف • خلفية

تلك دامت ما مفقود، الخاصية قيم من واحد كان إذا يهم الموجودة تكون النظامهذا فيالتي .

THE ID AND CLASS SELECTORS

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

The id Selector The id selector is used to specify a style for a

single, unique element. The id selector uses the id attribute of the

HTML element, and is defined with a "#".

والطبقة الهوية محددات للعنصر نمط وضع إلى HTMLباإلضافة ، CSS لك تسمح

." " " الطبقة " و الهوية يسمى بك الخاصة محددات بتحديد الهوية ومحدد. فريد واحد عنصر ل، أسلوب لتحديد هوية محدد يستخدم عنصر معرف سمة الهوية محدد ويعرف HTMLيستخدم ،

ب "#".

Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

Example: CSS Code: p#exampleID1 { background-color: white; }

p#exampleID2 { text-transform: uppercase; }

HTML Code: <p id="ExampleID1">This paragraph has an ID name of

"exampleID1" and has a white CSS defined background</p> <p id="ExampleID2">This paragraph has an ID name of

"exampleID2" and has had its text transformed to uppercase letters. </p>

.

تبدأ • !مع IDاسم ال موزيال / عدد في تعمل لن انها فايرفوكس.

•: المثال سبيل على :CSSكود •: exampleID1ص # { • أبيض؛ الخلفية { لون: exampleID2ص # {• األحرف تحويل النص

{ الكبيرة. :HTMLكود •

•P " < " = >معرفExampleID1 لديه الفقرة هذه

معرف “” محددة exampleID1اسم خلفية ولهاCSS < األبيضP</

•P”“ = >معرفExampleID2 اسم لديه الفقرة هذه

معرف ”“exampleID2. كبيرة“ أحرف إلى تتحول نصه وكان ،

<P/ <

Notice that an ID's CSS is an HTML element, followed by a "#", and finally ID's name. The end result looks something like "element#idname“

أن عنصر CSSالحظ هو وأخيرا "#" HTMLمعرف ، تليها ، # " . عنصر مثل شيئا تبدو النهائية النتيجة اسم البائع إسم

idname“

THE CLASS SELECTOR

The class Selector The class selector is used to specify a style for a

group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

In the example below, all HTML elements with class="center" will be center-aligned:

Example .center {text-align:center;}

الدرجة محدد

الدرجة • محددنمط • لتحديد فئة محدد استخدام على العناصر.من لمجموعةيتم

عدة على فئة محدد استخدام يتم ما وغالبا الهوية، محدد عكس عناصر.

عناصر • من للعديد معين نمط لتحديد لك يسمح مع HTMLهذا. الفئة نفس

الفئة • سمة الدرجة محدد ب "."HTMLيستخدم ويعرف ، عناصر • جميع التالي، المثال " HTMLفي مركز = " الطبقة مع

: الوسط إلى محاذاة سيكون مثال••}.center- { النص مركز؛: محاذاة

You can also specify that only specific HTML elements should be affected by a class.

In the example below, all p elements with class="center" will be center-aligned:

Example p.center {text-align:center;} Do NOT start a class name with a number!

This is only supported in Internet Explorer.

عناصر أن تحديد أيضا أن HTMLيمكنك يجب فقط محددة . فئة تتأثر

" مركز = " الطبقة مع ص العناصر كل التالي، المثال في: الوسط إلى محاذاة سيكون

مثال}p.center } : - مركز؛ محاذاة مع الالنص فئة اسم تبدأ

في عدد! فقط هذا .Internet Explorerويدعم

EXAMPLE CSS Code: p.first{ color: blue; } p.second{ color: red; } HTML Code: <html> <body> <p>This is a normal paragraph.</p>

<p class="first">This is a paragraph that uses the p.first CSS code!</p>

<p class="second">This is a paragraph that uses the p.second CSS code!</p> ...

Display: This is a normal paragraph. This is a paragraph that uses the p.first CSS code! This is a paragraph that uses the p.second CSS code!

مثال :CSSكود ••}p.first : األزرق؛ { اللون•}p.second : األحمر؛ { اللون :HTMLكود ••<HTML> •<body> •<p< . عادي< فقرة هو > /pوهذا

P >" رمز< = " يستخدم فقرة هو هذا أوال الطبقةp.first CSS! </ P>

•P >" رمز < = " يستخدم فقرة هو هذا الثاني الطبقةp.second CSS! </ P... >

عرض:••. العادية فقرة هذهرمز • يستخدم فقرة !p.first CSSهذهرمز • يستخدم فقرة !p.second CSSهذه

CSS TEXT

Text Color The color property is used to set the color of the text. With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“ The default color for a page is defined in the body

selector. Example body {color:blue;}

h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}

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

CSS النص

الخط . لون النص لون لتعيين اللون خاصية استخدام يتم معCSS : طريق عن اللون تحديد ما وغالبا ، قيمةHEX“ #" - مثلFF0000 قيمةRGB" - مثلrgb(255,0,0)"” األحمر - " مثل اللون اسم. الجسم محدد في للصفحة االفتراضي اللون تعريف يتم

مثال••} : األزرق؛ } اللون هيئة•}H1 # :00لونff00{؛

}H2: ;rgb(255,0,0)اللون مع CSSل• اللون، :W3Cمتوافق خاصية بتعريف قمت إذا

خاصية تحديد أيضا عليك background-colorيجب

Text Alignment The text-align property is used to set the

horizontal alignment of a text. Text 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).

Example h1 {text-align:center;}

p.date {text-align:right;}p.main {text-align:justify;}

النص محاذاة األفقية المحاذاة لضبط النص محاذاة خاصية استخدام يتم

للنص. محاذاة أنويمكن أو النص، أو اليسار إلىتتركز اليمين، أو

تبريره. النص محاذاة تعيين يتم " عندما ويمتد " ، تبرير كل الى

المساواة، قدم على العرض يحتوي سطر كل بحيث سطرواليسرى اليمنى والهوامش

.) والصحف ) المجالت في الحال هو كما التوالي على مثال}H1 } : مركز؛- محاذاة النص

}p.date } : - الحق؛ محاذاة النص}p.main } :- تبرير؛ النص محاذاة

Text Decoration The text-decoration property is used to set or remove decorations

from text. The text-decoration property is mostly used to remove underlines

from links for design purposes: Example a {text-decoration:none;}

It can also be used to decorate text: Example h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}h3 {text-decoration:underline;}h4 {text-decoration:blink;}

النص • الديكور

األوسمة • إزالة أو لتعيين الديكور النص خاصية استخدام يتم

. النص منمعظمها • الديكور النص خاصية استخدام تسطير يتم إلزالة

الروابط : من تصميم ألغراض مثال••} :- شيء؛} ال النص الديكور و

•: النص لتزيين تستخدم أن أيضا ويمكن مثال••H1 :- النص { ؛} OVERLINEالديكور

H2- {through- الديكور: النص { الخط؛

H3} :- التأكيد؛ { النص الديكور

H4} :- وميض؛ { النص الديكور

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. Example p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}

Text Indentation The text-indentation property is used to specify the

indentation of the first line of a text. Example p {text-indent:50px;}

النص • تحويلاألحرف • تحديد إلى النص تحويل خاصية استخدام يتم

. النص في والصغيرة الكبيرةاألحرف • إلى شيء كل لتحويل استخدامه ويمكن

كل من األول الحرف تكبير أو الصغيرة، أو الكبيرة كلمة.

مثال••p.uppercase - { النص{ الكبيرة؛: األحرف تحويل

p.lowercase - { النص{ صغيرة؛: تحويلp.capitalize - { النص{ االستفادة؛: تحويل

النص البادئة المسافةلتحديد • البادئة المسافة النص خاصية استخدام يتم

. النص من األول السطر في البادئة المسافة مثال•• : البادئة } المسافة النص ؛}50pxص

57

5.8 ELEMENT DIMENSIONSاألبعاد 5.8 العنصر

Dimensions of elements on a page can be set with CSS by using properties height and width Their values can be relative or absolute

مع • تعيين يمكن صفحة على العناصر باستخدام CSSأبعاد والعرض الطولخصائص

المطلق • أو النسبي يكون قيمهم يمكن

58

5.8 ELEMENT DIMENSIONS (CONT.) ) يتبع ) األبعاد العنصر

Problem with setting both vertical and horizontal dimensions of an element Content might sometimes exceed the set boundaries, in

which case the element must be made large enough for all the content to fit

Can set the overflow property to scroll, which adds scroll bars if the text overflows the boundaries set for it

عنصر واألفقي الرأسي البعدين كال وضع مع المشكلة الحالة هذه في مجموعة، حدود األحيان بعض في تتجاوز قد محتوى

لتناسب المحتوى لجميع الكفاية فيه بما كبير عنصر يتم أن يجب إذا التمرير أشرطة يضيف ما وهو للتمرير، تجاوز الخاصية تعيين يمكنك

لها المرسومة الحدود تجاوزات النص كان

HTML <DIV> TAG HTML <DIV> ةةةةةةة ةةةةةةةة

The <div> tag defines a division or a section in an HTML document.

The <div> tag is often used to group block-elements to format them with styles.

وثيقة< divتحدد > في قسم أو تقسيم . HTMLالعالمةيستخدم > ما إلى< divوغالبا العناصر كتلة لمجموعة العالمة

. األنماط مع تنسيقها

EXAMPLEمثال

<html> <body>

<h3>This is a header</h3> <p>This is a paragraph.</p>

<div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p> </div>

</body> </html>

OUTPUTاالنتاج

This is a header This is a paragraph. This is a header This is a paragraph

رأس • هو هذا•. فقرة هذهرأس • هو هذافقرة • هذه

CSS FONTCSS الخط

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“) أسرCSS الخط فيCSS: الخط عائلة أسماء من نوعان هناك ، العامة مماثلة - األسرة نظرة مع الخط األسر من مجموعة

)" " " والشروط) " النصوص معدل أو شريف مثل الخط " عائلة أو - ) " رومان نيو تايمز مثل معين خط عائلة

)" اريال"

FONT FAMILY

The font family of a text is set with the font-family property.

The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.

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".

Example p{font-family:"Times New Roman", Times, serif;}

العائلة خط

أفراد بين الخط الخاصية مع للنص الخط عائلة تعيين تماألسرة.

األسرة أفراد بين الخط أن خاصية أسماء يجب عدة تعقد".الخط تراجع " كنظام

الخط يحاول فإنه األول، الخط يدعم ال المتصفح كان إذاالقادم.

،العامة عائلة مع وتنتهي تريده، الذي الخط مع تبدأإذا عامة، األسرة في مماثل خط اختيار للمتصفح للسماح

. متوفرة أخرى خطوط لم هي :كلمة مالحظة من أكثر هو الخط عائلة اسم كان إذا

في يكون أن يجب اقتباس، واحدة، بين عالمات الخط مثل." " : رومان نيو تايمز األسرة أفراد

مثال " " : تايمز، } ، رومان نيو تايمز األسرة أفراد بين الخط ص

الرقيق؛{

FONT STYLE

The font-style property is mostly used to specify italic text.

This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very

similar to italic, but less supported) Example p.normal {font-style:normal;}

p.italic {font-style:italic;}p.oblique {font-style:oblique;}

الخط نوع

لتحديد • الغالب الخط غرار على الخاصية استخدام . يتم مائل النص•: قيم ثالث لديه الخاصية هذهعادي -• نص عادي ويردمائل- مائل• بخط النص ويرد" ) منحرف• اللمائل،- " جدا مشابهة هي المائل يميل هو النص

) معتمدة أقل ولكن مثال••p.normal } أسلوبfont} عادي؛-:

p.italic }أسلوبfont} مائل؛-: p.oblique }أسلوبfont} منحرف؛-:

FONT SIZE

The font-size property sets the size of the text. 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 <h1> - <h6> for headings and <p> 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

الخط حجم

. النص حجم يحدد الخط حجم خاصية المواقع تصميم في المهم النص حجم إدارة على قادرة تكون أن

اإللكترونية. لجعل الخط حجم تعديالت استخدام عدم يجب ذلك، ومع

. الفقرات تبدو عناوين أو العناوين، تبدو الفقرات عالمات استخدام مثل >HTMLدائما < H1> - <H6المناسبة،

< و . Pللعناوين للفقرات< . النسبي أو المطلق الحجم يكون أن يمكن الخط حجم قيمة : المطلق الحجم المحدد الحجم إلى النص يحدد المتصفحات جميع في النص حجم لتغيير للمستخدم يسمح ال

) الوصول) ألسباب سيئة للناتج الفعلي الحجم يعرف عندما مفيد هو المطلق الحجم

Absolute-length measurements (units that do

not vary in size): in (inches) cm (centimeters) mm (millimeters) pt (points; 1 pt = 1/72 in) pc (picas; 1 pc = 12 pt)

:) الحجم ) في تختلف ال التي الوحدات بطول المطلق قياسات ) بالبوصة ) سم ) سم ) ملم ) مم ( نقطة؛ العمال ( 1/72بط 1حزب في = ( بيكا؛ كمبيوتر = 1كمبيوتر ( 12جهاز نقطة

Relative size: Sets the size relative to surrounding

elements Allows a user to change the text size in

browsers If you do not specify a font size, the default

size for normal text, like paragraphs, is 16px (16px=1em).

: النسبي الحجم المحيطة لعناصر النسبي الحجم يحدد المتصفحات في النص حجم لتغيير للمستخدم يسمح للنص االفتراضي والحجم الخط حجم بتحديد تقم لم إذا

هو الفقرات، مثل px 16 (16px = 1em)العادي،

em (usually the height of a font’s uppercase M) ex (usually the height of a font’s lowercase x) Percentages (of the font’s default size)

الكبيرة) م األحرف الصورة الخط ذروة (Mعادةصغيرة) السابق الصورة الخط ذروة (xعادة ) االفتراضي ) الحجم الصورة الخط المئوية النسب

SET FONT SIZE WITH PIXELS

Setting the text size with pixels, gives you full control over the text size:

Example h1 {font-size:40px;}

h2 {font-size:30px;}p {font-size:14px;}

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

بكسل مع الخط حجم ضبط

حجم • على الكاملة السيطرة تمنحك بكسل، مع النص حجم تحديد النص:

مثال••h1 {font-size:40px;}

h2 {font-size:30px;}p {font-size:14px;}

حجم • لتغيير وسفاري كروم، فايرفوكس، يسمح أعاله المثال فيإنترنت النص، ال إكسبلورر.ولكن

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

إم مع الخط حجم ضبط

،اكسبلورر انترنت مع الحجم تغيير المشكلة هذه لتجنب. بكسل من بدال م استخدام المطورين من العديد

قبل من م حجم وحدة . W3Cويوصى1em. الحالي الخط حجم االفتراضي يساوي النص حجم

هو المستعرضات .16pxفي االفتراضي الحجم فإن ويمكن. 16pxهو 1emلذا،

: الصيغة هذه باستخدام لم بكسل من حجم بكسلحسابم =16 /

Example h1 {font-size:2.5em;} /* 40px/16=2.5em */

h2 {font-size:1.875em;} /* 30px/16=1.875em */p {font-size:0.875em;} /* 14px/16=0.875em */

مثال H1 {حجم font-: 2.5em؛ }/ * 40px / 16 = 2.5em * /

H2{ حجم font-: 1.875em؛} / * 30px / 16 = 1.875em * / p{حجم font-: 0.875em؛} / * 14px / 16 = 0.875em * /

FONT WEIGHT font-weight property specifies the “boldness” of

text. Possible values are: bold normal (the default) bolder (bolder than bold text) lighter (lighter than normal text) Boldness also can be specified with multiples of 100,

from 100 to 900 (e.g., 100, 200, …, 900). Text specified as normal is equivalent to 400, and bold text is equivalent to 700

Set different font weight for three paragraphs: p.normal {font-weight:normal;}

p.thick {font-weight:bold;}p.thicker {font-weight:900;}

الخط وزن

الوزن تحدد• . الخط " النص " من جرأة الممكنة ممتلكات القيم هي:

جريء•( الطبيعي• االفتراضي )جرأة • ( أكثر عريض ) النص من جرأة أكثروزنا • ( أخف عادي ) نص من أخفمضاعفات • مع محددة تكون أن يمكن أيضا 900-100، 100الجرأة

المثال،) سبيل ، ... 200، 100على ما(. 900، كالمعتاد المحدد النصيعادل 400يعادل ما عريض والنص ،700

•: فقرات ثالث عن مختلف خط الوزن ضبط•}p.normal الوزنfont} عادي؛-:

}p.thick الوزنfont} جريئة؛-: }p.thicker : الوزن ؛{900الخط

4

5 

6 


8 <head>

9 <title>Box Dimensions</title>

10 <style type = "text/css">

11 div { background-color: #aaccff;

12 margin-bottom: .5em;

13 font-family: arial, helvetica, sans-serif }

14 </style>

15 </head>

16 <body>

17 <div style = "width: 20%">Here is some

18 text that goes in a box which is

19 set to stretch across twenty percent

20 of the width of the screen.</div>

21

22 <div style = "width: 80%; text-align: center">

23 Here is some CENTERED text that goes in a box

24 which is set to stretch across eighty percent of

25 the width of the screen.</div>

26

Sets the width of the element to 20% of the browser’s screen’s size

إلى عنصر عرض ٪ 20يحددالمتصفح شاشة حجم من

Sets the width of the element to 80% of the browser’s screen’s size and centers it

إلى عنصر عرض من 80يحدد ٪ومراكز المتصفح شاشة حجم

المعلومات تكنولوجيا

27 <div style = "width: 20%; height: 150px; overflow: scroll">

28 This box is only twenty percent of

29 the width and has a fixed height.

30 What do we do if it overflows? Set the

31 overflow property to scroll!</div>

32 </body>

33 </html>

Sets the width of the element to 20% of the browser’s screen’s size, the height to 150 px, and allows the element to scroll if the text overflows the allotted size

إلى عنصر عرض شاشة 20يحدد حجم من ٪إلى االرتفاع ويسمح 150المتصفح، بكسل،

حجم امتدت النص كان إذا للتمرير للعنصرالمخصصة

4

5 

6 


8 <head>

9 <title>Style Sheets</title>

10

11 


13 em { font-weight: bold;

14 color: black }

15 h1 { font-family: tahoma, helvetica, sans-serif }

16 p { font-size: 12pt;

17 font-family: arial, sans-serif }

18 .special { color: #6666ff }

19 </style>

20 </head>

21 <body>

22 

23 <h1 class = "special">Deitel & Associates, Inc.</h1>

24

25 <p>Deitel & Associates, Inc. is an internationally

26 recognized corporate training and publishing organization

27 specializing in programming languages, Internet/World

28 Wide Web technology and object technology education.

29 The company provides courses on Java, C++, Visual Basic,

30 C#, C, Internet and World Wide Web programming, Object

31 Technology, and more.</p>

Sets the MIME type to text/css

نوع إلى MIMEيحددالمغلق / نص

Sets the properties for all elements in the document within em tags

في العناصر كل خصائص يحددم عالمات ضمن الوثيقة

Style sheet begins

األنماط أوراق يبدأ

Sets the properties for all h1 elements in the document

كل خصائص يحددفي H1العناصر الوثيقة

Sets the properties for all p elements in the document

كل خصائص يحددوثيقة pالعناصر Creates a special classفي

خاصة فئة إنشاء

Style sheet ends

األنماط أوراق نهايات

32

33 <h1>Clients</h1>

34 <p class = "special"> The company's clients include many

35 <em>Fortune 1000 companies</em>, government agencies,

36 branches of the military and business organizations.

37 Through its publishing partnership with Prentice Hall,

38 Deitel & Associates, Inc. publishes leading-edge

39 programming textbooks, professional books, interactive

40 web-based multimedia Cyber Classrooms, satellite

41 courses and World Wide Web courses.</p>

42 </body>

43 </html>

The special class is applied to this p element

خاصة فئة تطبيق يتمص العنصر لهذا

PORTABILITY TIP 5.1تلميح 5.1قابلية

To ensure that your style sheets work in various web browsers, test them on all the client web browsers that will render documents using your styles, as well as using the W3C CSS Validator.

في لهم واختبار المختلفة، الويب متصفحات في تعمل صحائف طريقتك من للتأكداألنماط باستخدام المستندات تجعل أن شأنها من العميل الويب متصفحات جميع

باستخدام وكذلك بك، .CSS W3Cالخاصة المصادقة Note :MIME (Multi-purpose Internet Mail Extension)

: مالحظةMIME ) إنترنت ) بريد ملحق األغراض متعددة

GOOD PROGRAMMING PRACTICE 5.2البرمجة ممارسة 5.2جيدة

Whenever possible, use relative-length measurements. If you use absolute-length measurements, your document may not be readable on some client browsers (e.g., wireless phones).

القياسات واستخدام ممكنا، ذلك كان .كلما طول تستخدم النسبي كنت إذاالمتصفحات بعض على للقراءة المستند يكون ال قد المطلق، طول قياسات

.) الالسلكية ) الهواتف المثال، سبيل على العميل

4

5 

6 


8 <head>

9 <title>Background Images</title>


11 body { background-image: url(logo.gif);

12 background-position: bottom right;

13 background-repeat: no-repeat;

14 background-attachment: fixed;

15 background-color: #eeeeee }


17 color: #1144AA;

18 text-indent: 1em;

19 font-family: arial, sans-serif; }

20 .dark { font-weight: bold }

21 </style>

22 </head>

Inserts the image at logo.gif as the background في الصورة logo.gifإدراج

كخلفية

Places the image at the bottom right of the page من اليمين أسفل في صورة يضع

الصفحةDisplays only one copy of the image

الصورة من فقط واحدة نسخة يعرض

Keeps the image in place when the user scrolls in the browser window

تمرير عند المكان في الصورة وتبقيالمتصفح نافذة في المستخدم

Fills the remainder of the window with a light gray background

رمادية خلفية مع النافذة من تبقى ما يمأل Indents the first line of text in theخفيفة

element by 1 em

النص من األول السطر في البادئةبنسبة العنصر م 1في

23 <body>

24 <p>

25 This example uses the background-image,

26 background-position and background-attachment

27 styles to place the <span class = "dark">Deitel

28 & Associates, Inc.</span> logo in the bottom,

29 right corner of the page. Notice how the logo

30 stays in the proper position when you resize the

31 browser window. The background-color fills in where

32 there is no image.

33 </p>

34 </body>

35 </html>

CSS PSEUDO-CLASSES

CSS pseudo-classes are used to add special effects to some selectors.

Syntax. The syntax of pseudo-classes: selector:pseudo-class {property:value;}

CSS classes can also be used with pseudo-classes:

selector.class:pseudo-class {property:value;}

Anchor Pseudo-classes Links can be displayed in different ways in a

CSS-supporting browser:

CSS الطبقات الزائفة

الطبقات CSSتستخدم • لبعض الزائفة الخاصة المؤثرات إلضافة المنتخبات.

: . هي فئات الزائفة جملة بناء الجملة بناء} : القيمة؛: } الملكية الدرجة من الزائفة محدد

فصول • أيضا :CSSيمكن هي فئات شبه مع استخدامها:selector.class} : القيمة؛ } الملكية الدرجة من الزائفة

الطبقات الزائفة مرساةيدعم • متصفح في مختلفة بطرق عرضها يمكن :CSSوصالت

Example a:link {color:#FF0000;} /* unvisited link */

a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Note: Pseudo-class names are not case-sensitive

مثال # : { : لون الرابط رابط{ / * FF0000و زيارته ؛ تتم لم

/ * # : لون: } زار رابط{ / * 00FF00ج * / زار؛

# : لون: } تحوم فوق ؛{ / * FF00FFو االرتباط * الماوس /

# : لون: } نشط المحدد * /ارتباط؛{ / * 0000FFو :مالحظة: : أ : في زار و وصلة بعد تأتي أن يجب تحوم

فعالة !!CSSتعريف تكون أن أجل من : أ: : مالحظة تعريف في تحوم بعد يأتي أن يجب نشطة

CSS !! فعالة تكون أن أجل من:تتحسس مالحظة ال هي المزيفة الفئة أسماء

PSEUDO-CLASSES AND CSS CLASSES

Pseudo-classes can be combined with CSS classes:

a.red:visited {color:#FF0000;}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

If the link in the example above has been visited, it will be displayed in red.

وفئات الطبقات CSS الزائفة

الطبقات بين الجمع يمكن الطبقات :الزائفةa.red:visited {color:#FF0000;}

< a class="red" href="css_syntax.asp">CSS Syntax</a >

في عرضه سيتم زار، قد أعاله المثال في االرتباط كان إذا

الحمراء.

NOTES:

To apply rules to multiple elements, separate the elements with commas in the style sheet

h1,em

To apply rules to only a certain type of element that is a child of another type, separate the element names with spaces

Li emchildparent

element element

:مالحظات

لعناصر قواعد بفواصل لتطبيق العناصر فصل في متعددة،األنماط ورقة

h1,emالعنصر •

العنصر •o العنصر من معين نوع فقط قواعد لتطبيق

نوع طفل هوالذي أسماء من فصل آخر، بمسافاتالعناصر

Li em

طف االم ل

4

5 

6 


8 <head>

9 <title>More Styles</title>


11 body { font-family: arial, helvetica, sans-serif }

12 a.nodec { text-decoration: none }

13 a:hover { text-decoration: underline }

14 li em { font-weight: bold }

15 h1, em { text-decoration: underline }

16 ul { margin-left: 20px }

17 ul ul { font-size: .8em }

18 </style>

19 </head>

20 <body>

21 <h1>Shopping list for Monday:</h1>

22

Defines the class nodec that can only be used by anchor elements

إال nodecيحدد تستخدم أن يمكن التي الفئةمرساة عناصر قبل من

Sets the properties for the hover pseudoclass for the a element, which is activated when the user moves the cursor over an anchor element

خصائص الذي للعنصر تحوم pseudoclass يحددبتحريك المستخدم يقوم عندما تنشيط يتم

مرساة عنصر فوق المؤشر

All em elements that are children of li elements set to bold

األطفال هي التي م عناصر جميعجريئة أن المقرر لى عناصر من

Applies underline style to all h1 and em elements

لجميع التسطير نمط H1وينطبقم عناصر و

23 <ul>

24 <li>Milk</li>

25 <li>Bread

26 <ul>

27 <li>White bread</li>

28 <li>Rye bread</li>

29 <li>Whole wheat bread</li>

30 </ul>

31 </li>

32 <li>Rice</li>

33 <li>Potatoes</li>

34 <li>Pizza <em>with mushrooms</em></li>

35 </ul>

36

37 <p><em>Go to the</em>

38 <a class = "nodec" href = "http://www.deitel.com">

39 Grocery store</a>

40 </p>

41 </body>

42 </html>

98

COMMON PROGRAMMING ERROR 5.1

Including a space before or after the colon separating a pseudo class from the name of the element to which it is applied is an error that prevents the pseudo class from being applied properly.

1 /* Fig. 5.4: styles.css */

2 /* External stylesheet */

3

4 body { font-family: arial, helvetica, sans-serif }

5

6 a.nodec { text-decoration: none }

7

8 a:hover { text-decoration: underline }

9

10 li em { font-weight: bold }

11

12 h1, em { text-decoration: underline }

13

14 ul { margin-left: 20px }

15

16 ul ul { font-size: .8em; }

Example

4

5 

6 


8 <head>

9 <title>Linking External Style Sheets</title>

10 <link rel = "stylesheet" type = "text/css"

11 href = "styles.css" />

12 </head>

13 <body>

14 <h1>Shopping list for <em>Monday</em>:</h1>

15

16 <ul>

17 <li>Milk</li>

18 <li>Bread

19 <ul>

20 <li>White bread</li>

21 <li>Rye bread</li>

22 <li>Whole wheat bread</li>

23 </ul>

24 </li>

25 <li>Rice</li>

26 <li>Potatoes</li>

27 <li>Pizza <em>with mushrooms</em></li>

28 </ul>

29

The linked document is declared to be the current one’s stylesheet

The linked document’s MIME type is text/css

The linked document’s URL is styles.css

30 <p><em>Go to the</em>

31 <a class = "nodec" href = "http://www.deitel.com">

32 Grocery store</a>

33 </p>

34 </body>

35 </html>

SOFTWARE ENGINEERING OBSERVATION 5.2

External style sheets are reusable. Creating them once and reusing them reduces programming effort.

PERFORMANCE TIP 5.1

Reusing external style sheets reduces load time and bandwidth usage on a server, since the style sheet can be downloaded once, stored by the web browser, and applied to all pages on a website.

POSITIONING

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.

Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

There are four different positioning methods.

STATIC POSITIONING

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.

Static positioned elements are not affected by the top, bottom, left, and right properties.

FIXED POSITIONING An element with fixed position is positioned

relative to the browser window. It will not move even if the window is scrolled: Example p.pos_fixed

{position:fixed;top:30px;right:5px;}

Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.

Fixed positioned elements can overlap other elements.

RELATIVE POSITIONING A relative positioned element is positioned relative to its normal

position. Example h2.pos_left

{position:relative;left:-20px;}h2.pos_right{position:relative;left:20px;}

The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

Example h2.pos_top

{position:relative;top:-50px;}

ABSOLUTE POSITIONING

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:

Example h2

{position:absolute;left:100px;top:150px;}

Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.

Absolutely positioned elements can overlap other elements.

EXAMPLE <html><head><style type="text/css">h2{position:absolute;left:100px;top:150px;}</style></head>

<body><h2>This is a heading with an absolute position</h2><p>With absolute positioning, an element can be placed anywhere on a page. The

heading below is placed 100px from the left of the page and 150px from the top of the page.</p>

</body>

</html>

OUTPUT

With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.

This is a heading with an absolute position

OVERLAPPING ELEMENTS

When elements are positioned outside the normal flow, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element can have a positive or negative stack order: Example img

{position:absolute;left:0px;top:0px;z-index:-1}

An element with greater stack order is always in front of an element with a lower stack order.

Note: If two positioned elements overlap, without a z-index specified, the element positioned last in the HTML code will be shown on top.

112 1 <?xml version = "1.0" encoding = "utf-8"?>



4

5 

6 


8 <head>

9 <title>Absolute Positioning</title>


11 .bgimg { position: absolute;

12 top: 0px;

13 left: 0px;

14 z-index: 1 }

15 .fgimg { position: absolute;

16 top: 25px;

17 left: 100px;

18 z-index: 2 }

19 .text { position: absolute;

20 top: 25px;

21 left: 100px;

22 z-index: 3;

23 font-size: 20pt;

24 font-family: tahoma, geneva, sans-serif }

25 </style>

26 </head>

27 <body>

28 <p><img src = "bgimg.gif" class = "bgimg"

29 alt = "First positioned image" /></p>

30

Class that sets an element’s absolute position at the top left of the containing element

Lowest z-index, so this element is behind all the others

Set element’s position 25px from the top and 100 from the left

This element will appear on top of the first one, since it has a higher z-index

This element will appear on top of all others, since it has the highest z-index

31 <p><img src = "fgimg.gif" class = "fgimg"

32 alt = "Second positioned image" /></p>

33

34 <p class = "text">Positioned Text</p>

35 </body>

36 </html>

CSS DISPLAY AND VISIBILITY

Hiding an Element - display:none or visibility:hidden Hiding an element can be done by setting the display property to

"none" or the visibility property to "hidden". However, notice that these two methods produce different results:

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

Example h1.hidden {visibility:hidden;}

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there:

Example h1.hidden {display:none;}

CSS DISPLAY - BLOCK AND INLINE ELEMENTS

A block element is an element that takes up the full width available, and has a line break before and after it. Have virtual boxes around them

Examples of block elements: all headings (h1 through h6) <p> <div> An inline element only takes up as much width

as necessary, and does not force line breaks. Examples of inline elements: <span> <a>

CHANGING HOW AN ELEMENT IS DISPLAYED

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards.

The following example displays list items as inline elements:

Example li {display:inline;}

The following example displays span elements as block elements:

Example span {display:block;}

EXAMPLE

Display this link list as a horizontal menu: HTML CSS JavaScript XML

<html> <head> <style type="text/css"> li{display:inline;} </style> </head> <body>

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp

http://www.w3schools.com/js/default.asp

http://www.w3schools.com/xml/default.asp

<p>Display this link list as a horizontal menu:</p>

<ul> <li><a href="/html/default.asp">HTML</a></li> <li><a href="/css/default.asp">CSS</a></li> <li><a href="/js/default.asp">JavaScript</a></li> <li><a href="/xml/default.asp">XML</a></li> </ul>

</body> </html>

HTML <SPAN> TAG

The <span> tag is used to group inline-elements in a document.

The <span> tag provides no visual change by itself.

EXAMPLE (IN LINE ELEMENT) <html> <head> <style type="text/css"> span.blue {color:lightskyblue;font-weight:bold} span.green {color:darkolivegreen;font-weight:bold} </style> </head> <body> <p>My mother has <span class="blue">light

blue</span> eyes and my father has <span class="green">dark green</span> eyes.</p>

</body> </html>

4

5 

6 


8 <head>

9 <title>Relative Positioning</title>


11 p { font-size: 1.3em;

12 font-family: verdana, arial, sans-serif }

13 span { color: red;

14 font-size: .6em;

15 height: 1em }

16 .super { position: relative;

17 top: -1ex }

18 .sub { position: relative;

19 bottom: -1ex }

20 .shiftleft { position: relative;

21 left: -1ex }

22 .shiftright { position: relative;

23 right: -1ex }

24 </style>

25 </head>

26 <body>

27 <p>The text at the end of this sentence

28 <span class = "super">is in superscript</span>.</p>

29

Positions element 1 ex upwards

Positions element 1 ex downwards

Positions element 1 ex to the left

Positions element 1 ex to the right

Apply the super class to this span element


31 <span class = "sub">is in subscript</span>.</p>

32


34 <span class = "shiftleft">is shifted left</span>.</p>

35


37 <span class = "shiftright">is shifted right</span>.</p>

38 </body>

39 </html>

Apply the sub class to this span element

Apply the shiftleft class to this span element

Apply the shiftright class to this span element

THE CSS BOX MODEL

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in relation to other elements.

The image below illustrates the box model:.

Block-level XHTML elements have a virtual box drawn around them based on the box model

When the browser renders using the box model, each element is surrounded by: Padding

The padding property determines the distance between the content inside an element and the edge of the element

Padding be set for each side of the box by using padding-top, padding-right, padding-left and padding-bottom

Margin Determines the distance between the element’s edge and any

outside text Margins for individual sides of an element can be specified by

using margin-top, margin-right, margin-left and margin-bottom

Border The border is controlled using the properties:

border-width May be set to any of the CSS lengths or to the

predefined value of thin, medium or thick border-color

Sets the color used for the border border-style

Options are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset

127

FIG. 5.11 | BORDERS OF BLOCK-LEVEL ELEMENTS (PART 1 OF 2).




4

5 

6 


8 <head>

9 <title>Borders</title>


11 div { text-align: center;

12 width: 50%;

13 position: relative;

14 left: 25%;

15 border-width: 4px }

16 .medium { border-width: medium }

17 .thin { border-width: thin }

18 .solid { border-style: solid }

19 .double { border-style: double }

20 .groove { border-style: groove }

21 .inset { border-style: inset }

22 .outset { border-style: outset }

23 .dashed { border-style: dashed }

24 .red { border-color: red }

25 .blue { border-color: blue }

26 </style>

27 </head>

Defines several border classes

128

FIG. 5.11 | BORDERS OF BLOCK-LEVEL ELEMENTS (PART 2 OF 2).

28 <body>

29 <div class = "solid">Solid border</div><hr />

30 <div class = "double">Double border</div><hr />

31 <div class = "groove">Groove border</div><hr />

32 <div class = "inset">Inset border</div><hr />

33 <div class = "dashed">Dashed border</div><hr />

34 <div class = "thin red solid">Thin Red Solid border</div><hr />

35 <div class = "medium blue outset">Medium Blue Outset border</div>

36 </body>

37 </html>

Applies several classes to the same element

129

5.9 BOX MODEL AND TEXT FLOW (CONT.)

Browsers normally place text and elements on screen in the order in which they appear in the XHTML file.

Elements can be removed from the normal flow of text.

Floating allows you to move an element to one side of the screen; other content in the document will then flow around the floated element

4

5 

6 


8 <head>

9 <title>Flowing Text Around Floating Elements</title>


11 div.heading { background-color: #bbddff;

12 text-align: center;

13 font-family: arial, helvetica, sans-serif;

14 padding: .2em }

15 p { text-align: justify;

16 font-family: verdana, geneva, sans-serif;

17 margin: .5em }

18 div.floated { background-color: #eeeeee;

19 font-size: 1.5em;

20 font-family: arial, helvetica, sans-serif;

21 padding: .2em;

22 margin-left: .5em;

23 margin-bottom: .5em;

24 float: right;

25 text-align: right;

26 width: 50% }

27 div.section { border: 1px solid #bbddff }

28 </style>

29 </head>

Sets a spacing of .5 em from the outside of the border to all other content

Sets a spacing of .2 em from the inside of the border to the element’s content

Define left and right margins

Moves element to the right, and lets other content flow around it

Defines the border for this div class

30 <body>

31 <div class = "heading"><img src = "deitel.png" alt = "Deitel" />

32 </div>

33 <div class = "section">

34 <div class = "floated">Corporate Training and Publishing</div>

35 <p>Deitel & Associates, Inc. is an internationally

36 recognized corporate training and publishing organization

37 specializing in programming languages, Internet/World

38 Wide Web technology and object technology education.

39 The company provides courses on Java, C++, Visual Basic, C#,

40 C, Internet and web programming, Object

41 Technology, and more.</p>

42 </div>

43 <div class = "section">

44 <div class = "floated">Leading-Edge Programming Textbooks</div>

45 <p>Through its publishing

46 partnership with Prentice Hall, Deitel & Associates,

47 Inc. publishes leading-edge programming textbooks,

48 professional books, interactive CD-ROM-based multimedia

49 Cyber Classrooms, satellite courses and DVD and web-based

50 video courses.</p>

51 </div>

52 </body>

53 </html>

133

5.10 MEDIA TYPES

CSS media types allow a programmer to decide what a page

should look like depending on the kind of media being used to display the page

Most common media type for a web page is the screen media type, which is a standard computer screen

134

5.10 MEDIA TYPES (CONT.)

A block of styles that applies to all media types is declared by @media all and enclosed in curly braces

To create a block of styles that apply to a single media type such as print, use @media print and enclose the style rules in curly braces

135

5.10 MEDIA TYPES (CONT.)

Other media types in CSS 2 include: handheld

Designed for mobile Internet devices braille

For machines that can read or print web pages in braille

aural Allow the programmer to give a speech-synthesizing

web browser more information about the content of the web page

print Affects a web page’s appearance when it is printed

4

5 

6 


8 <head>

9 <title>Media Types</title>


11 @media all

12 {

13 body { background-color: #4488aa }

14 h1 { font-family: verdana, helvetica, sans-serif;

15 color: #aaffcc }


17 color: white;

18 font-family: arial, sans-serif }

19 } /* end @media all declaration. */

20 @media print

21 {

22 body { background-color: white }

23 h1 { color: #008844}


25 color: #4488aa;

26 font-family: "times new roman", times, serif }

27 } /* end @media print declaration. */

28 </style>

29 </head>

30 <body>

31 <h1>CSS Media Types Example</h1>

Sets properties for all media types

Sets properties for a page if it is being printed

32

33 <p>

34 This example uses CSS media types to vary how the page

35 appears in print and how it appears on any other media.

36 This text will appear one font on the screen and a

37 different font on paper or in a print preview. To see

38 the difference in Internet Explorer, go to the Print

39 menu and select Print Preview. In Firefox, select Print

40 Preview from the File menu.

41 </p>

42 </body>

43 </html>

LOOK-AND-FEEL OBSERVATION 5.1

Pages with dark background colors and light text use a lot of ink and may be difficult to read when printed, especially on a black-and white-printer. Use the print media type to avoid this.

LOOK-AND-FEEL OBSERVATION 5.2

In general, sans-serif fonts look better on a screen, while serif fonts look better on paper. The print media type allows your web page to display sans-serif font on a screen and change to a serif font when it is printed.

4

5 

6 


8 <head>

9 <title>

10 Drop-Down Menu

11 </title>


13 body { font-family: arial, sans-serif }

14 div.menu { font-weight: bold;

15 color: white;

16 border: 2px solid #225599;

17 text-align: center;

18 width: 10em;

19 background-color: #225599 }

20 div.menu:hover a { display: block }

21 div.menu a { display: none;

22 border-top: 2px solid #225599;

23 background-color: white;

24 width: 10em;

25 text-decoration: none;

26 color: black }

27 div.menu a:hover { background-color: #dfeeff }

28 </style>

29 </head>

30 <body>

Sets anchor elements in a menu div to be displayed as block-level when the menu is moused-over

Prevents the browser from rendering the links inside the menu div

Sets anchor elements in a menu div to have a light-blue background when they are moused-over

31 <div class = "menu">Menu

32 <a href = "#">Home</a>

33 <a href = "#">News</a>

34 <a href = "#">Articles</a>

35 <a href = "#">Blog</a>

36 <a href = "#">Contact</a>

37 </div>

38 </body>

39 </html>

5.12 USER STYLE SHEETS

Users can define their own user style sheets to format pages based on their preferences

Absolute font size measurements override user style sheets, while relative font sizes will yield to a user-defined style

User style sheets are not linked to a document; rather, they are set in the browser’s options

4

5 

6 


8 <head>

9 <title>User Styles</title>


11 .note { font-size: 9pt }

12 </style>

13 </head>

14 <body>

15 <p>Thanks for visiting my website. I hope you enjoy it.

16 </p><p class = "note">Please Note: This site will be

17 moving soon. Please check periodically for updates.</p>

18 </body>

19 </html>

A class defined by the author with absolute measurements: a font-size of 9 pt

1 /* Fig. 5.16: userstyles.css */

2 /* A user stylesheet */

3 body { font-size: 20pt;

4 color: yellow;

5 background-color: #000080 }

A different font-size of 20 pt is defined by the user for all body elements

FIG. 5.17 | USER STYLE SHEET IN INTERNET EXPLORER 7.

The author’s style has higher precedence than the user’s, so the font is 9 pt

4

5 

6 


8 <head>

9 <title>User Styles</title>


11 .note { font-size: .75em }

12 </style>

13 </head>

14 <body>

15 <p>Thanks for visiting my website. I hope you enjoy it.

16 </p><p class = "note">Please Note: This site will be

17 moving soon. Please check periodically for updates.</p>

18 </body>

19 </html>

A relative measurement of .75 em is used by the author for the font size

The user style sheet is considered, so the font-size is 15 pt (.75 em for 20 pt)

149

5.13 CSS 3

While CSS 2 is the current W3C Recommendation, CSS 3 is in development, and some browsers are beginning to implement some of the new features that will be in the CSS 3 specification

CSS 3 will introduce new features related to borders, backgrounds, text effects, layout, and more

CSS LISTS

<html> <head> <style type="text/css"> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head>

<body> <p>Example of unordered lists:</p>

<ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>

<ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>

<p>Example of ordered lists:</p>

<ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol>

</body> </html>

Example of unordered lists:oCoffee oTea oCoca Cola

Coffee Tea Coca Cola

Example of ordered lists:

I. Coffee II. Tea III. Coca Cola

a. Coffee b. Tea c. Coca Cola

AN IMAGE AS THE LIST ITEM MARKER

To specify an image as the list item marker, use the list-style-image property:

Example ul

{list-style-image: url('sqpurple.gif');}

OUTPUT

CSS-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: Example table, th, td

{border: 1px solid black;}

Notice that the table in the example above has double borders. This is because both the table and the th/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:

Example table

{border-collapse:collapse;}table,th, td{border: 1px solid black;}

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:

Example table

{width:100%;}th{height: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:

Example td

{text-align:right;}

The vertical-align property sets the vertical alignment, like top,

bottom, or middle: Example td

{height:50px;vertical-align:bottom;}

Table Padding To control the space between the border and content in a table,

use the padding property on td and th elements: Example td

{padding:15px;}

TABLE COLOR

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

Exampletable, td, th{border:1px solid green;}th{background-color:green;color:white;}

EXAMPLE

<html> <head> <style type="text/css"> #customers { font-family:"Trebuchet MS", Arial, Helvetica,

sans-serif; width:100%; border-collapse:collapse; }

#customers td { font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; }

#customers th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; }

#customers tr.alt td { color:#000000; background-color:#EAF2D3; } </style>

</head> <body> <table id="customers"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr>

<tr class="alt"> <td>Berglunds snabbkِp</td> <td>Christina Berglund</td> <td>Sweden</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr>

<tr class="alt"> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr>

<tr class="alt"> <td>Kِniglich Essen</td> <td>Philip Cramer</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr>

<tr class="alt"> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>Simon Crowther</td> <td>UK</td> </tr>

<tr class="alt"> <td>Paris spécialités</td> <td>Marie Bertrand</td> <td>France</td> </tr> </table> </body> </html>

REFERENCES

http://www.w3schools.com/css

C ASCADING S TYLE S HEETS ™ (CSS) الأنماط المتتالية صفائح ™ (CSS)

Documents

Transcript of C ASCADING S TYLE S HEETS ™ (CSS) الأنماط المتتالية صفائح ™ (CSS)